npm으로 프로젝트 만들기

지금까지는 스크립트를 직접 불러왔지만, 다음과 같은 이유로 npm을 사용하여 프로젝트를 구성합니다.

패키지 간의 의존성 관리

쉽고 빠른 개발 환경 구성

스크립트 서버가 다운되는 경우 문제가 생길 수 있지만, npm은 로컬에 저장하여 이러한 문제가 발생하지 않습니다.

이번 글에서는 npm을 사용하여 프로젝트를 구성하는 방법에 대해 자세히 설명하겠습니다.

Node.js

우선 npm을 설치하려면 Node.js를 설치해줘야합니다.

Node.js는 브라우저가 아닌 환경에서도 JavaScript를 실행할 수 있도록 해 줍니다. 이를 통해 JavaScript로 서버를 구현하는 등 다양한 프로그램을 만들 수 있습니다. 이렇게 만들어진 프로그램들은 Node Package Manager(npm)을 통해 쉽게 설치하고 관리할 수 있습니다.

설치하기

Node.js는 현재(23년 5월 12일 기준) 18.16이 최신 안정버전입니다. 공식 홈페이지에 들어가서 설치해주세요! 하지만 지금 이 글을 보실 때엔 다른 버전이 있을 수 있습니다. 이 경우 https://nodejs.org/dist/v18.16.0/ 에 접속해서 다운로드 하시면 됩니다.

계속 누르다보면 설치가 잘 되니 어렵지 않으실겁니다.

설치 확인해보기

만약 설치가 완료되었다면 VSCode에서 터미널 - 새 터미널을 클릭해 터미널을 열어주세요.

하단에 터미널이 열릴 겁니다. 그곳에 node -v 와 npm -v 띄어쓰기 주의해서 각각 입력해주세요. 이 때 버전이 동일한지 확인하시면 됩니다.

Node.js : v.18.16.0

npm : 9.5.1

Vue Project 만들기

이제 프로젝트를 만들 폴더에 이동합시다. 혹시 명령어를 모르신다면 다음 세 가지를 잘 활용하면 됩니다.

pwd : 현재 폴더의 위치를 알려줍니다.

ls : 현재 폴더 안의 내용물을 알려줍니다.

cd : 해당 폴더로 이동합니다. (cd .. 는 뒤로가기)

예를 들어 맥 기준으로 바탕화면으로 이동하는 방법은 cd ~/Desktop 입니다.

      명령어를 잘 모르신다면 VSCode에서 폴더를 먼저 열어준 다음 터미널을 열어보세요. 터미널에서 자동으로 해당 위치로 이동합니다.

그리고 다음 명령어를 적어 Vue 프로젝트를 생성합니다.

bash

      npm init vue@3

만약에 처음 실행하는 것이라면 create-vue 라이브러리가 없기 때문에 설치해야한다는 안내가 나타날 겁니다. 엔터를 눌러주세요.

설치가 자동으로 되고 이제 본격적으로 프로젝트를 만들겁니다. 우리는 블로그를 만들 예정이니 blog라고 이름을 짓겠습니다.

이후 몇 가지 선택지가 나옵니다. 키보드 좌우키로 움직이시면 되지만 다 No이기 때문에 엔터만 눌러주세요

타입스크립트 추가? … No

JSX 지원 추가? … No

Vue Router 추가? … No

Pinia 추가? … No

Vitest 추가? … No

End-to-End 테스트 추가? … No

ESLint 추가? … No

그러면 프로젝트 뼈대를 만든다고한 뒤 완료되었다고 하면서 다음 명령어를 실행해보라고합니다.

cd vue-project: 우리가 만든 프로젝트 폴더로 이동하기

npm install: 필요한 패키지 설치하기

npm run dev: 개발 서버 실행하기

그 전에 우선 blog 폴더를 VSCode에서 열어주세요.

그러면 해당 폴더가 나타납니다.

그리고 터미널을 다시 열어 npm install 명령어를 실행해주세요.

그러면 Vue를 실행하기 위한 모듈을 설치해서 node_modules 폴더가 나타나고 패키지 의존성을 관리하는 파일 package-lock.json이 나타납니다.

이것들이 무엇인지 지금은 굳이 자세히 알 필요는 없습니다.

npm run dev를 실행하니 어떤 주소를 보여줍니다.

개발 서버가 실행된 것입니다! 이제 Live Server는 필요없습니다!. 크롬을 열어 http://localhost:5173 에 접속해봅시다.

열어보니 예제 사이트가 하나 나오네요!

      만약 개발 서버를 종료하시려면 터미널을 닫거나 터미널에서 Ctrl + c 키를 누르시면 됩니다.

프로젝트 구조

시작하기 전에 간단하게 프로젝트 구조가 어떤 식으로 이루어져있는지 살펴보겠습니다. 이해가 되지 않으셔도 상관없습니다.

.vscode: 이 폴더 내에서만 사용할 vscode 설정들이 들어있습니다.

node_modules: npm install 로 설치된 패키지 내용이 들어있습니다.

public: 이미지, css, js 파일 등이 들어가는 폴더

src/assets: 이미지, css, js 파일 등이 들어가는 폴더. public과 다른 점은 빌드하면서 이름이나 내용이 바뀝니다.

src/components : 컴포넌트들이 들어가는 폴더

src/App.vue : 최상위 컴포넌트

src/main.js : Vue 인스턴스 생성 및 설정들이 들어갑니다.

.gitignore: git에서 무시할 파일 설정

index.html: 기본 HTML. 여기서 Vue를 불러옵니다.

package-lock.json, pacakage.json : npm이 설치한 모듈들을 관리하는 파일

README.md: 프로젝트에 대한 설명을 적는 메모장입니다.

vite.config.js : vite의 설정이 들어있습니다.

패키지, 설정 파일들을 제외하면 이전에 만들었던 프로젝트와 크게 다르지 않습니다.

다만 다른 점들은 컴포넌트 파일들이 .vue 확장자로 바뀌었다는 점이죠. 컴포넌트를 훨씬 편하게 구현할 수 있게 되는데요. 이에 대해 다음 글에서 자세히 다뤄보겠습니다!