node.js / npm / vite 란, 무엇인가.

2025년 10월 24일
 |  댓글 없음

1. Node.js: 자바스크립트의 실행 환경

Node.js Logo
  • 한마디 정의: 원래 웹 브라우저 안에서만 동작하던 자바스크립트를, 브라우저 밖(예: 내 컴퓨터, 서버 등)에서도 실행할 수 있게 해주는 환경입니다.
  • 핵심 역할:
    1. 자바스크립트 런타임(Runtime): 자바스크립트 코드를 컴퓨터가 이해하고 실행할 수 있도록 해줍니다. (내부적으로는 Google Chrome의 V8 엔진을 사용)
    2. 서버 구축: 자바스크립트로 웹 서버(백엔드)를 만들 수 있습니다. (Express.js 같은 프레임워크와 함께 사용)
    3. 프론트엔드 개발 도구의 기반: 가장 중요한 역할 중 하나로, Vite, Webpack, Babel, ESLint 등 수많은 프론트엔드 개발 도구들이 Node.js 환경 위에서 동작합니다. 즉, Node.js가 설치되어 있어야 이런 도구들을 사용할 수 있습니다.

비유: Node.js는 자바스크립트라는 언어를 위한 ‘운영체제(OS)’ 또는 ‘작업장’ 과 같습니다. 자바스크립트 코드가 실제로 실행되고, 다른 도구들이 설치되어 돌아갈 수 있는 기반 환경을 제공합니다.

2. npm (Node Package Manager): 자바스크립트의 패키지 관리자

npm Logo
  • 한마디 정의: 전 세계의 자바스크립트 개발자들이 만든 유용한 코드 조각(라이브러리, 프레임워크 등)인 ‘패키지’를 쉽게 설치하고 관리하게 해주는 도구입니다.
  • 핵심 역할:
    1. 패키지 설치: 필요한 라이브러리(예: React, Vue, axios)를 명령어 한 줄로 설치할 수 있습니다.
      npm install react
    2. 의존성 관리: 내 프로젝트가 어떤 패키지들을 필요로 하는지 package.json이라는 파일에 목록으로 기록하고 관리합니다. 다른 개발자가 이 프로젝트를 받아서 npm install 명령어만 실행하면, package.json에 기록된 모든 패키지들이 자동으로 설치됩니다.
    3. 스크립트 실행: package.json 파일에 자주 사용하는 명령어(예: 개발 서버 실행, 빌드)를 등록해두고 간단하게 실행할 수 있습니다.
    1. 패키지 설치: 필요한 라이브러리(예: React, Vue, axios)를 명령어 한 줄로 설치할 수 있습니다.
      npm install react
    2. 의존성 관리: 내 프로젝트가 어떤 패키지들을 필요로 하는지 package.json이라는 파일에 목록으로 기록하고 관리합니다. 다른 개발자가 이 프로젝트를 받아서 npm install 명령어만 실행하면, package.json에 기록된 모든 패키지들이 자동으로 설치됩니다.
    3. 스크립트 실행: package.json 파일에 자주 사용하는 명령어(예: 개발 서버 실행, 빌드)를 등록해두고 간단하게 실행할 수 있습니다.
    1. 패키지 설치: 필요한 라이브러리(예: React, Vue, axios)를 명령어 한 줄로 설치할 수 있습니다.
      npm install react
    2. 의존성 관리: 내 프로젝트가 어떤 패키지들을 필요로 하는지 package.json이라는 파일에 목록으로 기록하고 관리합니다. 다른 개발자가 이 프로젝트를 받아서 npm install 명령어만 실행하면, package.json에 기록된 모든 패키지들이 자동으로 설치됩니다.
    3. 스크립트 실행: package.json 파일에 자주 사용하는 명령어(예: 개발 서버 실행, 빌드)를 등록해두고 간단하게 실행할 수 있습니다.
  • 설치: npm은 Node.js를 설치하면 자동으로 함께 설치됩니다. 따로 설치할 필요가 없습니다.
Bash
JSON

