JavaScript에서 모듈을 사용하면 코드를 더 작고 재사용 가능한 조각으로 나누어 구성, 유지 관리 및 가독성을 향상시킬 수 있습니다. 모듈은 특히 코드베이스가 커질 때 확장 가능한 애플리케이션을 만드는 데 필수적입니다. ES6(ECMAScript 2015)의 도입으로 JavaScript는 서로 다른 파일 간에 코드를 가져오고 내보낼 수 있는 기본 모듈 시스템을 얻었습니다.
모듈은 본질적으로 자체 파일에 저장되는 코드 조각입니다. 이 코드는 애플리케이션의 다른 부분에서 사용할 수 있도록 만들고 싶은 변수, 함수, 클래스 또는 기타 구성을 정의할 수 있습니다.
한 파일의 변수, 함수 또는 클래스를 다른 파일에서 사용할 수 있도록 하려면 내보내기 키워드를 사용합니다. JavaScript의 모듈에서 내보내는 방법에는 named 내보내기와 기본 내보내기
두 가지가 있습니다.이름이 지정된 내보내기를 사용하면 모듈에서 여러 항목(변수, 함수 등)을 내보낼 수 있습니다. 이름을 지정하여 내보냅니다.
// math.js (Module File) export const add = (a, b) => a + b; export const subtract = (a, b) => a - b;
기본 내보내기를 사용하면 함수, 클래스 또는 개체일 수 있는 단일 값을 내보낼 수 있습니다. 기본 내보내기는 일반적으로 모듈의 주요 기능 하나를 내보내려는 경우에 사용됩니다.
// math.js (Module File)
export default function multiply(a, b) {
return a * b;
}
다른 파일의 모듈에서 내보낸 값에 액세스하려면 import 키워드를 사용합니다. 가져오기에는 named imports와 default imports의 두 가지 유형이 있습니다.
이름이 지정된 내보내기를 가져올 때 내보내기 명세서에 사용된 정확한 이름을 사용해야 합니다.
// app.js (Main File)
import { add, subtract } from './math.js';
console.log(add(2, 3)); // Output: 5
console.log(subtract(5, 3)); // Output: 2
기본 내보내기를 가져올 때 가져온 값의 이름을 선택할 수 있습니다.
// app.js (Main File) import multiply from './math.js'; console.log(multiply(2, 3)); // Output: 6
이름이 지정된 가져오기를 동일한 모듈의 기본 가져오기와 결합할 수도 있습니다.
// math.js
export const add = (a, b) => a + b;
export default function multiply(a, b) {
return a * b;
}
// app.js
import multiply, { add } from './math.js';
console.log(multiply(2, 3)); // Output: 6
console.log(add(2, 3)); // Output: 5
함수 및 변수와 동일한 방식으로 클래스를 내보내고 가져올 수 있습니다.
// math.js (Module File) export const add = (a, b) => a + b; export const subtract = (a, b) => a - b;
JavaScript는 런타임에 조건부로 모듈을 로드할 수 있는 동적 가져오기도 지원합니다. 이는 필요할 때만 모듈을 로드하여 초기 로드 시간을 줄이는 코드 분할에 유용할 수 있습니다.
// math.js (Module File)
export default function multiply(a, b) {
return a * b;
}
최신 브라우저에서는 ES6 모듈을 기본적으로 사용할 수 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
