HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
💌
JJong’s Archive/
🏞️
Vue/
Node.js와 Vue 프로젝트 시작하기

Node.js와 Vue 프로젝트 시작하기

Select
Nov 24, 2023

JS가 동작할 수 있는 곳

  1. 웹브라우저
  1. 로컬 ⇒ NodeJS을 설치해서 실현
  • Node.js : JS런타임, 즉 JS가 로컬에서 동작할 수 있는 환경
    • npm(패키지 관리), npx(패키지 실행) 등을 사용할 수 있음
    • npx: 패키지를 로컬에 설치(npm install)하는 것 대신에, 메모리상에서 일시적으로 설치해서 실행
 

노드 버전 관리

  • node.js 홈페이지에서 node.js를 다운받을 수 있지만 다운받은 그 버전만 계속 쓸 수 있음
  • (Node Version Manager) : 노드버전을 자유롭게 바꿀 수 있게 함
    • but. node.js에서 다운받지 않았을 경우에만 사용 가능
    • curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash 로 nvm 설치
    • nvm ls ⇒ 가능 버전 리스트
    • nvm use 버전 ⇒ 특정 버전으로 바꿀 수 있음
  • : “node.js를 이미 설치한 환경”에서 node 버전을 자유롭게 바꿀 수 있게 함
    • npm install -g n
      • npm : node.js 설치 시 같이 설치 되는 패키지 매니저
        • 참고) yarn은 npm과 유사한 패키지 매니저이다. npm과 거의 동일하다고 보면 됨
      • install 대신에 i, add로 대체 가능 ↔ uninstall, un
      • -g : global, 이제 n이라고만 해도 바로 명령어 사용 가능
    • n 버전 : node.js 설치
    • n : 설치한 node.js 버전들 중 골라서 바꿀 수 있음
      •  

vue 프로젝트 만들기

  • 이 때까지는 cdn을 통해서 원격에서 vue.js를 가져왔다면, 이제는 vue를 로컬에 설치해서 사용할 것이다!
  1. npm init : 프로젝트(=패키지) 초기화
      • npm init -y : 여러 세부사항을 정하지 않고 바로 프로젝트 생성
      • package.json에서 세부사항을 수정할 수 있다
  1. npm install vue ⇒ 최신 vue 패키지 설치
      • 버전은 npm info 패키지로 확인 가능
        • npm install 패키지@버전으로 특정 버전으로 다운받을 수 있음
      • package.json에 dependencies(일반 의존성)로 vue가 추가됨
        • node_modules에 vue를 포함한 dependencies에 있는 패키지들이 추가됨
        • package.json은 패키지마다 있으므로.. node_modules는 매우 많은 양의 파일들이 있다
      • /package.json ⇒ “main”은 외부에서 패키지를 접근할 때(ex. npm으로 패키지 설치) 진입점을 말하는데, 일반적인 웹 프로젝트에서는 vue패키지의 main을 사용하므로, 의미가 없음 ⇒ 지워도 무방
       

serve 패키지 설치하기(일반 js 실행)

  • npm i serve -D ⇒ npx로 빠른 실행 말고, serve 패키지를 로컬에 설치! (규모가 큰 프로젝트를 위함)
    • serve : 개발 서버에서 정적 사이트를 실행하는 패키지
    • -D : 해당 패키지를 개발할 때만 쓰겠다고 선언(== —save-dev)
      • ⇒ devDependencies(개발 의존성)에 serve가 추가됨
  • 전역 설치(-g)를 하지 않았기 때문에, 명령어를 등록해줘야 실행할 수 있다
    • package.json의 scripts에서 명령어를 추가해 쓸 수 있다
    • npm run 명령어로 실행
  • index.html이 항상 root 폴더에 있어야 한다..
 

Caret Ranges와 package-lock.json

  • Caret Ranges(^)
    • 해당 패키지가 설치될 때, 명시된 버전에서 메이저 버전이 같은 항상 최신 버전을 설치함
    • ex. ^1.0.0 == 1.0.0 ~ 1.9.9
    • 이 때문에 프로젝트를 이용하는 로컬마다 패키지가 다르게 설치될 수 있다
        • ⇒ package-lock.json로 해결!
  • package-lock.json
    • 프로젝트의 node_modules나 package.json이 수정되는 경우 생성되거나 업데이트 됨
    • 파일이 생성되는 시점의 의존성 트리에 대한 정확한 정보를 가지고 있음
    • 즉, 맨 처음 생성됐을 때 설치된 버전이 명시되어 있어서 항상 그 버전이 설치되어서 버전이 달라 생길 수 있는 에러를 방지.
    • node_modules가 없어도 의존성 패키지가 설치될 수 있게 해서, 언제나 node_modules가 생성
      •  

.gitignore

  • node_modules가 없을 때 package-lock.json와 package.json만 있으면 npm install로 다시 생성 가능
      • 그래서, git에 node_modules를 업로드 하지 않아도 된다 ⇒ .gitignore에 명시
  • .gitignore : git에 업로드 하지 않을 파일이나 폴더를 명시
  • .gitignore에 명시하면 좋을 파일들
      1. node_modules/
      1. .vscode/ (⇒ 마지막에 연 탭, 터미널 등 vscode 정보를 담고 있음)
      1. .DS_Store/ (Mac일 때만)
node_modules/
.vscode/ 
.DS_Store/
.gitignore