자바스크립트 모듈은 코드를 모듈화하고 재사용 가능한 단위로 분리하는 데 도움이 되는 기술입니다. 모듈을 사용하면 코드를 구성 요소별로 분리하여 유지 관리하기 쉽게 만들 수 있습니다. 이를테면, 모듈을 사용하면 함수, 변수, 클래스 등을 정의하고 필요한 곳에서 가져와 사용할 수 있습니다.

모듈의 기본 구조

모듈은 일반적으로 파일 하나에 정의됩니다. 파일의 확장자는 ‘.js’입니다.

// myModule.js

// 변수와 함수들을 내보내기
export const name = 'John';
export function sayHello() {
    console.log(`Hello, ${name}!`);
}

// 모듈에서 사용할 변수와 함수들을 가져오기
import { name, sayHello } from './myModule.js';

sayHello(); // Hello, John!

모듈의 내보내기 및 가져오기

모듈은 내보내기와 가져오기를 통해 기능을 공유합니다.

모듈에서 내보내기

모듈에서 변수, 함수, 클래스 등을 다른 코드에서 사용할 수 있도록 내보낼 수 있습니다. 다음과 같이 ‘export’ 키워드를 사용하여 내보냅니다.

// myModule.js

export const name = 'John';
export function sayHello() {
    console.log(`Hello, ${name}!`);
}

모듈에서 가져오기

내보낸 모듈의 변수, 함수, 클래스 등을 다른 코드에서 사용하려면 ‘import’ 키워드를 사용하여 가져옵니다.

// main.js

import { name, sayHello } from './myModule.js';

sayHello(); // Hello, John!

모듈의 종류

ES6부터 자바스크립트에는 다양한 모듈 타입이 추가되었습니다. 일반적으로 사용되는 모듈 타입에는 CommonJS, AMD, UMD, ES6 등이 있습니다. 이들 모듈 타입은 각각의 특징과 장단점을 가지고 있으므로 상황에 맞게 선택하여 사용해야 합니다.

결론

자바스크립트 모듈은 코드의 구조를 개선하고 재사용 가능한 단위로 코드를 분리하는 데 도움이 되는 강력한 기능입니다. 모듈을 사용하면 코드 유지 보수성과 재사용성을 향상시킬 수 있으며 개발자들 간의 협업을 원활하게 할 수 있습니다.

#javascript #모듈