mjs란? | SOITZ

mjs는 Module JavaScript의 줄임말로, ECMAScript 모듈 (ESM)을 사용하여 JavaScript 코드를 Modular하게 작성하기 위한 파일 포맷입니다. 일반적으로 .mjs 확장자를 사용하여, 기존의 .js 파일과 구분합니다. 이를 통해 Node.js 또는 브라우저 환경에서 모듈 기능을 사용할 수 있습니다.

.mjs 확장자는 주로 Node.js에서 CommonJS 모듈 시스템 (require와 module.exports를 사용하는 방식)과의 명확한 구분을 위해 도입되었습니다. ECMAScript 모듈은 import와 export 문을 사용하여 모듈 간의 의존성을 관리합니다.

`mjs` 파일 사용방법

모듈 생성

자바스크립트 파일을 생성하고 확장자를 .mjs로 설정합니다. 해당 파일 내에서는 export 키워드를 사용하여 변수, 함수, 클래스 등을 내보낼 수 있습니다.

// example.mjs
export function helloWorld() {
  console.log('Hello, world!');
}
export const name = 'ben.h / Env기술';

모듈 사용

다른 .mjs 파일 내에서 import 문을 사용하여 필요한 모듈을 가져올 수 있습니다.

// main.mjs
import { helloWorld, name } from './example.mjs';

helloWorld(); // 출력: Hello, world!
console.log(name); // 출력: 해당 이름

Named Export

반면에, 이름을 가진 내보내기 (named export)는 여러 값을 모듈에서 내보낼 수 있게 해줍니다. 이 값들은 모두 고유한 이름을 가지며, 모듈을 가져올 때 해당 이름을 사용해 지정적으로 가져와야 합니다.

// moduleB.mjs
export function test1() {
  console.log('이름을 가진 내보내기 함수 1');
}

export const test2 = () => {
  console.log('이름을 가진 내보내기 함수 2');
};

다른 모듈에서 이름을 가진 내보내기를 가져오기

// main.mjs
import { test1, test2 } from './moduleB.mjs'; // 중괄호로 각 항목을 명시

test1(); // 출력: 이름을 가진 내보내기 함수 1
test2(); // 출력: 이름을 가진 내보내기 함수 2

Default Export

모듈에서 단일 항목을 export default로 내보내면, 해당 모듈을 가져올 때 특별한 이름 없이 직접 가져올 수 있습니다. 모듈은 오직 하나의 default 내보내기만 가질 수 있습니다. 보통 이 방식은 라이브러리나 프레임워크가 하나의 주된 기능을 제공할때 사용합니다.

// moduleA.mjs
function test() {
  console.log('기본 내보내기 함수');
}

export default test;

다른 모듈에서 export default를 사용해 가져오기

// main.mjs
import myTest from './moduleA.mjs'; // 괄호 없이 사용

myTest(); // 출력: 기본 내보내기 함수

export default와 named export 사이의 주된 차이점은 다음과 같습니다:

Default Export:
- 하나의 모듈에서 하나만 있을 수 있습니다.
- 가져올 때 중괄호가 필요 없으며, 원하는 이름을 자유롭게 사용할 수 있습니다.
- 일반적으로 모듈의 메인 기능이나 객체를 내보낼 때 사용됩니다.
Named Export:
- 하나의 모듈에서 여러 개가 있을 수 있습니다.
- 가져올 때 내보낸 항목의 정확한 이름을 중괄호 내에 지정해야 합니다.
- 모듈에 있는 여러 기능이나 값을 개별적으로 내보내고 싶을 때 사용됩니다.

이 두 가지 방식은 서로 호환되므로 한 모듈 내에서 default 내보내기와 여러 named export들을 함께 사용할 수 있으나, export default로 내보내진 값은 유일한 디폴트 값으로 처리됩니다. 사용자는 모듈을 사용할 때 이러한 차이를 인지하고 원하는 방식으로 요소들을 가져와야 합니다.

Node.js에서 mjs 실행하기

.mjs 파일은 Node.js에서 ES 모듈로 인식됩니다. 사용하기 위해서는 다음과 같은 방법을 따릅니다:

.mjs 확장자를 사용하여 파일을 생성합니다.
ES 모듈 구문을 사용하여 모듈을 작성합니다.
import와 export 키워드를 사용하여 모듈을 가져오거나 내보냅니다.

예를 들어, myModule.mjs라는 파일에 ES 모듈을 정의하고 사용할 수 있습니다.

// myModule.mjs
export function hello() {
  console.log('Hello from ES Module!');
}

다른 파일에서 이 모듈을 가져와 사용하려면 다음과 같이 import합니다.

// main.mjs
import { hello } from './myModule.mjs';

hello(); // 출력: Hello from ES Module!

명령어를 통해 .mjs 파일을 실행할 때는 다음과 같이 합니다.

node main.mjs

단, Node.js에서 ECMAScript 모듈을 사용하기 위해 다음과 같은 조건을 충족해야 합니다:

Node.js 버전이 ECMAScript 모듈을 지원하는지 확인합니다 (Node.js 버전 13.2.0 이상 또는 LTS 버전에서는 "type": "module" 설정을 사용하여 ESM 지원).
package.json에 "type": "module"을 추가하여 해당 프로젝트의 JS 파일들을 ESM으로 취급합니다.
.mjs 확장자를 가진 파일로 모듈을 작성하거나, .js 확장자인 경우 "type": "module" 설정을 사용합니다.

브라우저에서 `.mjs` 사용하기

현대 브라우저는 대부분 ES 모듈을 지원하므로 .mjs 확장자를 사용하여 모듈을 작성하고 직접 불러올 수 있습니다. 브라우저에서 ES 모듈을 사용하는 방법은 다음과 같습니다:

.mjs 확장자로 파일을 생성합니다.
ES 모듈 구문을 사용하여 코드를 작성합니다.
HTML 파일 내에서 <script> 태그에 type="module" 속성을 추가하여 모듈을 로드합니다.

// myModule.mjs
export function hello() {
  console.log('Hello from ES Module!');
}

// main.mjs
import { hello } from './myModule.mjs';

hello(); // 콘솔에 "Hello from ES Module!" 출력

<!-- index.html -->
<script type="module" src="main.mjs"></script>

이것은 모듈 스크립트가 비동기로 로드되고, CORS 정책을 따르며, 스트릭트 모드(strict mode) 실행 조건을 가진다는 것을 의미합니다.

모듈 기반의 자바스크립트 개발은 코드의 재사용성과 유지 보수성을 향상시킵니다. 따라서 현대의 자바스크립트 애플리케이션 개발에 있어서 필수적인 기법 중 하나로 간주됩니다

mjs 파일 사용방법