JavaScript 입문 도구

JavaScript 모듈 이해

JavaScript 모듈 이해 — 초급

모듈 이해

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

JavaScript에서 모듈은 코드의 재사용성과 유지보수성을 높여주는 중요한 개념입니다. 실무에서는 다양한 기능을 가진 대규모 애플리케이션을 개발할 때, 코드를 모듈화하여 관리하는 것이 필수적입니다. 모듈을 사용하지 않으면, 모든 코드가 한 파일에 들어가게 되어 가독성이 떨어지고, 버그를 찾고 수정하는 것이 어려워집니다. 또한, 각 기능을 재사용하기 위해 매번 복사하는 불편함도 겪게 됩니다.

모듈을 잘 이해하고 활용하지 않으면, 프로젝트가 복잡해져 나중에 유지보수를 하기가 힘들어질 수 있습니다. 따라서, 모듈을 이해하고 활용하는 것은 현대 JavaScript 개발에 있어 매우 중요한 기술입니다.

2. 핵심 개념 설명

모듈은 독립적인 코드 조각으로, 각각의 모듈은 특정 기능을 수행합니다. 간단히 말해, 모듈은 코드의 "상자"와 같아서 내부의 내용을 숨기고, 필요한 것만 외부에 드러내는 역할을 합니다.

용어	설명
모듈	독립적으로 기능을 수행하는 코드의 집합
익스포트	모듈의 내부 요소를 외부에서 사용할 수 있도록 하는 방법
임포트	다른 모듈의 기능을 현재 모듈로 가져오는 방법

3. 기본 코드 예제

아래는 간단한 모듈을 정의하고 사용하는 예제입니다.

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

export function subtract(a, b) {
    return a - b;
}

// app.js
import { add, subtract } from './math.js';

console.log(add(5, 3));         // 8
console.log(subtract(5, 3));    // 2

실행 결과

8
2

코드 한 줄씩 동작 설명

export function add(a, b) { ... } : add 함수를 모듈 외부에서 사용할 수 있도록 내보냅니다.
import { add, subtract } from './math.js'; : math.js 모듈에서 add와 subtract 함수를 가져옵니다.
console.log(add(5, 3)); : add 함수에 5와 3을 전달하고 결과를 출력합니다.
console.log(subtract(5, 3)); : subtract 함수에 5와 3을 전달하고 결과를 출력합니다.

4. 실전 활용 예제

예제 1: 쇼핑몰 장바구니 구현

쇼핑몰에서 장바구니 기능을 모듈화하여 구현할 수 있습니다.

// cart.js
let cart = [];

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

export function viewCart() {
    return cart;
}

// app.js
import { addItem, viewCart } from './cart.js';

addItem('사과');
addItem('바나나');
console.log(viewCart()); // ['사과', '바나나']

예제 2: 사용자 인증 모듈

사용자 인증을 위한 모듈을 작성할 수 있습니다.

// auth.js
let users = [];

export function register(username) {
    users.push(username);
    return ${username} 등록 완료;
}

// app.js
import { register } from './auth.js';

console.log(register('홍길동')); // 홍길동 등록 완료

5. 흔한 실수와 주의사항

실수 1: 모듈 경로 오류

잘못된 코드:

    import { add } from './math'; // 확장자를 명시하지 않음

올바른 코드:

    import { add } from './math.js'; // 확장자를 명시함

실수 2: 익스포트 누락

잘못된 코드:

    function multiply(a, b) {
        return a * b; // export 누락
    }

올바른 코드:

    export function multiply(a, b) {
        return a * b; // export 추가
    }

6. 정리

모듈은 독립적인 코드 조각으로, 코드의 재사용과 유지보수성을 높인다.
익스포트와 임포트를 통해 모듈 간의 기능을 공유할 수 있다.
모듈을 활용하면 대규모 애플리케이션에서도 코드 관리가 용이하다.

다음에 학습하면 좋은 주제는 비동기 프로그래밍, ES6 문법, 클래스와 객체지향 프로그래밍입니다.

학습