콘텐츠로 이동

04. Node.js & NPM: 자바스크립트 공구함

"Node.js는 자바스크립트의 탈옥(Jailbreak) 사건입니다. 브라우저라는 감옥에 갇혀 있던 JS를 꺼내, 여러분의 노트북을 제어하게 만들었습니다."

1. Node.js: 아이언맨 수트를 입은 자바스크립트

원래 자바스크립트는 20년 넘게 브라우저(Chrome, Safari) 안에서만 살 수 있었습니다. 그런데 2009년, 라이언 달(Ryan Dahl)이라는 천재 개발자가 엉뚱한 상상을 합니다.

"구글 크롬의 엔진(V8)만 쏙 떼어내서, 컴퓨터(서버)에 심어보면 어떨까?"

그는 자바스크립트(JS)에게 C++로 만든 강력한 팔다리(파일 제어, 통신)를 붙여주었습니다. 이것이 바로 Node.js입니다.

2. Browser JS vs Node.js: 권한의 차이

같은 자바스크립트 언어를 쓰지만, 어디서 실행하느냐(Runtime)에 따라 권한이 완전히 다릅니다.

🏨 비유: 호텔 투숙객 vs 지배인

구분 브라우저 속 JS (Frontend) Node.js (Runtime)
역할 호텔 투숙객 🧳 호텔 지배인 🔑
권한 제한적 (Sandbox) 무제한 (System Access)
할 수 있는 일 방 안의 TV 켜기, 룸서비스 시키기
(DOM 조작, 서버 요청)		 호텔 마스터키 사용
(파일 삭제, 프로그램 실행, OS 제어)
할 수 없는 일 옆방 문 열기, 호텔 배선 건드리기
(내 컴퓨터 파일 훔쳐보기 불가)		 화면에 그림 그리기
(HTML/CSS 렌더링 불가, DOM 없음)

핵심: 우리가 Node.js를 설치하는 이유는, 내 컴퓨터의 파일을 읽고 쓰고 조립하는 '지배인 권한'이 필요하기 때문입니다.

3. Why: Node.js의 3가지 핵심 역할 (3대장)

"우리는 백엔드 서버를 만들 것도 아닌데, 왜 프론트엔드 개발에 Node.js를 깔아야 할까요?" 바로 Node.js가 웹 사이트를 만들기 위해 3가지 필수 작업을 대신 해주는 만능 비서이기 때문입니다.

① 번역가 (Transpiler)

"브라우저는 React(JSX)를 모릅니다."

  • 문제: 우리가 작성하는 React(JSX)나 TypeScript 문법은 브라우저가 이해하지 못하는 '최신 사투리'입니다. 브라우저에 그대로 던지면 에러가 납니다.
  • Node.js의 역할: 저장 버튼을 누르는 순간, 브라우저가 알아들을 수 있는 '표준 자바스크립트(ES5)'로 싹 번역해줍니다. (Babel 등의 도구 사용)

② 짐꾼 (Bundler)

"파일 100개를 하나로 뭉쳐줍니다."

  • 문제: 개발할 때는 코드를 Header.js, Footer.js, User.js 등 100개로 쪼개서 관리하는 게 편합니다. 하지만 브라우저가 파일 100개를 다운로드 받으려면 속도가 엄청 느려집니다.
  • Node.js의 역할: 흩어져 있는 파일 100개와 라이브러리들의 관계를 파악해서, 딱 하나의 파일(bundle.js)로 예쁘게 포장해줍니다. 브라우저는 이것 하나만 가져가면 됩니다.

③ 매니저 (Dev Server)

"새로고침 없이 실시간으로 바꿔줍니다."

  • 문제: 파이썬 코딩할 때는 코드를 고치면 프로그램을 끄고 다시 실행(F5)해야 했죠? 웹 개발에서 매번 새로고침을 하는 건 끔찍합니다.
  • Node.js의 역할: 파이썬처럼 매번 껐다 켤 필요가 없습니다.
    여러분이 코드를 수정하고 저장(Ctrl+S)하는 순간, 마치 생방송(Live) 중에 자막을 바꾸듯이 웹사이트의 바뀐 부분만 0.1초 만에 쏙 갈아끼워줍니다. (HMR: Hot Module Replacement)

🎯 요약: Node.js가 없다면?

여러분이 Node.js를 설치하지 않는다면, 위 3가지 일을 수작업으로 해야 합니다.

  1. 메모장을 켜서 React 코드를 순수 JS 문법으로 한 줄 한 줄 고치고 (번역)
  2. 수십 개의 파일을 하나로 복사-붙여넣기 해서 합치고 (포장)
  3. 코드 고칠 때마다 브라우저 새로고침 버튼을 눌러야 합니다 (관리)

