Binyard

Appearance

React를 위한 Node.js ​

🧩

  • nvm: Node.js 버전을 관리하는 도구
  • npm: 패키지를 설치하고 의존성을 관리하는 도구
  • npx: 패키지를 일회성으로 실행할 때 사용
  • package.json: 프로젝트 정보와 실행 명령어, 의존성을 관리하는 파일
  • node_modules: 설치된 패키지가 저장되는 폴더
  • package-lock.json: 실제 설치된 패키지 버전을 고정하는 파일

Node.js란 ​

Node.js는 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 런타임이다.

React 코드는 최종적으로 브라우저에서 실행되지만, 개발 과정에서 사용하는 Vite, npm, 빌드 도구, 테스트 도구 등이 Node.js 환경 위에서 동작하기 때문에 React 개발을 위해 Node.js가 필요하다.


📟 주요 명령어 ​

bash
# Node 버전 확인
$ node -v

# Node.js 인터프리터 실행 (REPL 환경)
$ node

# 자바스크립트 파일 실행
$ node 파일명.js
  • node 이 명령어를 터미널에 입력하면 Node.js가 인터프리터 모드로 들어간다.
  • 이 환경을 REPL(Read–Eval–Print–Loop)이라고 부르며,
    JavaScript 코드를 한 줄씩 입력하고 실행 결과를 바로 확인할 수 있다.
    크롬 브라우저 개발자 도구의 Console 탭과 비슷하게 사용할 수 있다.

nvm (Node.js Version Manager) ​

nvm은 Node.js의 여러 버전을 쉽게 설치하고 변경할 수 있도록 도와주는 버전 관리 도구이다.

Node.js는 버전이 자주 업데이트되고, 프로젝트마다 요구하는 Node 버전이 다를 수 있다.
이때 nvm을 사용하면 프로젝트에 맞는 Node 버전을 선택해서 사용할 수 있다.


🗝️ nvm의 장점 ​

  • 프로젝트마다 다른 Node.js 버전 설정 가능
  • 기존 프로젝트에 영향을 주지 않고 새로운 버전 설치 가능
  • 팀원들과의 개발 환경을 맞추기 쉬움

📟 주요 명령어 ​

bash
# nvm 버전 확인
$ nvm --version

# 설치 가능한 Node.js 버전 목록 확인
$ nvm ls-remote

# 특정 버전 설치
$ nvm install 00.00.0

# 설치된 Node 버전 목록 확인
$ nvm ls

# 사용할 Node 버전 변경
$ nvm use 00.00.0

# 현재 사용 중인 node 버전 확인
$ node -v

💡 LTS(Long Term Support)
장기 지원 버전을 의미하며, 안정적으로 사용할 수 있는 Node.js 버전이다.
새 프로젝트를 시작할 때는 보통 LTS 버전 사용을 권장한다.


npm (Node Package Manager) ​

npm은 Node.js와 함께 설치되는 패키지 관리자이다.
React, Vite, Tailwind CSS, Axios 같은 외부 라이브러리를 설치하거나 프로젝트의 의존성을 관리할 때 사용한다.


📦 JavaScript 패키지란? ​

JavaScript 패키지는 재사용 가능한 코드 묶음이다.
npm에 등록된 패키지는 프로젝트에서 설치해서 사용할 수 있으며, 설치된 패키지 정보는 보통 package.json 파일을 통해 관리된다.


📟 주요 명령어 ​

bash
# npm 버전 확인
$ npm -v

# package.json 생성
$ npm init

# package.json 기본값으로 생성
$ npm init -y

# 패키지 설치
$ npm install 패키지명

# 개발 의존성으로 패키지 설치
$ npm install -D 패키지명

# 패키지 제거
$ npm uninstall 패키지명

# 최신 버전으로 업데이트
$ npm update

💡 로컬 설치 vs 전역 설치 ​

구분설명예시
로컬 설치프로젝트 내부에 설치, node_modules 폴더에 위치React, Tailwind 등
전역 설치모든 프로젝트에서 CLI 명령어처럼 사용일부 CLI 도구

📄 package.json ​

package.json은 프로젝트의 기본 정보와 의존성, 실행 명령어를 관리하는 파일이다.

json
{
  "name": "react-app",
  "version": "1.0.0",
  "scripts": {
    // 터미널에서 실행할 명령어 모음
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    // 실제 서비스 실행에 필요한 패키지
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    // 개발할 때만 필요한 패키지
    "vite": "^6.0.0"
  }
}

📁 node_modules란? ​

node_modules는 npm으로 설치한 패키지들이 저장되는 폴더이다.

bash
$ npm install

위 명령어를 실행하면 package.json에 적힌 의존성을 기준으로 필요한 패키지들이 node_modules 폴더에 설치된다. 이 폴더는 용량이 크기 때문에 보통 Git에 올리지 않고 .gitignore에 추가한다.

bash
# .gitignore 예시
node_modules/

📄 package-lock.json ​

package-lock.json은 실제로 설치된 패키지의 정확한 버전과 의존성 구조를 기록하는 파일이다.

  • package.json: 프로젝트 정보와 의존성 범위 관리
  • package-lock.json: 실제 설치된 패키지 버전 고정
  • node_modules: 설치된 패키지 파일들이 저장되는 폴더

이를 통해 다른 팀원이 같은 프로젝트를 설치했을 때도 동일한 패키지 버전을 사용할 수 있다.

🔄 npm install

bash
# package.json과 package-lock.json을 기준으로 의존성 설치
$ npm install

📄 dependencies와 devDependencies ​

npm 패키지는 사용 목적에 따라 dependencies와 devDependencies로 구분된다.

  • dependencies: 실제 서비스 실행에 필요한 패키지 (react, react-dom, axios)
  • devDependencies: 개발 과정에서만 필요한 패키지 (vite, eslint, prettier)

npx (Node Package eXecute) ​

npx는 npm 패키지를 설치하지 않고도 일회성으로 실행할 수 있게 해주는 도구이다.
프로젝트 생성 도구처럼 한 번만 실행하면 되는 CLI 패키지를 사용할 때 유용하다.

bash
# React 프로젝트 생성
$ npx create-vite@latest my-app --template react