JavaScript 기초 <17. 모듈(Module) 시스템 (import/export, CommonJS, ESM)>

자바스크립트 JavaScript

17. 모듈(Module) 시스템 (import/export, CommonJS, ESM) 

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. 모듈(Module)이란?

모듈(Module)이란 코드를 여러 파일로 분리하여 관리할 수 있도록 하는 개념입니다.
JavaScript에서는 ES6 이후 import/export 문법을 사용하여 모듈을 지원하며,
Node.js에서는 CommonJS 방식(require)을 기본적으로 사용합니다.

📌 모듈을 사용하면 코드의 재사용성을 높이고, 유지보수를 쉽게 할 수 있다!

---

 

2. 모듈을 사용하는 이유

✅ 1) 코드 재사용 및 유지보수 용이
✅ 2) 전역 변수 충돌 방지 (각 파일이 독립적으로 실행됨)
✅ 3) 파일 단위로 코드를 나누어 가독성을 향상

---

 

3. ES6 모듈 시스템(import/export) 기본 문법

✅ 1) 모듈 내보내기 (export)
export 키워드를 사용하면 함수를 다른 파일에서 사용할 수 있습니다.

// math.js (모듈 파일)
export function add(a, b) {
    return a + b;
}

export const PI = 3.14;

✅ 2) 모듈 가져오기 (import)
다른 파일에서 import 키워드를 사용하여 모듈을 가져올 수 있습니다.

// main.js (메인 파일)
import { add, PI } from "./math.js";

console.log(add(2, 3)); // 5
console.log(PI); // 3.14

📌 import/export를 사용하면 코드가 모듈화되어 유지보수가 쉬워짐!

---

✅ 여기까지 JavaScript의 모듈 개념과 기본 문법을 배웠습니다!
👉 "그렇다면, CommonJS 방식의 require와 module.exports는 어떻게 동작할까?"
✅ 2부에서 CommonJS, ESM, default export 차이점까지 상세히 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. CommonJS 모듈(require) vs ESM(import/export)

✅ 1) CommonJS 방식 (require/module.exports)
Node.js에서는 require()와 module.exports를 사용하여 모듈을 불러올 수 있습니다.

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

module.exports = { add };

// main.js (CommonJS 방식)
const { add } = require("./math");

console.log(add(5, 5)); // 10

✅ 2) ES6 모듈 방식 (import/export)

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

// main.js (ES6 방식)
import { add } from "./math.js";
console.log(add(5, 5)); // 10

📌 CommonJS는 Node.js에서 기본적으로 사용되며, ES6 모듈은 브라우저에서도 사용 가능함!

---

 

2. default export와 named export 차이점

✅ 1) default export
한 모듈에서 하나의 기본 값을 내보낼 때 사용합니다.

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

// main.js
import add from "./math.js";
console.log(add(3, 4)); // 7

✅ 2) named export
여러 개의 값을 내보낼 때 사용합니다.

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from "./math.js";
console.log(add(3, 4)); // 7
console.log(subtract(7, 4)); // 3

📌 default export는 한 개만 가능, named export는 여러 개 가능함!

---

 

✅ 지금까지 모듈 시스템의 종류와 사용법을 상세히 배웠습니다!
👉 "그렇다면, JSON 데이터는 JavaScript에서 어떻게 다룰까?"
✅ 다음 회차에서 JSON과 JavaScript의 활용법을 배워봅시다! 🚀