[Udemy Vue 완벽가이드 Section7] 81. 생성된 프로젝트 검사하기

vue create 명령어를 통해 생성된 프로젝트를 보면, 폴더에 여러 파일과 하위 폴더가 보인다.

 

프로젝트 폴더의 루트 레벨에는 여러 개의 구성 파일이 있다.

현재 .browserslistrc, .eslintrc.js, .gitignore 등은 신경쓰지 않아도 된다. 정확하게 알지 않으면, 기본 설정 그대로 두자.

 

# package.json파일

 

1/ scripts

- npm run serve와 같은 명령어로 실행할 스크립트를 정의한다. 개발서버를 가동하기 위해 npm run serve를 썼다.

- 해당 script들을 보면, 내부적으로 Vue CLI로부터 가져온 뭔가를 사용한다는 걸 알 수 있다. ex: "vue-cli-service serve"

 

2/ dependencies

- 의존성으로 쓰인 프레임워크, 코드에 사용할 수 있는 패키지들.

- 패키지란, 불러오면 자동으로 코드에 추가되는 것을 말한다. 그래서 패키지를 사용하기 위해 아래와 같이 HTML 파일에 스크립트 태그를 추가(CDN 가져오기)할 필요가 없다.

<script src="https://unpkg.com/vue@next"></script>

 

3/ devDependencies

- 이것도 패키지들. but, 우리가 설정한 프로젝트가 자체적으로 내부에서 사용할 패키지들.

 

 

** dependencies와 devDependencies의 차이점 ↓

2023.08.17 - [분류 전체보기] - dependencies와 devDependencies의 차이점

dependencies와 devDependencies의 차이점

 

 

#node_modules 폴더

- package.json 파일에서 dependencies, devDependencies에 언급한 패키지들이 있다. 즉, dependencies, devDependencies를 통해 필요한 패키지를 지정했다.

- Node.js와 함께 설치된 npm은 프로젝트 파일에 해당 패키지들을 다운로드 한다. 그리고 그 패키지들을 node_modules 폴더에 저장한다.

- 특정 명령어로 이 작업을 처리할 수 있다. → npm install

- npm install을 실행하면 npm이 package.json 파일을 확인하고, 모든 의존성(dependencies, devDependencies)들을 node_modules 폴더에 다운로드하게 만들어 이 패키지들을 사용할 수 있게 된다.

 

- 프로젝트를 생성할 때, vue create 명령어가 이미 npm install 과정까지 다 해줘서 지금 당장은 필요하지 않다.

- npm install 과정이 끝나면 다시 npm run serve 명령어를 통해 개발 서버를 재가동할 수 있다. (참고로 서버는 항상 가동되게 해야한다. 항상 해당 프로세스가 실행되도록 해야한다. 왜냐하면 서버가 실행중일 때만 앱을 테스트 할 수 있으므로. 작업이 끝나면 ctrl + c 를 이용해 서버를 종료한다.)

 

- npm install은 프로젝트를 node_modules 폴더 없이 공유할 때 필요한 명령어.

- 모든 패키지(dependencies, devDependencies)를 사용하기 위해서는 npm install을 실행해야한다.

- node_modules 폴더에는 모든 dependencies가 있다. vue 프레임워크도 있고, dependencies의 dependencies도 있다. 그래서 폴더의 크기가 크다.

- node_modules 폴더는 이대로 두어야 한다. 안에 작성된 코드를 수정하지도, 지우지도 말아야 한다.

 

 

# public 폴더

- 이 폴더에는 HTML 파일이 있다.

- 그 HTML 파일에는 id='app'이 있는 div태그가 있다. Vue앱을 이 부분에 mount한다.

<div id="app"></div>

 

- HTML 파일이 하나밖에 없다. Vue의 싱글페이지 애플리케이션을 만들기 때문.

- 즉, 화면에서 보이는 모든 요소는 Vue와 JS로 제어한다는 뜻이다.

- 우린 단일 HTML 파일에 Vue를 이용해 다양한 요소를 화면에 적용한다.

- 모든 import문을 비롯해 모든 항목을 Vue CLI와 개발서버를 통해 자동으로 관리할거다. 그러니 당장은 HTML 파일을 편집할 필요가 없다. 대신 src 폴더가 있다.

 

 

 

# src 폴더

- 이 폴더에는 우리가 작성할 JS 코드(Vue 코드)가 들어간다.

 

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.