결론: Node.js는 웹사이트를 '돌리기 위해' 필요한 게 아니라, '편하게 만들기 위해' 필요한 개발용 로봇입니다.

4. Q&A: Node.js로 서버는 안 만드나요?

많은 학생이 질문합니다. "Node.js로 백엔드(서버)를 만들기도 한다던데요?" 맞습니다. Node.js는 두 가지 직업을 가지고 있습니다.

구분 직업 1: 공사장 인부 (Tooling) 직업 2: 식당 요리사 (Server)
분야 Frontend 개발 영역 Backend 개발 영역
하는 일 React 코드를 번역하고 포장함 DB에서 데이터를 꺼내 사용자에게 줌
대표 도구 Vite, Babel Express.js, NestJS
ClapCampus ✅ 사용함 ❌ 사용 안 함 (FastAPI로 대체)

🤔 왜 우리는 FastAPI를 쓰나요?

Node.js로 서버를 만들어도 되지만, AI Native 개발자에게는 FastAPI(Python)가 훨씬 유리하기 때문입니다.

  1. 언어 통일: AI 모델(PyTorch/TensorFlow)은 99% 파이썬입니다. 같은 언어를 써야 AI를 바로 갖다 붙일 수 있습니다.
  2. 학습 효율: 여러분이 이미 배운 파이썬 문법 그대로 서버를 만들 수 있습니다.
graph TD
    subgraph "Frontend (보이는 웹)"
        React[React 소스코드] --"Node.js (번역/포장)"--> Browser[브라우저 실행]
    end

    subgraph "Backend (움직이는 웹)"
        Browser --"데이터 요청 (API)"--> FastAPI[🐍 FastAPI 서버]
        FastAPI <--> AI[🤖 Python AI 모델]
    end

    style FastAPI fill:#e1f5fe,stroke:#01579b
    style AI fill:#e1f5fe,stroke:#01579b

5. NPM: 세상 모든 코드의 만물상

파이썬에 pip가 있다면, 자바스크립트에는 NPM (Node Package Manager)이 있습니다.

구분 Python Node.js
패키지 관리 pip install pandas npm install react
영수증 (명세서) requirements.txt package.json
저장소 (창고) venv 폴더 node_modules 폴더

주의: 블랙홀 (node_modules)

npm install을 하면 생기는 node_modules 폴더는 엄청나게 무겁습니다. 이 폴더는 절대 깃허브(Git)에 올리지 않습니다. (.gitignore 필수!) 동료에게는 영수증(package.json)만 주면, 동료가 알아서 다시 다운로드 받으면 됩니다.

5-1. 실무 개발자의 NPM 활용법 (Essential) 🍯

입문자가 실무에서 꼭 마주치는 2가지 현실적인 팁입니다.

① 재료 vs 도구 (dependencies 구분)

package.json을 보면 라이브러리가 두 군데로 나뉩니다.

구분 dependencies (실제 재료) devDependencies (작업 도구)
의미 웹사이트가 돌아갈 때 꼭 필요한 코드 개발할 때만 필요한 도구 (번역기, 포장기)
예시 React, UI 라이브러리, 데이터 차트 Vite, TypeScript, ESLint
설치법 npm install <이름> npm install -D <이름>

핵심: 우리가 Node.js를 "개발용 로봇"으로 쓴다면, 대부분의 도구는 devDependencies에 들어가는 게 맞습니다.

② Scripts: 나만의 단축키 만들기

복잡한 터미널 명령어를 단축키로 저장할 수 있습니다. package.json의 "scripts"를 보세요.

"scripts": {
  "start": "vite",
  "build": "vite build",
  "preview": "vite preview"
}
  • 이제 npm run start (또는 npm start) 한 줄이면 Node.js가 알아서 일을 시작합니다.
  • AI 활용: "프로젝트 빌드 명령어를 deploy라는 이름의 스크립트로 짜줘"라고 AI에게 시키세요.

6. Modern Web Tooling: Vite (비트)

과거에는 웹팩(Webpack)이라는 복잡한 도구를 썼지만, 지금은 Vite가 대세입니다. Node.js 환경 위에서 돌아가는 아주 빠른 웹 개발 공구 세트입니다.

AI Native Workflow: 복잡한 설정은 AI에게 맡기세요.

Prompt

Vite를 사용해서 React + TypeScript 프로젝트를 새로 만들고 싶어. 터미널 명령어를 알려줘.

🧠 Visible Thinking Activity: 탈옥 확인하기

브라우저(F12)가 아니라, 진짜 내 컴퓨터 터미널에서 자바스크립트가 OS에 접근하는 것을 눈으로 확인해봅시다.

  1. VS Code 터미널을 엽니다.
  2. check_os.js 파일을 만들고 아래 코드를 적으세요.
// check_os.js
// 'os'는 Node.js가 제공하는 운영체제 제어 도구입니다.
const os = require('os');