비유: npm은 ‘앱 스토어’ 또는 ‘공구함 관리인’ 과 같습니다. 내가 필요한 앱(패키지)을 검색해서 설치해주고, 내가 어떤 앱들을 설치했는지 목록을 관리해주는 역할을 합니다.

3. Vite: 차세대 프론트엔드 개발 도구 (빌드 툴)

Vite Logo
  • 한마디 정의: 매우 빠른 속도를 자랑하는 최신 프론트엔드 개발 서버 및 빌드 도구입니다.
  • 핵심 역할:
    1. 초고속 개발 서버 (Dev Server):
      • 코드를 수정하고 저장하면, 거의 즉시 브라우저에 변경 사항이 반영됩니다.
      • 기존의 Webpack 같은 도구들은 코드를 수정할 때마다 관련된 모든 파일을 다시 묶는(Bundling) 과정 때문에 시간이 오래 걸렸습니다.
      • Vite는 브라우저가 기본적으로 지원하는 **ESM(ES Modules)**을 활용하여, 수정된 파일만 즉시 전송하기 때문에 매우 빠릅니다. (No-bundle 개발 서버)
    2. 프로덕션 빌드 (Production Build):
      • 개발이 끝나고 실제 서비스에 배포할 때는, 여러 개의 자바스크립트/CSS 파일들을 하나 또는 몇 개의 파일로 합치고, 코드를 압축(Minify)하여 최적화하는 ‘빌드’ 과정이 필요합니다.
      • Vite는 이 빌드 과정을 매우 효율적으로 처리해줍니다. (내부적으로는 Rollup이라는 검증된 번들러를 사용)
    3. 다양한 기능 내장:
      • TypeScript, JSX(React), .vue(Vue) 파일 등을 별도의 복잡한 설정 없이 바로 지원합니다.
      • Hot Module Replacement (HMR) 기능이 매우 빠르고 안정적이어서, 페이지 전체를 새로고침하지 않고 변경된 부분만 교체해줍니다.

비유: Vite는 ‘최첨단 스마트 작업대’ 와 같습니다. 개발할 때는 내가 필요한 부품(코드)을 즉시 가져다주고, 완성품을 포장(빌드)할 때는 가장 효율적이고 가볍게 포장해주는 역할을 합니다.

세 가지의 관계 정리

이 세 가지 도구는 프론트엔드 개발에서 다음과 같은 흐름으로 함께 작동합니다.

  1. 설치:
    • 먼저 내 컴퓨터에 Node.js를 설치합니다. (그러면 npm도 자동으로 설치됩니다.)
  2. 프로젝트 시작:
    • npm을 사용하여 Vite 프로젝트 생성 도구를 실행합니다.Bash# npm을 이용해 Vite 프로젝트를 생성 npm create vite@latest my-vue-app -- --template vue
    • 이 명령어를 실행하면, Vite는 Vue.js 개발에 필요한 기본 파일 구조와 설정(package.json 포함)을 자동으로 만들어줍니다.
  3. 개발 과정:
    • 프로젝트 폴더로 이동하여 npm install을 실행합니다. npm은 package.json을 읽고 프로젝트에 필요한 모든 의존성 패키지(예: vue, vite 자체 등)를 node_modules 폴더에 설치합니다. 이 과정은 Node.js 환경 위에서 일어납니다.
    • npm run dev 명령어를 실행합니다. npm은 이 명령을 받아 Vite의 개발 서버를 실행시킵니다.
    • Vite 개발 서버는 코드를 수정할 때마다 번개 같은 속도로 변경 사항을 브라우저에 반영해주어 개발 경험을 극대화합니다.
  4. 배포:
    • 개발이 완료되면 npm run build 명령어를 실행합니다.
    • Vite는 프로젝트의 모든 코드를 실제 서비스 환경에 맞게 최적화된 파일들로 묶어서 dist 폴더에 생성해줍니다.
    • 이 dist 폴더 안의 파일들을 웹 서버에 올리면 사용자들이 서비스를 이용할 수 있게 됩니다.