ECMAScript 모듈(.mjs): JavaScript의 미래를 위한 건축 블록

.mjs 파일이란?

.mjs는 ECMAScript 모듈(ESM)을 위한 JavaScript 파일 확장자입니다. 이 확장자가 붙은 파일은 ES 모듈로 처리되며, import와 export 문법을 사용할 수 있습니다. 이는 코드 분석, 최적화, 트리 쉐이킹(Tree Shaking) 같은 고급 기능을 제공합니다.

CommonJS와의 차이점

Node.js에서는 기본적으로 JavaScript 파일을 CommonJS 모듈로 취급합니다. CommonJS는 require()와 module.exports를 사용해 모듈을 가져오고 내보냅니다.

// CommonJS
// Importing
const fs = require('fs');

// Exporting
module.exports = function doSomething() {
  //...
}

그러나 Node.js 버전 12.x 이상에서는 .mjs 확장자를 통해 ES 모듈을 네이티브로 사용할 수 있습니다.

// ECMAScript Module (.mjs)
// Importing
import fs from 'fs';

// Exporting
export function doSomething() {
  //...
}

장점과 사용 사례

.mjs 파일은 다음과 같은 이점을 제공합니다:

• 정적 분석: import와 export 문은 정적이므로, 런타임 이전에 어떤 모듈이 필요한지 알 수 있습니다.

• 최적화: 더 나은 정적 분석은 더 나은 코드 최적화를 가능하게 합니다.

• 트리 쉐이킹: 사용되지 않는 코드를 제거하여 번들 크기를 줄일 수 있습니다.

• 선언적 코드: import와 export 문을 사용하면, 의존성 관리가 더 명확하고 선언적이 됩니다.

정적 분석

JavaScript에서 import와 export 문을 사용하여 모듈을 관리할 때, 이 문들은 코드가 실행되기 전에 처리됩니다. 이를 "정적 분석"이라고 부르는데, 이는 다음과 같은 이유로 중요합니다:

• 예측 가능성: 정적 분석을 통해 어떤 모듈이 필요한지 미리 알 수 있습니다. 이로 인해 모듈 의존성을 더 쉽게 추적하고, 코드를 더 예측 가능하게 만듭니다.

• 최적화: 정적 분석은 빌드 과정에서 여러 최적화를 가능하게 합니다. 예를 들어, "트리 쉐이킹(Tree Shaking)" 같은 기술은 사용되지 않는 코드를 제거하여 불필요한 코드를 최소화할 수 있습니다.

• 오류 감지: 런타임 이전에 모듈 의존성을 알 수 있으므로, 빠진 모듈이나 오류를 미리 감지할 수 있습니다. 이를 통해 런타임 오류의 가능성을 줄일 수 있습니다.

• 보안: 런타임에 동적으로 코드를 불러오는 것은 보안 문제를 야기할 수 있습니다. 정적 분석을 사용하면 이러한 유형의 공격을 피할 수 있습니다.

• 빠른 로딩과 초기화: 정적 분석으로 어떤 모듈이 필요한지 미리 알고, 불러와야 할 모듈을 최적화할 수 있으므로 애플리케이션의 로딩과 초기화가 빨라집니다.

이러한 이유로, 최근의 프런트엔드 및 백엔드 JavaScript 개발에서는 ES6 모듈 문법을 권장하고 있습니다. 이 문법은 모듈 간의 의존성을 명확하게 하여 유지보수와 코드의 품질을 향상시킵니다.

사용 사례

next.config.mjs 파일

import { withContentlayer } from "next-contentlayer"

import "./env.mjs"

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ["avatars.githubusercontent.com"],
  },
  experimental: {
    appDir: true,
    // serverComponentsExternalPackages: ["@prisma/client"],
  },
}

export default withContentlayer(nextConfig)

next.config.mjs 파일에서 .mjs 확장자는 ECMAScript 모듈을 나타냅니다. ECMAScript 모듈은 JavaScript의 모던한 모듈 시스템을 사용하며, import와 export 문을 사용하여 모듈을 가져오고 내보냅니다. 이는 Node.js 환경에서 CommonJS 모듈 시스템과 구분되는 방법 중 하나입니다.

next.config.mjs 파일 내용 분석한 내용은 아래와 같습니다.

• import { withContentlayer } from "next-contentlayer": next-contentlayer 패키지에서 withContentlayer 함수를 가져옵니다. 이는 ECMAScript 모듈의 import 문법을 사용하고 있습니다.
• import "./env.mjs": 환경 변수 설정을 담은 env.mjs 파일을 가져옵니다.
• const nextConfig = {...}: Next.js의 설정을 객체로 정의합니다.
• export default withContentlayer(nextConfig): withContentlayer 함수를 사용하여 Next.js 설정을 확장하고 이를 내보냅니다. 이것도 ECMAScript 모듈의 export 문법을 사용합니다.

이렇게 .mjs 확장자와 ECMAScript 모듈 문법을 사용하면, 정적 분석의 이점을 취하고 모듈의 명시성을 높일 수 있습니다. 따라서, 현대적인 JavaScript 및 Node.js 프로젝트에서는 .mjs 파일과 ECMAScript 모듈 문법을 권장하는 추세입니다.

결론

.mjs는 JavaScript의 미래를 위한 중요한 건축 블록 중 하나입니다. CommonJS와의 호환성을 유지하면서도 더 나은 최적화와 코드 관리를 가능하게 해 줍니다. 현대 웹 애플리케이션과 서버 사이드 개발에 있어서 이 기술은 점점 더 중요해질 것입니다.

모듈 시스템에 관한 선택은 프로젝트의 성공에 큰 영향을 미칠 수 있으므로, .mjs와 ECMAScript 모듈을 신중히 고려하는 것이 좋습니다.