console.log("--------------------------------");
console.log("🖥️  내 컴퓨터의 CPU 정보:");
console.log(os.cpus()[0].model); // 첫 번째 코어 모델명
console.log("--------------------------------");
console.log("💾  총 메모리 용량:", os.totalmem() / 1024 / 1024 / 1024, "GB");

  1. 터미널에 입력: node check_os.js

  2. 결과: 브라우저 콘솔에서는 절대 볼 수 없었던 내 컴퓨터의 사양이 출력됩니다.

  3. Insight: 이제 자바스크립트는 브라우저라는 감옥을 탈출해, 여러분의 컴퓨터(OS)와 직접 대화하고 있습니다.

Activity 2: 파일 생성하기 (탈옥의 증거)

이번에는 자바스크립트로 내 컴퓨터에 메모장 파일을 직접 만들어봅시다. 브라우저는 절대 할 수 없는 일입니다.

  1. create_file.js 파일을 만들고 아래 코드를 적으세요.
// create_file.js
// 'fs'는 File System(파일 다루기) 모듈입니다.
const fs = require('fs');

const content = '안녕, 클랩캠퍼스! Node.js가 이 파일을 만들었어.';

// writeFileSync: 파일을 (동기적으로) 씁니다.
fs.writeFileSync('hello.txt', content);

console.log("✅ 파일 생성 완료! 폴더를 확인해보세요.");
  1. 터미널 실행: node create_file.js
  2. 결과: 왼쪽 탐색기에 hello.txt가 짠! 하고 나타납니다. 열어보면 우리가 적은 글자가 들어있습니다.

🏗️ Appendix: Node.js 설치 가이드 (실습)

운영체제(OS)별로 가장 쉽고 확실한 설치 방법을 안내해 드립니다.

핵심 공통 사항: 반드시 LTS (Long Term Support) 버전을 다운로드해야 합니다. (짝수 버전: 18.x, 20.x 등) 이 버전이 기업에서 사용하는 '안정적인 표준'입니다.

🪟 1. Windows (윈도우) 사용자

윈도우 사용자는 공식 홈페이지의 설치 파일(.msi)을 이용하는 것이 가장 정신건강에 좋습니다.

  1. 다운로드: Node.js 공식 홈페이지에 접속합니다.
  2. 버전 선택: 왼쪽에 있는 v20.xx.x LTS (Recommended for most users) 버튼을 클릭하여 다운로드합니다.
  3. 설치 진행: 다운로드된 파일(node-v20...x64.msi)을 실행합니다.
  4. 클릭, 클릭:
    • 설정은 아무것도 건드리지 말고 계속 [Next]만 누르세요.
    • 중간에 "Tools for Native Modules" (Chocolatey 등) 설치 체크박스가 나오는데, 체크하지 마세요. (설치 시간이 매우 길어지고 복잡해질 수 있습니다. 초급 단계에선 필요 없습니다.)
    • 마지막에 [Install] → [Finish]를 누릅니다.

🍎 2. Mac (맥) 사용자

맥 사용자는 두 가지 방법이 있습니다. 편한 방법을 선택하세요.

방법 A: 공식 설치 파일 (가장 쉬움, 초보자 추천)

  1. 다운로드: Node.js 공식 홈페이지에 접속합니다.
  2. 버전 선택: v20.xx.x LTS 버튼을 클릭합니다. (맥의 칩셋에 따라 인텔/Apple Silicon 버전을 자동 추천해 줍니다.)
  3. 설치 진행: 다운로드된 .pkg 파일을 실행합니다.
  4. 완료: 계속이나 동의를 눌러 설치를 완료합니다.

방법 B: Homebrew 사용 (개발자 추천, 터미널 익숙한 분)

이미 맥에 Homebrew(패키지 관리자)가 깔려 있다면, 터미널에서 한 줄로 끝낼 수 있습니다. 나중에 삭제나 업데이트 관리가 더 편합니다.

  1. 터미널(Terminal) 앱을 엽니다.
  2. 아래 명령어를 입력합니다. 
    brew install node

✅ 3. 설치 검증 (가장 중요!)

설치가 끝났어도 터미널이 이를 인식하려면 재부팅 개념이 필요합니다.

  1. VS Code나 터미널을 완전히 껐다가 다시 켜주세요. (매우 중요)
  2. 터미널에 아래 명령어를 입력하여 버전이 뜨는지 확인합니다.
node -v
  • 성공 화면: v20.11.0 (숫자는 조금 다를 수 있음)
  • npm도 확인: npm -v (Node를 깔면 자동으로 깔려있어야 함)

💡 팁: 만약 윈도우에서 설치했는데도 "명령어를 찾을 수 없다"고 나오면, 컴퓨터를 재부팅 한 번 해주시면 해결됩니다.