ES 모듈로 JavaScript 코드 향상: 내보내기, 가져오기 및 그 이상
- WBOY원래의
- 2024-07-21 13:44:07793검색
JavaScript 모듈은 JavaScript 코드를 구성하고 재사용하는 방법입니다. 모듈을 사용하면 코드를 더 작고 관리 가능한 조각으로 나눌 수 있으며, 필요에 따라 이를 가져와서 애플리케이션의 다른 부분에서 사용할 수 있습니다. 이 모듈식 접근 방식은 깔끔한 코드베이스를 유지하는 데 도움이 되고, 디버그가 더 쉬워지며, 코드 재사용성이 향상됩니다.
ES 모듈과 CommonJS
JavaScript 생태계에는 다양한 모듈 시스템이 있습니다. ES 모듈(ESM)은 ECMAScript 사양의 표준으로 주로 브라우저에서 사용되며 Node.js에서 점점 더 지원됩니다. CommonJS는 Node.js에서 전통적으로 사용되었던 또 다른 모듈 시스템입니다.
ES 모듈(ESM)
ES 모듈(ESM)은 ECMAScript 2015(ES6)에서 도입된 JavaScript의 표준화된 모듈 시스템입니다. 서로 다른 파일 간에 함수, 개체 및 기본 요소를 가져오고 내보낼 수 있으므로 코드를 더 잘 구성하고 재사용할 수 있습니다. 이 모듈 시스템은 브라우저와 Node.js를 포함한 최신 JavaScript 환경에서 널리 지원됩니다.
내보내기 및 가져오기
내보내기 키워드는 현재 모듈 외부에서 액세스할 수 있는 변수와 함수에 레이블을 지정하여 애플리케이션의 다른 부분에서 재사용할 수 있도록 합니다. import 키워드를 사용하면 다른 모듈에서 이러한 기능을 가져올 수 있으므로 모듈식 프로그래밍 및 코드 재사용이 가능합니다.
명명된 내보내기를 사용하면 모듈에서 여러 항목을 내보낼 수 있습니다. 각 항목은 내보낸 이름과 동일한 이름으로 가져와야 합니다.
//modules.js
const greet = () => {
console.log('Hello World');
};
export { greet};
이름이 지정된 내보내기를 가져올 때 내보내기와 동일한 이름을 사용해야 합니다.
import { greet } from './module.js';
greet(); // Hello, World!
기본 내보내기를 사용하면 모듈당 단일 기본 내보내기가 허용됩니다. 항목은 어떤 이름으로도 가져올 수 있습니다.
//modules.js
const greet = () => {
console.log('Hello World');
};
export default greet;
기본 내보내기를 가져올 때 어떤 이름이든 사용할 수 있습니다.
import message from './module.js'; message(); // Hello, World!
HTML에서 모듈 사용
브라우저에서 모듈을 사용하는 경우 해당 모듈을 HTML 파일에 포함해야 합니다.