꾸준2

참고 : Vue.js 입문책을 읽고 학습한 내용을 블로그에 정리한 글이므로 내용상 오류가 있을 수 있습니다. 
        오류가 있다면 댓글 남겨주시면 감사하겠습니다.

Vue 인스턴스

• Vue로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위
• 데이터 바인딩, 컴포넌트, 템플릿 렌더링 등 여러가지를 동작을 수행

Vue 인스턴스 형식

new Vue({

  ...

});

new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 합니다.

생성자를 사용하는 이유는 미리 생성자에 필요한 기능들을 정의 해서

사용자가 ... 부분에 인스턴스 속성들을 사용하여 화면을 개발할 수 있게합니다.

Vue 인스턴스 속성

Vue 인스턴스 속성 적용 과정

1. 뷰 라이브러리 파일 로딩

2. 인스턴스 객체 생성(속성 포함)

3. div태그의 id에 인스턴스 el 속성을 붙입니다.

4. 인스턴스 data속성의 text값 'Hi vue'가 div태그안의 {{text}}로 치환됩니다.

5. 치환된 내용{{text}}값을 화면에서 갱신합니다.

뷰 인스턴스 라이프 사이클

라이프 사이클(life cycle) : 인스턴스의 상태에 맞게 호출할 수 있는 속성

라이프 사이클 4단계

인스턴스 생성 -> 인스턴스를 화면에 부착 -> 부착된 인스턴스의 내용 갱신 -> 인스턴스 소멸

(부착 -> 갱신 구간은 데이터가 변경된 경우에만 실행됩니다.)

라이프 사이클 세부 내용

(인스턴스 생성)

1. 이벤트 및 라이프 사이클 초기화

2. beforeCreate : data 속성과 methods속성이 아직 인스턴스에 정의 되지 않아서 화면 요소에 접근 불가능한 단계

3. 화면에 반응성 주입

4. created

• data속성과 methods속성이 정의되어서 정의된 값에 접근하여 로직을 실행할 수 있습니다
• 인스턴스가 화면에 부착되기 전이기 때문에 template속성에 정의된 돔 요소로 접근 불가능합니다.
• 컴포넌트가 생성되고 나서 실행되는 단계이기 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행합니다

5. el, template속성 확인

6. template 속성 내용을 render()로 변환

7. beforeMount : 5,6 내용을 화면에 부착하기 전이라서 render()함수가 호출되기 직전의 로직을 추가하면 좋습니다. 

8. $el 생성 후 el속성 값을 대입

(인스턴스를 화면에 부착)

9. mounted

• el 속성에서 지정한 화면 요소에 인스턴스가 부착된 이후에 호출되는 단계
• template속성의 내용을 화면 요소에 접근할 수 있어서 화면 요소를 제어하는 로직을 수행하기 좋은 단계
• 화면에 인스턴스가 부착되자마자 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 html코드로 변환되는 시점과 다를 수 있습니다.

(데이터가 변경되는 경우에만)

10. 인스턴스의 데이터 변경

11. beforeUpdate

• 관찰하고 있는 데이터가 바뀌면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계
• 변경 예정인 새 데이터에 접근하여 관련된 로직을 미리 넣을 수 있습니다.
• 값을 변경하는 로직을 넣어도 화면은 갱신되지 않습니다.

12. 화면 재 렌더링 및 데이터 갱신

13. updated

• 데이터가 변경된 후 가상 돔으로 다시 화면을 갱신하면 실행되는 단계
• 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점
• 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계

(인스턴스 내용 갱신)

14. 인스턴스 접근 가능

15. beforeDestroy : 인스턴스 접근 가능하여 데이터를 삭제하기 좋은 단계

16. 컴포넌트, 인스턴스 디렉티브 등 모두 해제

17. destroyed : 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들도 파괴

(인스턴스 소멸)

참고 : Vue.js 입문책을 읽고 학습한 내용을 블로그에 정리한 글이므로 내용상 오류가 있을 수 있습니다. 
        오류가 있다면 댓글 남겨주시면 감사하겠습니다.

준비물

1. 크롬 브라우저

2. 아톰(Atom) 에디터

3. Node.js

4. 뷰 개발자 도구(Vue.js devtools, 크롬 확장 플러그인)

2. 아톰 에디터 설치

1) 크롬 브라우저에서 atom을 검색합니다.

2) 다운로드를 클릭합니다.

3) 알집을 풀고 설치를 진행합니다.

2-1 아톰 테마 설정하기

1) 아톰 에디터를 실행하고 File -> Settings을 클릭합니다

2) Settings의 가장 아래쪽에 있는 Install탭을 클릭하면 테마를 설치 할 수 있는 화면이 나옵니다.

3) Install 화면에서 검색창 오른쪽에 있는 테마를 클릭하고 자신이 사용하고 싶은 테마를 검색하고 Install 버튼을 클릭합니다.

4) 똑같은 방식으로 'atom-material-syntax-dark'를 검색 후 설치합니다.

