[ JavaScript ] 모듈(+NPM)

치즈·2025년 9월 22일

JavaScript SeSAC 청년취업사관학교

모듈(Module)

특정 기능을 담당하는 독립적인 코드 단위.
연관성 높은 코드를 파일로 나누어 관리하는 시스템.

ES 모듈 (표준 모듈 시스템)

현재 권장 방식

2015년 ES6(ECMAScript 2015)에서 표준화.
import 와 export 키워드 사용.
웹 브라우저와 Node.js 모두에서 사용 가능.

1. pakage.json 생성 후 작성

{
  "type": "module"	// 모듈 시스템을 ES 모듈로 사용하겠다고 명시하는 설정.
}

2. ES 모듈

// math.js
function add(a, b) {
  return a + b;
}

export { add };

3. ES 모듈 사용

// main.js
import { add } from "./math.js";

console.log(add(1, 2)); // 3

모듈을 사용하는 방식에는 CommonJs 방식과 ES 모듈 방식이 있으나 현재 개발 트렌드에서는 ES 모듈 방식을 선호한다.

ES 모듈 내보내기, 불러오기

export : 모듈에서 값 또는 함수를 내보낼 때 사용.
import : 다른 모듈에서 값 또는 함수를 가져올 때 사용.

1. Named Export (이름 있는 내보내기)

여러 값과 함수를 내보내기 가능.
가져올 때 정확한 이름만 사용 가능.
export 키워드와 함께 중괄호 {} 사용.

[ 모듈 내보내기 코드 ]

// math.js

// 더하기
function add(n1, n2) {
  return n1 + n2;
}

// 빼기
function subtract(n1, n2) {
  return n1 - n2;
}

// 곱하기
function multiply(n1, n2) {
  return n1 * n2;
}

// 나누기
function divide(n1, n2) {
  return n1 / n2;
}

// 상수
const PI = 3.14;

// 함수 내보내기
// export { 함수명1, 함수명2, ... }
export { add, subtract, multiply, divide };

[ 모듈 불러오기 코드 ]

// main.js
//
// 함수 불러오기
// import {함수명1, 함수명2, ... } from ...
import { add, subtract, multiply, divide } from "./math.js";

console.log(add(1, 2)); //3
console.log(subtract(1, 2)); // -1
console.log(multiply(1, 2)); // 2
console.log(divide(1, 2)); // 0.5

[ 일부 모듈만 불러오기 ]

트리 셰이킹 : 사용하지 않는 코드를 제거하는 기술(최적화 기술).

// main.js
import { PI, add, multiply } from "./math.js";

const a = 1;
const b = 2;

console.log("원주율:", PI);
console.log(add(a, b));
console.log(multiply(a, b));

[ 불러온 함수에 별칭 부여 ]

as 키워드 사용

// main.js
import { add as 더하기, subtract as 빼기, PI as 원주율 } from "./math.js";

console.log("2 + 3 =", 더하기(2, 3)); // 2 + 3 = 5
console.log("5 - 2 =", 빼기(5, 2)); // 5 - 2 = 3
console.log("원주율:", 원주율); // 원주율: 3.14159

[ 모든 내보내기 불러오기 키워드 사용 ]

// main.js
import * as math from "./math.js";

const a = 1;
const b = 2;

console.log(math);
console.log("원주율:", math.PI);
console.log("자연상수:", math.E);
console.log(`a + b = ${math.add(a, b)}`);	// a + b = 3
console.log(`a - b = ${math.subtract(a, b)}`);	// a - b = -1
console.log(`a * b = ${math.multiply(a, b)}`);	// a * b = 2
console.log(`a / b = ${math.divide(a, b)}`);	// a / b = 0.5

2. Default Export (기본 내보내기)

모듈 당 하나의 내보내기.
가져올 때 아무 이름 사용 가능.
export 키워드와 default 키워드를 함께 사용, 중괄호 {} 없이 사용.

[ 모듈 내보내기 코드 ]

// calculator.js
// 계산기 객체 생성 및 속성 할당
const calObj = {
  add: function (n1, n2) {
    return n1 + n2;
  },
  subtract: function (n1, n2) {
    return n1 - n2;
  },
  // multiply 함수
  multiply: function (n1, n2) {
    return n1 * n2;
  },
  // divide는 화살표 함수로 표현해보기
  divide: (n1, n2) => {
    return n1 / n2;
  },
};

