JavaScript 중급 도구

JavaScript 모듈 시스템 (CommonJS, ES6)

JavaScript 모듈 시스템 (CommonJS, ES6) — 중급

모듈 시스템 (CommonJS, ES6)

1. 도입 (왜 배워야 하는가)

JavaScript의 모듈 시스템은 애플리케이션의 구조를 효율적으로 관리하는 데 필수적입니다. 모듈을 사용하면 코드를 여러 파일로 나누어 관리할 수 있어, 코드의 재사용성과 유지보수성이 향상됩니다. 특히, 대규모 프로젝트에서는 팀원 간의 협업이 중요하기 때문에 모듈 시스템을 이해하지 못하면 코드 충돌, 버그 발생 등이 빈번해질 수 있습니다. 예를 들어, 동료와 같은 함수 이름을 사용하게 되면 의도치 않은 오류가 발생할 수 있습니다.

모듈 시스템을 모르면 다음과 같은 문제가 발생할 수 있습니다:

코드 재사용성이 떨어져 중복 코드가 발생
네임스페이스 충돌로 인한 오류
코드 유지보수의 어려움

2. 핵심 개념 설명

CommonJS

CommonJS는 서버 사이드 JavaScript에서 주로 사용되는 모듈 시스템입니다. 각 파일은 하나의 모듈로 간주되며, require 함수를 사용하여 다른 모듈을 불러옵니다. 비유하자면, CommonJS는 도서관에서 책을 빌려 읽는 것과 같습니다. 필요한 책(모듈)을 찾아서 읽고, 읽은 후 반납하는 구조입니다.

ES6 모듈

ES6 모듈은 최신 JavaScript 표준으로, import와 export 키워드를 사용하여 모듈을 정의합니다. ES6 모듈은 비동기적으로 로드할 수 있어 웹 성능을 개선하는 데 유리합니다. 비유하자면, ES6 모듈은 온라인 서점에서 원하는 책을 주문하는 구조와 유사합니다. 원하는 책을 클릭하여 주문하고, 필요한 순간에 바로 읽을 수 있습니다.

개념	CommonJS	ES6 모듈
사용 위치	주로 서버 측	클라이언트 및 서버 측
로딩 방식	동기적	비동기적
문법	`require`, `module.exports`	`import`, `export`

3. 기본 코드 예제

CommonJS 예제

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

module.exports = add; // add 함수를 모듈로 내보냄

// app.js
const add = require('./math'); // math.js에서 add 함수를 가져옴
console.log(add(2, 3)); // 5

실행 결과:

math.js 파일에서 add 함수를 정의하고, module.exports를 사용해 함수를 내보냅니다.
app.js에서 require를 사용해 math.js의 add 함수를 가져옵니다.
add(2, 3) 호출 시, 5가 출력됩니다.

ES6 모듈 예제

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

// app.js
import { add } from './math.js'; // math.js에서 add 함수를 가져옴
console.log(add(2, 3)); // 5

실행 결과:

math.js 파일에서 add 함수를 정의하고 export로 내보냅니다.
app.js에서 import를 사용해 math.js의 add 함수를 가져옵니다.
add(2, 3) 호출 시, 5가 출력됩니다.

4. 실전 활용 예제

예제 1: 쇼핑몰의 장바구니 기능

쇼핑몰에서 장바구니 기능을 구현할 때, 상품과 관련된 로직을 각각의 모듈로 나누어 관리할 수 있습니다.

// cart.js
let cart = [];

export function addToCart(item) {
    cart.push(item);
}

export function getCart() {
    return cart;
}

// app.js
import { addToCart, getCart } from './cart.js';

addToCart('사과');
addToCart('바나나');
console.log(getCart()); // ['사과', '바나나']

상황 설명: 위 코드는 장바구니에 상품을 추가하고, 현재 장바구니의 내용을 출력합니다.

예제 2: 사용자 인증 시스템

사용자 정보를 처리하는 모듈을 만들 수 있습니다.

// user.js
let users = [];

export function addUser(username) {
    users.push(username);
}

export function getUsers() {
    return users;
}

// app.js
import { addUser, getUsers } from './user.js';

addUser('john_doe');
console.log(getUsers()); // ['john_doe']

상황 설명: 위 코드는 사용자 정보를 추가하고, 현재 등록된 사용자 목록을 출력합니다.

5. 흔한 실수와 주의사항

실수 1: `require`와 `import` 혼용

잘못된 코드:

const add = require('./math.js'); // CommonJS 방식인데 .js 확장자 사용

올바른 코드:

import { add } from './math.js'; // ES6 모듈 방식에 맞게 사용

실수 2: 모듈 경로 오류

잘못된 코드:

const add = require('math'); // 경로가 잘못됨

올바른 코드:

const add = require('./math'); // 현재 디렉토리에서 가져옴

6. 정리

모듈 시스템은 코드의 재사용성과 유지보수성을 향상시킵니다.
CommonJS는 서버 측에서 주로 사용되고, ES6 모듈은 클라이언트와 서버에서 모두 사용됩니다.
require와 import의 문법 차이를 명확히 이해해야 합니다.
모듈 경로를 정확히 지정하는 것이 중요합니다.

다음에 학습하면 좋은 주제

비동기 프로그래밍 (Promise, async/await)
패키지 관리 도구 (npm, yarn)
TypeScript와 모듈 시스템의 차이

학습