React를 위한 Node.js

Node.js란

Node.js는 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 런타임이다.
React와 같은 프론트엔드 프레임워크를 개발·빌드·테스트하기 위해 필수적으로 사용된다.

📟 주요 명령어

bash

# Node 버전 확인
$ node -v

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

# 자바스크립트 파일 실행
$ node 파일명.js

node 이 명령어를 터미널에 입력하면 Node.js가 인터프리터 모드로 들어간다.
이걸 REPL(Read–Eval–Print–Loop) 환경이라고 부르는데, 쉽게 말해 Node.js 콘솔에서 자바스크립트를 한 줄씩 직접 입력하고 실행 결과를 바로 확인할 수 있는 모드이다.
마치 크롬 브라우저의 개발자 도구 Console 탭처럼 사용할 수 있다.

nvm (Node.js Version Manager)

💡 Node.js는 버전이 자주 바뀌기 때문에, 프로젝트마다 다른 버전을 쓰는 경우가 많다.
이럴 때 NVM은 버전 충돌 문제를 해결해주는 필수 도구다.

nvm은 Node.js의 여러 버전을 손쉽게 관리할 수 있도록 도와주는 도구이다.
프로젝트별로 다른 Node 버전을 사용해야 할 때 매우 유용하다.

🗝️ NVM의 장점

1. 프로젝트마다 다른 Node.js 버전 설정 가능
1. 기존 프로젝트에 영향을 주지 않고 새로운 버전 사용
1. 팀원들과의 개발 환경 통일 용이

📟 주요 명령어

bash

# nvm 버전 확인
$ nvm --v

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

# 특정 버전 설치
$ nvm install 00.00.0

# 설치된 Node 버전 전체 목록 + 현재 사용 중인 버전 표시
$ nvm ls

# 사용 버전 변경
$ nvm use 00.00.0

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

💡 LTS(Long Term Support): 가장 안정적인 Node.js 버전이다. 새 프로젝트에는 LTS 버전 사용을 권장한다.

npm (Node Package Manager)

npm은 Node.js와 함께 설치되는 패키지 관리자이다.
외부 라이브러리를 설치하거나, 프로젝트의 의존성을 관리하는 데 사용된다.

📦 JavaScript 패키지란?

재사용 가능한 JavaScript 코드 묶음을 의미한다. npm에 등록된 패키지는 보통 package.json이라는 메타정보 파일을 통해 관리되며, 버전, 의존성, 스크립트 등의 정보가 담긴다.

📟 주요 명령어

bash

# npm 버전 확인
$ npm -v

# package.json 생성 (기본 설정 자동 적용)
$ npm init -y

# package.json 생성 (질문에 수동으로 응답)
$ npm init

# 패키지 설치 (로컬 프로젝트에 설치)
$ npm install 패키지명

# 패키지 전역 설치 (명령어처럼 CLI로 실행할 패키지)
$ npm install -g 패키지명

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

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

💡 로컬 설치 vs 전역 설치

구분	설명	예시
로컬 설치	프로젝트 내부에 설치, `node_modules` 폴더에 위치	React, Tailwind 등
전역 설치	모든 프로젝트에서 CLI처럼 사용 가능	`create-react-app`, `eslint`, `vite` 등

📄 package.json

json

{
  "name": "project", // 프로젝트 이름
  "version": "1.0.0", // 프로젝트 버전
  "description": "", // 프로젝트 설명
  "main": "index.js", // 진입 파일(엔트리 포인트)
  "scripts": {
    // 명령어 모음
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node node.js"
  },
  "keywords": ["npm", "javascript", "node"], // 배포 시 검색용 키워드
  "author": "", // 작성자 이름
  "license": "ISC" // 라이선스
}

📁 node_modules란?

npm install을 하면, 의존성 패키지가 이 폴더에 설치된다. 이 폴더는 매우 크기 때문에 보통 .gitignore에 포함시킨다.

bash

# .gitignore 예시
node_modules/

JavaScript 모듈 사용법

구분	CommonJS (Node.js 기본)	ES6 (브라우저 환경)
내보내기	`module.exports`	`export default`
가져오기	`require`	`import`
실행 시점	런타임에 동기 로딩	정적 분석으로 미리 파싱됨
사용 환경	Node.js 전통 방식	브라우저 & 최신 Node.js (v14~)

CommonJS 예시

multifly.jstwo.jsthree.js

const multifly = (x, y) => console.log(`${x} x ${y} = ${x * y}`);

module.exports = multifly;

const multifly = require("./multifly.js");

multifly(2, 1);
multifly(2, 2);
multifly(2, 3);
multifly(2, 4);
multifly(2, 5);

const multifly = require("./multifly.js");

multifly(3, 1);
multifly(3, 2);
multifly(3, 3);
multifly(3, 4);
multifly(3, 5);

ES6 예시

multifly.jstwo.jsthree.js

const multifly = (x, y) => console.log(`${x} x ${y} = ${x * y}`);

export default multifly;

import multifly from "./multifly.js";

multifly(2, 1);
multifly(2, 2);
multifly(2, 3);
multifly(2, 4);
multifly(2, 5);

import multifly from "./multifly.js";

multifly(3, 1);
multifly(3, 2);
multifly(3, 3);
multifly(3, 4);
multifly(3, 5);

npm 패키지 사용 예시

📎 npm dayjs

bash

# dayjs install
$ npm i dayjs

CommonJS 예시

jsonday.js

json

