[Udemy Vue 완벽가이드 Section7] 85. 새로운 Vue 프로젝트

Vue CLI로 만들어진 프로젝트가 하나 있다.

 

코드 작성을 시작하기 위해서는 두 가지 작업을 먼저 해야한다.

 

1/ 이 프로젝트에 대한 모든 의존성(dependencies)을 설치해야한다.

- package.json파일에 dependencies, devDependencies에 적혀있는 의존성.

- 이 프로젝트에는 node_modules 폴더가 없다. 파일크기가 너무 크기 때문에 zip 파일에 추가하면 파일 크기가 수백 MB에 이른다. 크기도 크고, 사실 따로 다운로드를 할 필요도 없다. 왜냐하면 npm install 명령어로 자체적으로 의존성을 설치하면 되므로.

 

Terminal 탭 > New Terminal을 누르면, VSC 창 일부분에 기본 시스템 터미널이 열린다.

- 장점 : 다른 화면으로 이동할 필요가 없다.

이미 프로젝트 폴더로 이동했기 때문에, cd 명령어를 사용해서 특정 폴더로 이동하지 않아도 된다. 이미 터미널이 프로젝트 폴더로 이동시켰다.

 

이 프로젝트에 필요한 모든 의존성을 설치하기 위해 터미널에서 npm install 명령어를 친다.

npm install

그러면 필요한 의존성이 모두 다운로드 된다. (의존성에 달린 의존성까지 다운로드 된다.)

node_modules 폴더가 생성되고, 해당 폴더에 모든 의존성이 저장된다.

 

 

2/ 이제 개발 서버를 실행할 준비가 되었다. 개발서버를 실행해보자.

npm run serve

 

이제 개발서버가 가동된다. 우리가 코드를 작성하는 동안 서버가 계속 가동해야한다.

서버가 계속 가동되면 모든 변경사항을 감지하고, 서브 페이지에서 이를 확인할 수 있다. 우리가 내용을 변경할 때 마다 서브 페이지는 자동으로 새로고침한다.

** 서브 페이지 : 웹 서버를 통해 제공되는 웹페이지. 클라이언트 웹 브라우저로부터 요청이 들어올 때 웹 서버가 해당 페이지의 내용을 생성하거나 전달하여 사용자에게 보여주는 과정.

 

이제 localhost:8080으로 이동하자.

실행중인 우리 Vue 애플리케이션은 현재 비어있다. 아직 Vue앱이 완전히 비어있으므로.

 

 

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