1장 Vue 소개

1장. Vue.js 소개

1) Vue.js란?

• 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크이다.
• 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하면서도, 프레임워크 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공한다. 라이브러리 역할뿐만아니라, 프레임워크 역할도 수행하기 때문에 점진적인 프레임워크라고도 부른다.

2) 뷰의 장점

1. 배우기 쉽다. 웹팩, ES6, TS 등 기타 구성을 생략하고 개발이 가능하다
2. 성능이 우수하다.
3. 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔 기반 렌더링 특징을 모두 갖고 았다.
4. 양방향 데이터 바인딩, 단방향 데이터 바인딩이 가능하다.

• 양방향 데이터 바인딩: 화면에 표시되는 값과 프레임워크 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경된다.
• 단방향 데이터 바인딩: 컨포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로 전달한다.

3) Vue는 MVVM 패턴에서 VM이다.

• MVVM: 화면 요소들을 제어하는 코드(프론트)와 데이터 처리 로직(백)을 분리하여 가독성을 높이기 위한 패턴
• ViewModel 구조
  1. 돔 리스너: 돔의 변경 내역에 반응하여 특정 로직을 수행한다.
  2. 디렉티브: 데이터 바인딩을 맡아, 화면의 표시되는 내용과 모델의 데이터를 동기화한다.

정오표 (책 전체)

1. Vue 3에서는 start-from을 사용할 것.
2. v-slot 속성을 통해 오버라이딩하며, 이는 template 태그에서만 사용할 수 있는 어트리뷰트다.
3. @keyup.enter="addTodo"는 input 태그 속성에 넣어야 할 것.
4. dev에서 localStorage에 저장되는 이슈: if (localStorage.key(i) != "loglevel:webpack-dev-server")