할 일 관리 앱 만들기

• 브라우저 저장소에는 로컬 스토리지(Local Storage), 세션 스토리지(Sesstion Storage), 인덱스드 디비(IndexedDB) 등 여러 가지가 있다.  
  • Web Storage API

Web Storage API

• 하나의 페이지를 여러 컴포넌트로 쪼개 놓은 이유는 작은 역할 단위로 컴포넌트를 관리하는 것이 다른 페이지에서 해당 코드를 재사용하기가 수월하기 때문이다.
• 컴포넌트는 관례상 src/components 폴더에서 관리한다.
  • 애플리케이션 규모가 커져 기능별로 관리해야 할 경우에는 components/기능/컴포넌트.vue 와 같은 형식으로 관리한다.
• 모든 컴포넌트는 최상위 컴포넌트인 App.vue에 등록한다.
• 싱글 파일 컴포넌트 체계에서 특정 컴포넌트에서 다른 위치에 있는 컴포넌트의 내용을 불러올 때 import from 구문을 사용한다.
  • 컴포넌트 내용을 불러올 때 ES5 vs ES6 : ES5 방식은 var로 선언한 객체에 컴포넌트의 내용을 담아 넘겨주고, ES6 방식은 import 구문으로 컴포넌트의 내용을 불러와 담고 넘겨준다.
• <style> 태그에 사용하는 scoped는 뷰에서 지원하는 속성으로 스타일 정의를 해당 컴포넌트에서만 적용하겠다는 의미이다.
• 단일 책임 원칙(Single Responsibility Principle) : 함수 하나가 하나의 기능만 담당하도록 설계하는 객체 지향 프로그래밍의 디자인 패턴
  • 단일 책임 원칙 - 위키백과, 우리 모두의 백과사전

단일 책임 원칙 - 위키백과, 우리 모두의 백과사전

• v-on:은 @으로, v-bind:는 :로 줄일 수 있다.
• v-for 디렉이브에서 index는 기본적으로 제공하는 변수이다. v-for 디렉티브로 반복한 요소는 모두 뷰에서 내부적으로 인덱스를 부여한다.
• ★ $emit() API 형식과 전달 인자의 규칙
  • 하위 컴포넌트에서 이벤트를 발생시켜 상위 컴포넌트로 신호를 보낼 때 $emit()을 사용한다. 기본 형식은 $emit('이벤트 이름') 이지만 $emit('이벤트 이름', 인자1, 인자2, 인자3, ...)과 같은 형식으로 하위 컴포넌트의 특정 데이터를 전달할 수 있다.
  • 다만 전달받은 인자 값은 상위 컴포넌트에서 참고용으로만 활용하고 데이터 값은 변경하지 말아야 한다. 컴포넌트는 각자 고유한 유효 범위를 갖기 때문에 상위 컴포넌트에서 전달받은 인자 값을 갱신하더라도 하위 컴포넌트에는 반영되지 않는다. (컴포넌트의 독립적인 유효범위)
  • 따라서 데이터 변경이 필요하다면 상위 컴포넌트의 data 속성 값을 직접 변경하는 것이 좋다.
• 뷰 애니메이션 : 뷰 프레임워크 자체에서 지원하는 애니메이션 기능. fade in, fade out 등의 여러 가지 애니메이션 효과를 지원한다. 간단한 데이터부터 목록 아이템까지 모두 지원할 뿐만 아니라 기타 자바스크립트 애니메이션 라이브러리나 CSS 애니메이션 라이브러리도 같이 사용할 수 있다.
• <transition-group> 태그는 목록에 애니메이션을 추가할 때 사용되는 태그이며, tag 속성에 애니메이션이 들어갈 HTML 태그 이름(p, ul, section 등)을 지정한다. name 속성은 추가할 CSS 클래스와 연관된다. 추가되는 CSS 속성 클래스는 설정한 name 속성 값을 접두사로 갖는다. 이러한 클래스 규칙과 체계는 뷰 프레임워크 내부적으로 정의되어 있다.