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 강의 마무리

• 문제풀이!

• 코드 리팩토링 마무리 및 리뷰해주기