김군...

-Creation, Mounting, Updating, Destruction 으로 나눌 수 있음.

Creation : 컴포넌트 초기화 단계
-컴포넌트 초기화단계.
-사이클 중에 가장먼저 실행됨.
-컴포넌트가 DOM에 추가되기전임, 따라서 this.$el을 사용할 수 없음.
-created 훅은 먼저 부모 created 훅이 실행되고 자식이 created 훅이 실행됨.
-beforeCreate 훅과 created 훅이 존재함.

Mounting : DOM 삽입단계
-초기 렌더링 직전에 컴포넌트에 직접 접근할 수 있음. 서버렌더링에서는 지원하지 않음.
-컴포넌트 초기에 셋팅되어야할 데이터는 created 훅 단계에서 사용하는게 좋음.
-beforeMount 훅은 템플릿과 렌더함수들이 컴파일된 후에 첫 렌더링이 일어나기 직전에 실행됨.
-mounted 훅은 컴포넌트, 템플릿, 렌더링된 돔에 접근 가능.
-mounted 훅에서 mounted 훅 순서는 자식 mounted 훅이 실행되고 부모 mounted 훅이 실행됨.
-beforeMount 훅과 mounted 훅이 존재함.

Updating : 재랜더링 단계
-컴포넌트에서 사용되는 반응형 속성들이 변경되거나 어떤 이유로 재 렌더링이되면 실행됨.
-디버깅이나 프로파일링 등을 위해 컴포넌트 재 랜더링 시점을 알고싶을 때 사용하면됨.
-서버렌더링에서는 호출되지 않음.
-beforeUpdate 훅은 컴포넌트의 데이터가 변하여 업데이트 사이클이 시작될때 실행됨.
-beforeUpdate 훅은 DOM이 재 렌더링되고 패치되기 직전에 실행됨.
-beforeUpdate 훅은 재 랜더링 전의 새 상태의 데이터를 얻을 수 있고 더 많은 변경이 가능함. 이변경은 재 랜더링은 트리거되지 않음.

-updated 훅은 데이터가 변하여 재 렌더링이 일어날 후에 실행됨.
-updated 훅은 여기서 상태를 변경하면 무한루프에 빠질 수 있음. 모든 자식컴포넌트의 재 랜더링 상태를 보장하지는 않음.

Destruction : 해제 단계

-beforeDestroy 훅은 해제 되기 직전에 호출됨.
-beforeDestroy 훅은 이벤트리스너 또는 reactive subscription을 제거하고 싶으면 여기서 하면 좋음. 서버렌더링시 호출안됨.
-destroyed 훅은 해제된 후에 호출됨.
-destroyed 훅은 모든 리스너 하위인스턴스도 제거 및 해제됨. 서버렌더링시 호출안됨.

-------------------------------------------------------------------------------------------------------------------

컴포넌트에는 3가지로 이루어짐
- template : html, vue에서 제공하는 디렉티브, 템플릿, 다른 컴포넌트
- script : js 파일들
- style : css, scss 스타일 파일들

-------------------------------------------------------------------------------------------------------------------

assets : 정적인 자원 (img, js, css, font 등등)
components : .vue 파일 존재 (컴포넌트 존재)
router : .js 파일 존재 (http 사용, 또는 컴포넌트간에 통신을 위한 스크립트)
store : : .js 파일 존재 (vuex ??? 내용 존재)
view : .vue 파일 존재 (template, html, script, css 등등 내용이 존재)

Vue.js (JavaScript Framework) , 레퍼런스 : https://ojava.tistory.com/185

개발환경
-VS Code (툴)
-Node.js


1.VS Code 설치

URL = https://code.visualstudio.com/

-시스템 버전으로 설치한다 (유저버전도 있음)

2.Node.js 설치

URL = https://nodejs.org

cmd에서 버전확인 명령어
node -v
npm -v

vscode 터미널에서 npm init -y 명령어 실행하면 package.json 파일이 생성된다.

npm을 통해 Node Module를 설치하는 방법은 npm install [module] [option]이다.

express 설치 : npm install express --save


3. 크롬 브라우저에서 Vue.js devtools를 설치

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd


4.vue CLI 3.0 설치

npm install -g @vue/cli 또는 yarn global add @vue/cli

버전확인 
vue --version

터미널에서 버전확인
vue.cmd --version


5.프로젝트 생성
vue create 프로젝트명 (케밥식으로 작성, ex : test-vue)

터미널에서 프로젝트 생성된다
vue.cmd create 프로젝트명

vue/cli 3.x 미만(1.x 혹은 2.x) 인 경우 : vue init webpack 프로젝트명

6.프로젝트 실행

실행 : npm run serve (프로젝트폴더로 이동 후 실행)
종료 : Ctrl + c

7.프로젝트 UI 실행

IntelliJ CE(CommunityEdition) 버전에서 SpringBoot 프로젝트 생성 기능을 제공하지 않는다.

그럼 CE 버전에서 SpringBoot 프로젝트를 개발 할 수 있는 방법은 https://start.spring.io/ 에서 프로젝트를 생성하고 Import 하면 된다.

zip파일을 다운로드 받고 압축 해제 후 IntelliJ에서 Open 한다