Node.js & npm — 모던 웹 개발 로드맵

이 토픽을 마치면

"왜 프론트엔드 개발하는데 Node.js를 깔아야 하죠?"라는 질문에 답할 수 있습니다.

HTML 파일 하나로 웹사이트를 만들던 시절

2010년대 초반까지는 이랬습니다:

text

index.html  ← HTML 쓰고
style.css   ← CSS 넣고
script.js   ← jQuery 넣고
브라우저에서 열기  ← 끝

Node.js가 필요 없었습니다. 서버? 그건 PHP가 하는 일이었고요. 지금은 React 프로젝트 하나를 돌리려면 npm install부터 합니다. 뭐가 바뀐 걸까요?

Node.js — 브라우저 밖으로 나온 JavaScript

JavaScript는 원래 브라우저 안에서만 돌아가는 언어였습니다. Node.js는 이걸 브라우저 밖에서도 돌릴 수 있게 만든 런타임입니다.

bash

# 브라우저 없이 JavaScript 실행
node hello.js

이게 가능해지면서 두 가지가 바뀌었습니다:

서버를 JavaScript로 만들 수 있게 됨 — 프론트와 백엔드가 같은 언어
개발 도구를 JavaScript로 만들 수 있게 됨 — Webpack, Vite, ESLint, Prettier 전부 Node.js 위에서 동작

지금 프론트엔드 개발자가 Node.js를 설치하는 이유는 서버를 만들기 위해서가 아닙니다. 빌드 도구, 린터, 번들러 등 개발 도구가 전부 Node.js 위에서 돌아가기 때문입니다.

npm — 남이 만든 코드를 가져다 쓰는 시스템

npm(Node Package Manager)은 세계 최대의 코드 공유 저장소입니다. 200만 개 이상의 패키지가 등록되어 있습니다.

bash

npm install axios    # HTTP 요청 라이브러리 설치
npm install lodash   # 유틸리티 함수 모음 설치

설치하면 node_modules/ 폴더에 코드가 다운로드되고, package.json에 기록됩니다.

json

{
  "dependencies": {
    "axios": "^1.6.0",
    "lodash": "^4.17.21"
  }
}

package.json은 "이 프로젝트는 이런 패키지들을 쓴다"는 명세서입니다. 다른 사람이 npm install만 치면 동일한 환경이 구성됩니다.

근데 node_modules를 열어보면 수천 개의 폴더가 있습니다. 패키지 하나를 설치했을 뿐인데요. 그 패키지도 다른 패키지를 쓰고, 그 패키지도 또 다른 패키지를 쓰고... 이것이 의존성 지옥의 시작입니다. npm이 이 복잡한 의존성 트리를 자동으로 관리해줍니다.

"왜 React 시작하려면 이렇게 많이 깔아야 해요?"

bash

npx create-react-app my-app
cd my-app
npm start

이 한 줄이 내부적으로 하는 일:

React (UI 프레임워크)
Webpack (번들러 — 여러 파일을 하나로 합침)
Babel (트랜스파일러 — 최신 문법을 구형 브라우저용으로 변환)
ESLint (코드 검사)
그 외 수십 개의 하위 의존성

모던 웹 개발은 **"파일 하나를 브라우저에서 여는 것"이 아니라 "수백 개의 모듈을 빌드 파이프라인으로 합치는 것"**이 되었습니다. 이 파이프라인 전체가 Node.js 위에서 돌아갑니다.

node_modules는 왜 이렇게 큰가

bash

$ du -sh node_modules
812M    node_modules
$ find node_modules -type d | wc -l
28437

React 프로젝트의 node_modules가 800MB를 넘는 건 드문 일이 아닙니다. 패키지 하나가 다른 패키지를 쓰고, 그것이 또 다른 패키지를 쓰는 의존성 체인 때문입니다.

이것이 **"왜 .gitignore에 node_modules/를 반드시 추가해야 하는가"**의 이유입니다. package.json과 package-lock.json만 git에 올리면, 다른 사람이 npm install로 동일한 환경을 재현합니다.

npx, yarn, pnpm — npm의 변형들

npm이 유일한 선택지는 아닙니다:

bash

# npx — 설치 없이 실행 (npm 5.2+부터 내장)
npx create-next-app my-app   # 전역 설치 없이 바로 실행

# yarn — Facebook이 만든 대안 (더 빠른 설치, lock 파일)
yarn add axios

# pnpm — 디스크 효율적 (같은 패키지를 하드링크로 공유)
pnpm install axios

셋 다 node_modules에 패키지를 설치하는 건 같습니다. 팀이 하나를 정해서 쓰면 됩니다. 요즘은 npm 자체가 많이 빨라져서, 특별한 이유가 없으면 npm으로 충분합니다.

핵심 한 줄: Node.js는 JavaScript를 브라우저 밖에서 돌리는 런타임이고, npm은 남이 만든 코드를 가져다 쓰는 시스템입니다. 프론트엔드 개발자도 Node.js를 설치하는 이유는 서버를 만들기 위해서가 아니라, 모든 개발 도구가 Node.js 위에서 돌아가기 때문입니다.