# 20210413(화)

## 2021-04-13

### 1. 학습 날짜

* 2021-04-13

### 2. 학습 시간

* 10:00 \~ 02:00

### 3. 학습 범위 및 주제

* vue js 학습
* todo 앱 수정

### 4. 학습 목표

* vue 강의 듣기
* todo 앱 리뷰 & 수정

### 5. 학습 정리

* x

### 6. 상세 학습 내용

* `v-for` 에 `v-bind:key` 를 왜 해줘야할까?
  * 일단 이 `v-bind:key` 는 무조건 해야하는건 아니다. 다만 사용을 권하는 부분이다. 따라서 eslint 같은 툴을 사용하면 key 를 사용하지 않으면 에러를 발생시킨다.
  * 그렇다면 key 가 왜 있어야하는걸까?
  * `v-for` 에 사용하는 리스트가 있을 때 데이터가 추가 되거나 삭제되면 뷰는 갖고 있는 특징인 **리액티비티** 덕분에 화면이 렌더링 될 것이다.
  * 여기서 이제 key가 중요해지는데, 삭제하거나 추가하는 데이터의 위치를 만약 우리가 알지 못한다면 전체 DOM 을 삭제하고 다시 렌더링을 하는 비효율이 발생하게 될 것이다.
  * 즉 key는 그 리스트의 위치를 나타내는 정보라고 할 수 있다.
  * 따라서 이 값은 중복이 되면 안된다.(중복이 되도 에러는 발생하지 않는다. 다만 렌더링 과정에 문제가 생겨서 key값을 사용하지 않느니만 못하게 된다)
  * 일반적으로 index 또는 id 값으로 key값을 초기화 시킨다.
* vue의 상태관리 라이브러리 vuex
  * vuex는 상태관리 라이브러리다. 상태관리 라이브러리의 단어적인 측면으로 이해하기 전에 예시를 들어보자.
    * 우리가 만든 todo 앱이 있다. 그리고 이 todo 앱에서 `todoItems` 의 데이터는 `todoApp` 이라는 `root` 컴포넌트에 존재한다.
    * 그리고 이 `todoItems` 를 실질적으로 화면에 뿌리는건 `todoList` 컴포넌트에서 한다.
    * 또한 새로운 `todo` 아이템에 대한 정보를 받아오는건 `todoInput` 에서 한다.
    * 자 이렇게만 말해도 벌써 머리가 아프다. 고작 1계층으로 이루어진 구조인데도...
    * input 으로 들어온 데이터는 `emit`으로 이벤트를 발생시켜 상위 컴포넌트에 데이터를 전송해야하고
    * 상위 컴포넌트는 데이터를 처리한 다음에 `props` 를 이용해서 하위로 넘기고......
    * 하위는 받은 데이터를 프레젠트하고.......
    * 즉 와리가리가 너무 많아진다!!!
  * 이런 와리가리를 해결하기 위해 `vuex` 가 등장한다.
  * 일단 이 vuex 는 `react` 의 `flux` 의 장점을 많이 본따왔다고 한다.
  * 이야기가 너무 길어지니 본론만 말하면, 상태를 전역변수로 사용한다고 생각하면된다.
  * 하지만 일반적인 전역변수가 아닌 깃 처럼 `commit` 단위로 추적이 되는 전역변수다.
  * 뷰의 리액티비티 기능, commit 기능으로 인한 추적 기능으로 디버깅성이 올라가고 전역변수 처럼 사용할 수 있다는 점으로 인해 데이터의 흐름이 단순해진다.
  * 덕분에 코드 작성도 편해질뿐더라 개발 시간 자체가 많이 줄어들 수 있게 된다.
* todo 앱 리뷰 및 리팩토링
  * 일단 내 코드는 너무 분리? 가 잘 되어있지 않다.
  * 따라서 너무 보기가 힘들다...
  * 일단 오늘 리팩토링 진행한 부분에는
  * `document.quertSelector` 을 `$` 로 매핑시켰다.
  * `switch` 문 보다는 `obj literal`이 좋다는 피드백을 듣고 해당 방법으로 수정했다.

    **7. 오늘 학습 내용에 대한 개인적인 총평**
* 후,.. 다른 분들의 코드를 보니 확실히 나는 아직 멀었다는 생각이 든다... 열심히 해야겠다.

### 8. 다음 학습 계획

* vue 강의 마무리
* 문제풀이!
* 코드 리팩토링 마무리 및 리뷰해주기