5) 새로운 폴더와 파일을 생성하여 테마를 적용시킵니다.

1. File에서 Open File 탭을 클릭합니다.

2. 자신이 만든 폴더를 선택후 폴더 선택을 누릅니다.

3. 폴더 선택을 하면 이러한 화면이 나오게 되는데 테마 적용을 확인하기 위해 새로운 파일을 생성합니다.

4. 프로젝트를 누르고 오른쪽 마우스를 클릭하여 New File을 클릭합니다.

5. app.js, base.css, index.html 파일을 생성합니다.

6. 테마 적용하기

File에서 Settings탭을 클릭 후  Themes 버튼을 클릭합니다.

7. 자신의 취향에 맞는 테마를 선택합니다.

(테마 적용 전)

(테마 적용 후)

3. Node.js 설치하기

1) 브라우저 검색창에 nodejs.org을 입력하여 공식 사이트에 접속하고 빨간색 박스안에 있는 버튼을 클릭하여 다운로드 합니다.

2) 라이센스 또는 사용권 계약 조항에 동의한 후 설치를 진행합니다.

3) 정상적으로 설치 되었는지 윈도우 명령 프롬프트(cmd) 혹은 맥의 터미널(Terminal)에서 node -v를 실행합니다.

4. 뷰 개발자 도구 설치

1) 구글에서 vue.js devtools를 검색후 아래의 링크를 클릭합니다.

2) 오른쪽 상단에 있는 [Chrome에 추가] 버튼을 클릭합니다.

3) [확장 프로그램 추가]버튼을클릭하면 주소창 오른쪽에 뷰 로고 모양의 아이콘이 생깁니다.

4) 주소창 오른쪽에 있는 점3개를 누르고 도구 더보기에서 확장 프로그램 버튼을 클릭합니다.

5) 뷰 개발자 도구에 세부 정보를 클릭합니다.

6) '파일 URL에 대한 엑세스를 허용'버튼을 클릭해서 활성화 합니다.

참고 : Vue.js 입문책을 읽고 학습한 내용을 블로그에 정리한 글이므로 내용상 오류가 있을 수 있습니다. 
        오류가 있다면 댓글 남겨주시면 감사하겠습니다.

Vue

• Vue는 웹 화면을 개발하기 위해 자바스크립트로  개발된 프레임워크입니다.
• 구글에서 근무하던 에반 유(Evan You)가 AngularJS를 사용하다가 자기가 좋아하는 특성과 초보 개발자들도 접근이 가능한 프레임워크를 만들기 위해서 만들었습니다.
• Vue는 라이브러리 역할과 프레임워크 역할을 모두 합니다 하지만 헷갈릴 수 있기 때문에 프레임워크라고 정의합니다.

Vue의 장점

1.  Angular와 React에 비해 배우기 쉽다.

      - Angular : 타입스크립트(TypeScript)와 ES6(ECMAScript 2015)등 많은 학습이 필요합니다.

      - React : 입문자가 배우기위해 ES6와 JSX등 학습이 필요합니다.

2.  Angular와 React 보다 성능이 우수하고 더 빠릅니다.

3.  Angular와 React의 장점을 모두 갖고 있습니다

       - Angular : 데이터 바인딩 특성

       - React : 가상 돔 기반 렌더링 특징

Vue의 특징

1. MVVM패턴을 이용한 화면 개발 

MVVM패턴이란?

화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel) 구조로 개발하는 방식을 말합니다.

MVVM패턴은 화면의 부분을 제어하는 코드와 데이터의 부분을 제어하는 코드를 분리하였기 때문에

코드를 더 쉽게 이해하고 유지 보수를 편하게 할 수 있습니다.

MVVM구조 처리 과정 설명

1. View에서 Vue단어를 입력 후 검색합니다
2. ViewModel은 검색버튼을 감지후 Model에서 Vue에 해당하는 데이터를 가져오는 로직(돔 리스너)을 실행합니다
3. ViewModel은 Model에서가져온 Vue데이터를 View(화면)에 동기화합니다(데이터 바인딩)
4. ViewModel에서 처리된 결과를 View에 갱신하여 보여줍니다.

2. 컴포넌트 기반 프레임워크

컴포넌트(Component) - 레고 블럭과 같이 재사용이 가능한 최소 단위를 말합니다.

(Vue에서 컴포넌트를 사용했을 때)

• 프로그래밍을 할 때 재사용하기가 쉽습니다
• HTML 코드에서 화면의 구조를 쉽게 파악 할 수있습니다.
• 모두가 정해진 방식으로 컴포넌트를 사용하기 때문에 빠르게 구현할 수 있고 다른 사람이 작성한 코드를 볼 때 쉽게 볼 수있습니다.

3. 리액트와 앵귤러의 장점을 가진 프레임워크

1. 앵귤러의 양방향 데이터 바인딩(Two-way Data Binding)
2. 리액트의 단방향 데이터 바인딩(One-way Data Binding)
3. 리액트의 가상돔 렌더링 방식