
JavaScript 모듈은 코드를 구조화하고 재사용 가능한 조각으로 나누는 기능을 제공하는 개념이다. 이를 통해 코드를 여러 파일로 나누고, 필요한 부분을 다른 파일에서 가져와 사용할 수 있는데, 이러한 모듈화는 코드의 유지보수성과 확장성을 향상시키며, 여러 개발자가 협업할 때 코드를 구성하기 쉽게 만든다.
ES6(ECMAScript 2015)부터 JavaScript에는 공식적인 모듈 시스템이 도입되었는데, ES6 모듈은 기존의 다른 모듈 시스템과 달리 자바스크립트 언어 자체에 내장되어 있다.
모듈은 export와 import 문을 사용하여 정의하고 가져오는데 아래와 같다.
모듈 내보내기 (Export):
// mymodule.js
// 변수, 함수, 클래스 등을 내보내기
export const myVariable = 'Hello, World!';
export function myFunction() {
console.log('This is a function.');
}
모듈 가져오기 (Import):
// 다른 파일에서 mymodule.js 모듈 사용
import { myVariable, myFunction } from './mymodule.js';
console.log(myVariable); // 'Hello, World!'
myFunction(); // 'This is a function.'을 출력하는 함수 호출
이와 같이 모듈을 사용하면 코드를 논리적으로 나누고 각 부분을 필요에 따라 가져와 사용할 수 있다. 이는 코드의 가독성을 높이고 유지보수를 용이하게 만든다.
.mjs 확장자:
.mjs 확장자는 JavaScript 모듈 파일을 나타낸다. JavaScript 모듈은 코드를 여러 파일로 분리하여 구성하고 재사용 가능한 코드를 작성할 수 있게 해주는 기능을 제공한다. .mjs 파일은 ES6(ECMAScript 2015) 이상의 JavaScript 모듈 시스템을 사용하는 파일을 가리킨다.
기존의 .js 파일은 CommonJS나 AMD와 같은 예전의 모듈 시스템을 사용하는데, .mjs 파일은 최신 ECMAScript 모듈 시스템에 따라 작성된 파일이다. .mjs 파일은 기본적으로 strict 모드로 실행되며, import 및 export 문을 사용하여 모듈 간에 코드를 공유한다.
예를 들어, 다음과 같은 형식으로 .mjs 파일에서 모듈을 사용할 수 있다:
// mymodule.mjs
// 모듈 내부에서 변수 또는 함수 정의
const myVariable = 'Hello, World!';
function myFunction() {
console.log(myVariable);
}
// 모듈 밖에서 export
export { myVariable, myFunction };
다른 파일에서 이 모듈을 사용하려면 다음과 같이 import하여 사용할 수 있다:
// 다른 파일에서 mymodule.mjs 모듈 사용
import { myVariable, myFunction } from './mymodule.mjs';
console.log(myVariable); // 'Hello, World!'
myFunction(); // 'Hello, World!'를 출력하는 함수 호출
요약하면, .mjs 파일은 ECMAScript 모듈을 사용하는 JavaScript 파일을 나타내며, import/export 구문을 통해 모듈 간에 코드를 공유할 수 있다.
'Javascript' 카테고리의 다른 글
자바스크립트 배열의 진실(밀집배열, 희소배열) (25) | 2023.11.15 |
---|---|
What is 'This'? (25) | 2023.11.15 |
형 변환은 Type Conversion일까? Type Casting일까? (19) | 2023.11.13 |
TDZ(Temporal Dead Zone)를 통해 밝혀진 let과 const의 호이스팅(hoisting) (18) | 2023.11.12 |
Const 키워드를 사용 해도 값의 재할당이 일어날 수 있을까? (19) | 2023.11.11 |