<JavaScript> 모듈(Module)과 import/export

모듈(Module)이란 무엇인가요?

 

모듈이란, 독립적인 기능 또는 연관된 기능들을 하나의 파일로 구분하여 관리하는 방법입니다.

이렇게 하면 코드를 쉽게 관리하고, 필요한 기능을 재사용할 수 있어요. 또한, 변수나 함수들의 범위가 충돌하는 것을 방지할 수 있습니다.

 

JavaScript는 과거에는 모듈 시스템이 따로 없었지만, ES6(ES2015) 이후로 공식 모듈 시스템이 도입되었습니다.

이제 import와 export 문을 사용해 모듈을 가져오거나 내보낼 수 있죠.

 

어떻게 모듈을 생성하고 내보낼 수 있나요?

모듈을 생성하기 위해서는 먼저 파일을 하나 만들어서 필요한 함수나 변수들을 작성해야 합니다.

그리고 export 키워드를 사용해서 해당 함수나 변수를 외부에서 접근할 수 있도록 해주면 됩니다.

 

예를 들어, 다음과 같이 calculator.js 파일을 만들어 보겠습니다.

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

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

위 코드에서 export 키워드를 사용해서 add와 subtract 함수를 내보내고 있어요.

 

다른 파일에서 모듈을 가져와서 사용하는 방법은?

다른 파일에서 사용하고 싶은 모듈이 있다면, import 문을 사용해서 모듈을 불러올 수 있어요.

예를 들어, 방금 생성한 calculator.js 모듈을 가져와서 사용해보겠습니다.

 

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

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

 

이렇게 import 문을 사용하면 외부 모듈에서 내보낸 함수나 변수들을 사용할 수 있어요.

다만, 주의해 할 점은 모듈의 경로를 정확하게 작성해야 한다는 점입니다. 파일 확장자도 포함해서 경로를 입력해주세요.

 

전체 모듈을 내보내거나 가져오는 방법

예제에서는 개별 함수를 내보내고 가져왔는데요, 전체 모듈을 한 번에 내보내거나 가져올 때는떻게 해야할까요?

바로 *를 사용하면 됩니다.

 

예를 들어, calculator 모듈 전체를 가져오려면 다음과 같 작성합니다.

// app.js
import * as calculator from './calculator.js';

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

이렇게 사용하면 가져온 모듈이 객체 형태로 사용가능하고, 모듈 내의 함수를 객체의 메서드처럼 호출할 수 있어요.

 

감사합니다.