[Vue] Project 구조

오늘 처음으로 Vue Project를 생성해보았다. npm install이 안되서 정말 애먹었지만 일단 마무리는 할 수 있었다.

Vue project생성하는 cli 명령어들은 노션에 정리를 해두었고 블로그에서는 project 구조에 대해서 정리해볼까 한다.

 

Vue Project를 생성하면 프로젝트에 필요한 여러가지 파일 및 폴더들을 자동으로 생성해준다.

하지만 막상 열어보니 어느 파일에서부터 시작하는지 어떻게 연결이 되어있는 건지 알기가 어려워서 검색을 통해 알아보았고 순서 및 부연 설명들은 아래에서 볼 수 있다.

 

1. index.html

제일 먼저 index.html에서 시작한다.

index.html 에 있는 <div id="app"></div>는 root dom node로 이 노드 안에 오는 모든 것들이 vue에 의해 관리가 된다.

root dome node는 main.js 로 연결되는 것을 컨트롤한다.

index.html

• index.html 기준으로 SPA 이 구동된다.
• 내가 본 유튜브 영상에서는 index.html에 코드를 추가하지 않는다고 했다. head는 그래도 추가를 할 수 있기는 하지만 body는 안된다고 했는데 오늘 수업에서 부트스트랩 cdn을 body에 넣었다! cdn은 괜찮은 걸까

 

2. main.js

main.js 에서는 creaateApp함수를 실행시켜서 새로운 어플리케이션 인스턴스를 생성한다. (이 함수는 vue library에서 import된 함수이다. 컨트롤을 누르고 클릭을 해보면 모듈로 들어가지는 것을 확인할 수 있다.)

그리고 createApp function을 실행시킨 후 앱 컴포넌트를 id가 "app"인 dom node로 mount시킨다.

 

createApp에 전달된 옵션은 루트 컴포넌트를 구성하는데 사용된다. 이 컴포넌트는 어플리케이션을 mount할 때, 렌더링의 시작점으로 사용된다.

 

import App from './App.vue' 를 보면 App.vue 파일을 main.js 에 import 한뒤, index.html 에서 사용한 id 와 함께

vue 에서 제공하는 함수의 인자로 넘겨, index.html 의 div 속(root dom node)으로 집어넣는것이다.

 

3. App.vue

.vue 파일 중 가장 최상위 파일이다. 다른 .vue 파일들을 import 해가며 레고처럼 조립해가게된다.

App.vue 파일은 .vue인 다른 파일들처럼 하나의 컴포넌트이고, 여기에 contents폴더에 있는 여러 컴포넌트들을 import해와서 main.js로 넘겨주는 통합 컴포넌트이다.

 

 

출처 및 참고

https://leestrument.tistory.com/entry/Vuejs-Hello-World-%EC%B6%9C%EB%A0%A5%ED%95%98%EA%B8%B0

https://www.youtube.com/watch?v=B1e7grp2svY