Node.js, NPM, Webpack 기본 개념 정리

📌 목차

1. Node.js란? 2. NPM(Node Package Manager)이란? 3. NPM 패키지 관리 4. NPM 커스텀 명령어 (Scripts) 5. Webpack(웹팩)이란? 6. Webpack의 주요 개념 7. Webpack 실행하기 8. 정리

 

1. Node.js란?

Node.js 개요

Node.js는 브라우저 외부에서도 JavaScript를 실행할 수 있는 런타임 환경이다.
과거에는 JavaScript가 웹 브라우저에서만 실행되었지만, Node.js 덕분에 서버에서도 JavaScript를 실행할 수 있게 되었다.

Node.js의 주요 특징

V8 엔진 기반

• Node.js는 Google Chrome의 V8 JavaScript 엔진을 사용하여 빠르게 JavaScript를 실행한다.

비동기(Asynchronous) 처리

• 이벤트 기반 및 비동기 I/O 모델을 사용하여 네트워크 요청을 효율적으로 처리할 수 있다.

단일 스레드(Single-threaded) 모델

• Node.js는 단일 스레드이지만 이벤트 루프(Event Loop)를 통해 여러 작업을 동시에 처리할 수 있다.

V8 엔진 → JavaScript를 빠르게 실행하는 Google 엔진 비동기 I/O → 네트워크 요청, 파일 읽기 등을 기다리지 않고 처리 이벤트 루프 → 비동기 작업을 순차적으로 실행하는 메커니즘

 

2. NPM(Node Package Manager)이란?

NPM 개요

NPM(Node Package Manager)는 Node.js에서 JavaScript 라이브러리를 설치하고 관리할 수 있는 패키지 매니저다.
Node.js를 설치하면 기본적으로 함께 설치된다.

NPM 설치 확인

npm -v

 

3. NPM 패키지 관리

패키지 초기화 (package.json 생성)

npm init -y

• 위 명령을 실행하면 package.json 파일이 생성된다.

{
  "name": "demo",
  "version": "1.0.0",
  "dependencies": {},
  "devDependencies": {}
}

로컬 패키지 설치

npm install jquery

또는 축약형

npm i jquery

설치된 패키지는 node_modules/ 폴더에 저장된다.

전역 패키지 설치

npm install gulp --global

또는 축약형

npm i -g gulp

• C:\Users\{username}\AppData\Roaming\npm 
• 글로벌로 설치된 패키지는 위 경로에 저장되며, 시스템 전체에서 사용 가능하다.

 

로컬(Local) vs 전역(Global) 패키지 설치 차이점

구분	로컬(Local)	설치전역(Global) 설치
설치 명령어	npm install <패키지명> npm i <패키지명>	npm install -g <패키지명> npm i -g <패키지명>
설치 위치	프로젝트 폴더 내 node_modules/	시스템 전체 (/usr/local/lib/node_modules 또는 %APPDATA%\npm\node_modules)
사용 가능 범위	해당 프로젝트에서만 사용 가능	모든 프로젝트 및 전역에서 사용 가능
관리 위치	package.json의 dependencies 또는 devDependencies에 기록됨	package.json과 무관하게 설치됨
실행 방법	프로젝트 폴더 내에서 require('<패키지명>')로 사용	터미널에서 직접 명령어 실행 가능
예제	npm install express → require('express')로 사용	npm install -g nodemon → nodemon app.js 로 실행 가능
언제 사용?	프로젝트에 종속적인 라이브러리 (예: express, react)	CLI(Command Line Interface) 도구 (예: nodemon, gulp, webpack)

 

 

4. NPM 커스텀 명령어 (Scripts)

NPM의 scripts 속성을 사용하면 커스텀 명령어를 정의할 수 있다

{
  "scripts": {
    "hello": "echo hi",
    "dev": "node server.js",
    "build": "webpack --mode=production"
  }
}

실행 방법

npm run hello   # hi 출력
npm run dev     # 서버 실행
npm run build   # 웹팩 빌드 실행

 

5. Webpack(웹팩)이란?

Webpack 개요

Webpack(웹팩)은 모듈 번들러(Module Bundler로,
JavaScript, CSS, 이미지 등을 하나의 번들 파일로 묶어 최적화하는 도구다.

Webpack이 필요한 이유

과거에는 <script> 태그를 사용하여 여러 개의 JavaScript 파일을 로드했다.

<script src="utils.js"></script>
<script src="app.js"></script>
<script src="main.js"></script>

• 하지만 파일이 많아지면 관리가 어려워지고, 로딩 속도가 느려지는 문제가 발생
• 웹팩을 사용하면 여러 개의 파일을 하나로 묶어 최적화할 수 있음

 

6. Webpack의 주요 개념

Entry(진입점)

웹팩이 번들링을 시작할 파일을 지정한다.

module.exports = {
  entry: './src/index.js'
};

Output(출력)

번들링된 파일이 저장될 위치를 지정한다.

module.exports = {
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

Loaders(로더)

웹팩은 JavaScript 외에도 CSS, 이미지 등을 변환할 수 있다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

Plugins(플러그인)

웹팩 플러그인을 활용하면 빌드 과정을 더욱 자동화할 수 있다.

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

이렇게 하면 dist/index.html 파일이 자동 생성된다.

 

7. Webpack 실행하기

Webpack 설치

npm install webpack webpack-cli --save-dev

Webpack 실행

package.json에 다음 스크립트를 추가

"scripts": {
  "build": "webpack"
}

실행

npm run build

 

8. 정리

 

개념	설명
Node.js	JavaScript 실행 환경 (브라우저 외부 실행 가능)
NPM	JavaScript 패키지 관리 도구
Webpack	JavaScript, CSS, 이미지 등을 하나로 묶는 번들러
Loaders	CSS, 이미지 등의 파일을 변환하여 사용
Plugins	HTML 자동 생성 등 추가 기능 제공