// 하나만 내보내기(Default Export)
export default calObj;

[ 모듈 불러오기 코드 ]

// calObj 가 아닌 calculator 로 import 할 수 있다.
// 단 하나만을 export 했기 때문이다.
import calculator from "./calculator.js";

console.log(calculator);
/*
{
  add: [Function: add],
  subtract: [Function: subtract],
  multiply: [Function: multiply],
  divide: [Function: divide]
}
*/

console.log(calculator.add(1, 2)); // 3

NPM(Node Package Manager)

JavaScript 패키지 관리 도구
Node.js와 함께 자동 설치
package.json 파일로 패키지 의존성 관리
의존성: 특정 패키지를 사용하기 위해 필요한 다른 패키지

package.json 이해하기

{
  "type": "module",
  "name": "11-module",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dayjs": "^1.11.18"
  }
}
[ 주요 속성 ]

name : 프로젝트 이름

version : 프로젝트 버전

main : 프로젝트 진입점 파일

type : 모듈 시스템 타입 ("module" 또는 "commonjs")

scripts : npm run 명령어로 실행 가능한 커스텀 명령어들

dependencies : 실행에 필요한 패키지

devDependencies : 개발에만 필요한 패키지

[ 매우 중요! ] NPM 사용 시 주의할 점

예를 들어 dayjs 라는 패키지를 설치한다고 가정해 보자.

npm install dayjs	// 설치 명령어

이 명령어를 실행하면, 프로젝트 루트 디렉토리에 node_modules 라는 e디렉토리가 생긴다.

그 안에는 단순히 dayjs 파일만 있는 게 아니라, dayjs 파일이 내부적으로 의존하는 다른 패키지들까지 함께 설치되기 때문에 수백 ~ 수천 개의 파일이 쌓이게 된다.

node_modules 는 너무 많은 파일을 포함하기 때문에 Git 저장소에 올리면:

저장소 용량이 불필요하게 커지고,
clone / checkout 속도가 느려지고,
충돌 관리가 매우 힘들어진다.

실제 협업 환경에서 이런 문제는 프로젝트 진행에 심각한 부하를 줄 수 있다.

따라서 반드시 .gitignore 파일에 node_modules 디렉토리를 추가해야 한다.

참고로, node_modules 를 제외해도 괜찮은 이유는 package.json 파일과 package-lock.json 파일에 있다.

package.json

어떤 패키지를 설치했는지 목록을 관리.
팀원 / 사용자에게 "이 프로젝트는 이런 라이브러리가 필요하다"를 알려주는 공식 문서 역할.

{
  "dependencies": {
    "dayjs": "^1.11.13"
  }
}

package-lock.json

npm install 을 실행했을 때, 실제로 설치된 정확한 버전과 의존성 트리 구조를 기록하는 파일.
각 패키지가 정확히 어떤 버전으로 설치되었는지 잠금(lock) 역할을 한다.
협업자들이 npm install 만 명령어 실행하면, 이 파일을 기준으로 똑같은 node_modules 구조가 재현 된다.

진행 과정

개발자가 npm install dayjs 실행 → package.json 에 "dayjs": "^1.11.13" 추가.

동시에 package-lock.json도 업데이트 → 정확히 1.11.13이 설치된 사실을 기록.

팀원이 저장소를 clone :

npm install 실행 시,

우선 package-lock.json을 참고해 정확한 버전을 설치.

만약, package-lock.json 이 없다면, package.json 의 버전 범위를 보고 새 버전을 설치.

그래서 두 파일은 서로 보완 관계

package.json → "어떤 라이브러리가 필요한가?" (사람 / 머신 모두 보는 설계도)

package-lock.json → "정확히 어떤 버전으로 설치해야 하나?" (환경 동결 보증서)

치즈

백엔드 개발자를 희망하는 코린이입니다 :)

이전 포스트

[ CSS ] Flexbox 2

다음 포스트

[ JavaScript ] 모듈(+NPM)

모듈(Module)

관련 용어 정리

1. 모듈(Module)

2. 라이브러리(Library)

3. 패키지(Package)

4. 프레임워크(Framework)