2021 10 17

내가 쓴 Vue 기술¶

참고: https://vuejs.org/v2/guide/
Components - 컴포넌트를 통한 추상화가 Large-Scale 어플리케이션을 만들 수 있도록 도와줌 - 뷰에서 컴포넌트: Vue instance with pre-defined options

Vue Instance - var vm = new Vue({}) 를 통해 Vue instance 생성가능 - Vue 어플리케이션은 new Vue()로 생성된 Root Vue Instance 포함하여, 재사용 가능한 트리 구조를 띔
```
Root Instance
└─ TodoList
   ├─ TodoItem
   │  ├─ TodoButtonDelete
   │  └─ TodoButtonEdit
   └─ TodoListFooter
      ├─ TodosButtonClear
      └─ TodoListStatistics
```
- Data, Method 등 쓸 수 있음 - Instance의 Lifecycle Hook - 각각의 vue 인스턴스는 일련의 initialization step으로 생성되게 됨 - 데이터 관찰, 템플릿 컴파일, DOM에 연결, DOM 업데이트 등의 과정을 거치게 됨 - Vue는 lifecycle hook에서 function을 제공해 사용자로부터 특정 단계에서 특정 코드를 실행시킬 수 있도록 지원함 -
- 순서대로 한번 따라가 보자면... 1. new Vue() 2. Events와 LifeCycle Init 3. beforeCreate 코드 실행 4. Injection과 Reactivity Init 5. created 코드 실행 6. <template></template> 와 같은 코드 있다면 컴파일을 하는듯 7. beforeMount 코드 실행 8. el 관련 코드가 있다면 뭐 하는 듯 9. mounted 코드 실행 - 재렌더링시 beforeUpdate, updated 코드 실행 10. vm.$destroy로 소멸 타임 11. beforeDestroy 코드 실행 12. destroyed 코드 실행

Props - 부모로 부터 데이터를 넘겨받아서 자식 컴포넌트에서 사용
```
props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}
```
- 만약 잘못해서 넘겨줬다면 브라우저 측에서 wrong type 던져줬다고 뭐라할 것임 - 부모 -> 자식 간의 단방향 바인딩 형성 - 자식 요소에서 부모의 상태 변경할 수 없음 - Custom Event를 통해 넘겨주자 - 참고로 이벤트 이름에는 케밥 케이스를 활용할 것 (kebab-case)

Vuex - 참고: https://vuex.vuejs.org/kr/ - 개요 - vue.js의 상태 관리 패턴 + 라이브러리 - 어플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할 - 예측 가능한 방식으로 상태 변경하도록 지원 - 공통의 상태 공유하는 여러 컴포넌트들 - 같은 상태에 의존하는 여려 뷰 - props 장황해지고, 형제 뷰는 그마저도 동작 X - 아이디어 1. 어플리케이션의 상태를 중앙 집중된 저장소인 store.js에 몰아 넣자 2. 해당 상태를 변화시킬 수 있는 유일한 방법은 mutation 내의 코드를 커밋 시키는 것 3. 비동기식 로직은 action 내에서!

Build - npm run build를 통해 dist 폴더에 정적 리소스(html/css/js) 등이 생성 - 배포하려는 곳에 해당 내용물을 올려주자!