> For the complete documentation index, see [llms.txt](https://simian114.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://simian114.gitbook.io/blog/undefined-1/diary/2021/april/20210412.md).

# 20210412(월)

## 2021-04-12

### 1. 학습 날짜

* 2021-04-12

### 2. 학습 시간

* 10:00 \~ 23:00

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

* vue js 학습

### 4. 학습 목표

* vue 강의 듣기

### 5. 학습 정리

* x

### 6. 상세 학습 내용

* vue js 를 이용해서 간단한 todo 앱을 만들었다.
* 그제까지 해서 바닐라JS 를 이용해서 todo 앱을 만들어서인지 프레임워크의 강력함을 아주 절실히 느낄 수 있었던거 같다.
* 먼저 이전에 백본JS 로 앱을 구현했을 때는 view 를 나눠서 구현했었는데, vue 에서는 컴포넌트 단위로 나눠서 구현을 한다.
* 뷰에서 컴포넌트라는건 하나의 태그를 의미한다. 그리고 이 컴포넌트에는 반드시 루트 태그가 한개가 있어야한다. 이제 이 루트 태그 아래에 여러 개의 다른 하위 ㅓㅁ포넌트를 만들 수 있게된다.
* 따라서 이런 컴포넌트 단위로 todo 를 나눠보면
* todoApp
  * todoHeader
  * todoInput
  * todoList
  * todoFooter
* 와 같은 구조를 갖게 된다.
* 오늘 학습한 설계 방법중에 **하위 컴포넌트는 보여주는 부분을 담당하고 실제 데이터 연산의 처리는 부모컴포넌트에서 하는 방법을 학습했다.**
* 이게 무슨말이냐면, 현재 todoApp 이라는 부모컴포넌트가 있는데, 실제 이벤트와 마크업등을 하위 컴포넌트들에서 감지하면 이 감지한걸 본인이 처리하는게 아니라 부모 컴포넌트로 넘기고 부모컴포넌트는 올라온 데이터를 처리하고 그걸 props 기능을 이용해서 자식들한테 넘기게 하는것.

### 7. 오늘 학습 내용에 대한 개인적인 총평

* 프레임워크란 정말 대단하다... 아주 손쉽게 무언가를 만들어 낼 수 있게 된거 같다.
* 다만 아직도 html ,css 가 부족하다는게 뼈저리게 느껴진다. 확실히 학습을 하자.

### 8. 다음 학습 계획

* vue 강의 듣기