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 공부