# 20210419(월)

## 2021-04-19

### 1. 학습 날짜

* 2021-04-19

### 2. 학습 시간

* 14:00 \~ 19:00

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

* vue 기본 사용법에 익숙해지기

### 4. 학습 목표

* 학습했던 vue 를 머리속으로만 이해하는게 아닌 손으로도 숙달

### 5. 학습 정리

* x

### 6. 상세 학습 내용

* Vue-cli 를 이용해서 기존 강의를 들으면서 만들었던 프로젝트를 다시 만들어봤다.
* 일단... 처음에 vue 프로젝트를 만드는거부터 삐걱거렸다;;;
* vue 프로젝트를 만들기 위해서는 `vue create name` 으로 만들면 된다.
* 처음에 가장 헷갈렸던게 컴포넌트를 만들고 이를 root 컴포넌트에 넣는 과정이었다.
* 이 부분을 다시 복기 해보면 vue-cli 명령어로 만들어진 프로젝트로 가보면 main.js 파일이 있다.
* 이 파일에서 전체 컴포넌트의 root 가 되는 컴포넌트를 만든다. 그리고 해당 컴포넌트를 app 이라는 html의 dom과 연결한다.
* 그리고 이 js 파일들은 webpack 으로 감싸지게 된다. 이 부분은 나중에 더 학습하도록한다.
* 어쨋든 이렇게 main.js 에서는 App.vue 파일을 렌더링 하게 된다. 이 부분도 나중에 따로 학습이 필요해 보인다.
* 이제 App.vue 파일을 본다. 이 파일은 파일의 형식이 좀 이상하다. vue 라는 파일 형식은 또 뭐야.. 이렇게 생각할 수도 있지만 이 파일형식은 `싱글 파일 컴포넌트` 라고 부른다. 간단하게 말하면 이 파일 하나가 컴포넌트 하나가 되고 이 하나의 컴포넌트는 자신이 가질 수 있는 index, css, javascript 모두를 가진다. 물론 상위 컴포넌트으 css 파일 또는 외부의 css 파일을 가져올 수도 있다.
* App.vue 라는 컴포넌트를 이용해서 이 내부에 하위 컨포넌트를 하나씩 만들면 된다.  

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

* 한심하다... 

### 8. 다음 학습 계획

* vue 의 store 공부