{
  "name": "project", // 프로젝트 이름
  "version": "1.0.0", // 프로젝트 버전
  "description": "", // 프로젝트 설명
  "main": "day.js", // 진입 파일(엔트리 포인트)
  "scripts": {
    // 명령어 모음
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node day.js"
  },
  "keywords": ["npm", "javascript", "node"], // 배포 시 검색용 키워드
  "author": "", // 작성자 이름
  "license": "ISC", // 라이선스
  "dependencies": {
    "dayjs": "^1.11.11"
  }
}

const dayjs = require("dayjs");

const now = dayjs();
console.log(now.toString());

console.log(now.format());
console.log(now.format("YYYY-MM-DD")); // 사용자 정의 형식
console.log(now.format("YYYY년 MM월 DD일")); // 한글 형식

const date1 = dayjs("2024-08-04");
const date2 = dayjs("2025-08-05");

console.log(date2.diff(date1, "day")); // 일 단위 차이
console.log(date2.diff(date1, "month")); // 월 단위 차이

ES6 예시

jsonday.js

json

{
  "name": "project", // 프로젝트 이름
  "version": "1.0.0", // 프로젝트 버전
  "description": "", // 프로젝트 설명
  "main": "day.js", // 진입 파일(엔트리 포인트)
  "type": "module",
  "scripts": {
    // 명령어 모음
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node day.js"
  },
  "keywords": ["npm", "javascript", "node"], // 배포 시 검색용 키워드
  "author": "", // 작성자 이름
  "license": "ISC", // 라이선스
  "dependencies": {
    "dayjs": "^1.11.11"
  }
}

import dayjs from "dayjs";

const now = dayjs();
console.log(now.toString());

console.log(now.format());
console.log(now.format("YYYY-MM-DD")); // 사용자 정의 형식
console.log(now.format("YYYY년 MM월 DD일")); // 한글 형식

const date1 = dayjs("2024-08-04");
const date2 = dayjs("2025-08-05");

console.log(date2.diff(date1, "day")); // 일 단위 차이
console.log(date2.diff(date1, "month")); // 월 단위 차이

📄 package-lock.json

package-lock.json은 npm install을 실행했을 때 자동으로 생성되는 파일로, 설치된 정확한 패키지 버전과 구조(트리)를 기록하는 잠금(Lock) 파일이다.

package.json: "원하는 버전 범위" 저장
package-lock.json: "실제로 설치된 정확한 버전" 저장

이를 통해 프로젝트 간 또는 팀원 간에 동일한 환경을 보장할 수 있다.

패키지를 설치하면 그 패키지 또한 또다른 패키지에 의존하고 있을 수 있다.
이러한 관계를 의존성(dependency)이라고 한다.

🔄 npm install 동작 요약

npm install

npm install은 package.json에 정의된 의존성에 따라 node_modules를 구성하고, package-lock.json도 생성 또는 갱신한다.

bash

# 모든 의존성 설치 (package.json 기준)
$ npm install

의존성 구분

구분	설명	예시
dependencies	런타임에 필요한 패키지	react, axios
devDependencies	개발할 때만 필요한 도구	eslint, vite, prettier

bash

# 개발 의존성으로 설치
$ npm install -D eslint

npx (Node Package eXecute)

💡 설치하지 않아도 최신 CLI를 실행할 수 있는 npm의 실행 도구이다.

npx는 npm 패키지를 설치하지 않고도 일회성으로 실행할 수 있게 해주는 도구이다. npm과 함께 설치되며, React 프로젝트 생성 시 자주 사용됩니다. (npm 5.2.0 이후 버전에 포함되어 npm을 더 편하게 쓸 수 있게 해주는 도구)

🗝️ npx의 필요성

1. 패키지를 일회성으로 사용하는 경우

bash

$ npx cowsay hello
$ npx cowsay -e o0 -T U hello

1. 프로젝트 환경을 구축하는 경우

bash

$ npx create-react-app react-app

🐮 cowsay ?

bash

$ npx cowsay hello
$ npx cowsay -e o0 -T U hello

plaintext

 _______
< hello >
 -------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

 _______
< hello >
 -------
        \   ^__^
         \  (o0)\_______
            (__)\       )\/\
             U  ||----w |
                ||     ||

React를 위한 Node.js ​

Node.js란 ​

📟 주요 명령어 ​

nvm (Node.js Version Manager) ​

🗝️ NVM의 장점 ​

📟 주요 명령어 ​

npm (Node Package Manager) ​

📦 JavaScript 패키지란? ​

📟 주요 명령어 ​

💡 로컬 설치 vs 전역 설치 ​

📄 package.json ​

📁 node_modules란? ​

JavaScript 모듈 사용법 ​

CommonJS 예시 ​

ES6 예시 ​

npm 패키지 사용 예시 ​

CommonJS 예시 ​

ES6 예시 ​

📄 package-lock.json ​

npm install ​

의존성 구분 ​

npx (Node Package eXecute) ​

🗝️ npx의 필요성 ​

React를 위한 Node.js

Node.js란

📟 주요 명령어

nvm (Node.js Version Manager)

🗝️ NVM의 장점

📟 주요 명령어

npm (Node Package Manager)

📦 JavaScript 패키지란?

📟 주요 명령어

💡 로컬 설치 vs 전역 설치

📄 package.json

📁 node_modules란?

JavaScript 모듈 사용법

CommonJS 예시

ES6 예시

npm 패키지 사용 예시

CommonJS 예시

ES6 예시

📄 package-lock.json

npm install

의존성 구분

npx (Node Package eXecute)

🗝️ npx의 필요성