Node.js로 ECMAScript 모듈을 사용하는 방법


작성자 : Diogo Souza

원문 : https://blog.logrocket.com/how-to-use-ecmascript-modules-with-node-js/

Kevin Dangoor가 CommonJS 프로젝트를 시작한 후 2009년부터 어떻게 하면 자바스크립트가 웹 브라우저에서 실행되는 것 뿐만 아니라, 범위가 확대되어 백엔드 영역을 포함한 애플리케이션 개발에도 적합한지에 대해 토론이 시작되었다.

이 토론이 성공할 수 있었던 이유는 파이썬, 자바와 같은 언어의 표준 라이브러리를 따른 API 덕분이다. 오늘날 CommonJS로 인해 서버 사이드 애플리케이션용 자바스크립트, 커맨드 입력 도구, GUI 기반의 데스크톱 및 하이브리드 애플리케이션(Titanium, Adobe AIR 등) 등 많은 것들이 존재하게 되었다.

실제로 당신은 require()를 사용할 때마다 CommonJS ES 모듈(역자주 : 이하 CJS)을 사용하거나 Node.js에 기본으로 포함된 ESM(역자주 : ECMAScript Module 약자, 이하 ES 모듈)을 사용하고 있다.

문제는 Node에서 이 두 ES 모듈을 함께 사용할 때이다. CommonJS는 이미 모듈이기 때문에 ESM과 같이 사용될 수 있는 좋은 방법을 찾아야만 한다. CommonJS는 동기식이지만 ESM이 비동기적으로 로드된다는 점을 제외하고 다른 부분들은 문제가 되지 않는다.

Babelwebpack과 같은 도구를 사용할 때는 로드가 동기 방식으로 처리된다. 그래서 브라우저와 네이티브 지원 없이 서버 사이드에서 모두 실행되는 애플리케이션을 위한 동일한 환경을 고려할 때 몇 가지 문제가 있을 것이다.

이 글에서는 브라우저와 서버 사이드와 같이 두 분야를 모두 지원할 수 있는 방법에 대해 알아보고, Node.js에서 얼마나 지원되는지 알아볼 예정이다. ESM을 사용하여 코드베이스를 마이그레이션하는 방법을 몇 가지 예제를 통해 살펴보겠다.

간단한 소개

ES 모듈을 처음 사용하는 사람이라면, 먼저 모듈을 사용하는 방법을 살펴보자. React 또는 Vue.js를 사용했었다면 다음과 같은 코드를 보았을 것이다.

import React, {Fragment} from 'react';
// 또는
import Vue from './vue.mjs';

이 예제는 ES 모듈의 특성 중 기본 모듈(default module) 사용을 잘 보여주고 있다. 다음 코드를 고려해보자.

export default React;

기본 모듈은 한 개만 파일로 내보낼 수 있다. 그래서 첫 번째 예제에서 Fragment{ }로 가져오는 것이다. Fragment를 내보내는 방법은 다음과 같다.

export const Fragment =;

그리고 다음과 같이 당신의 모듈을 만들 수도 있다.

export const itsMine = 'It is my module';

이 코드를 mjs 확장자 파일로 저장하고, React 예제에서 본 것처럼 다른 파일에서 가져올 수 있다.

import { itsMine } from './myESTest.mjs'

alert(itsMine); // 'It is my module' 텍스트가 얼럿으로 뜰 것이다.

mjs 확장자는 js 파일들과 비교했을 때 혼란을 가져올 수 있다. 자바스크립트 명세에 따르면 mjsjs 사이에는 차이가 있다. 예를 들어서, 모듈은 정의상 엄격(use strict와 같이)하다. 자바스크립트 모듈을 구현할 때 많은 체크 사항이 만들어지고 "안전하지 않은" 동작은 금지된다.

jsmjs 싸움은 모듈 또는 스크립트를 다루는 경우에 자바스크립트가 알아야 할 사실까지 이어지지만 제공되는 스펙은 따로 없다. 예를 들어서 CommonJS 스크립트를 가져오는 경우에는 'import from'을 사용할 수 없다(require만 된다). 그래서 각 확장자 파일이 적절한 파일을 가져오도록 강제할 수 있다.

  • mjs import from mjs
  • js require js

그렇다면 다음 시나리오에서는 어떤 일이 일어날까?

  • mjs import from js
  • js require mjs

ES 모듈은 정적(static)인 것으로 알려져 있다. 즉, 런타임이 아닌 컴파일 시간에만 "이동"할 수 있다. 이것이 파일 시작 부분에서 import를 사용해 모듈을 가져오는 이유이다.

mjs import from js

여기서 주목해야 할 첫 번째는 mjs 파일에서 require를 사용할 수 없다는 것이다. 이전에 본 가져오기 구문(import)을 사용해야만 한다.

import itsMine from './myESTest.js'

대신 기본 가져오기(module.exports)가 CommonJS 파일(myESTest.js)로 내보내진 경우에만 가능하다. 어떤가? 간단하지 않은가?

js require mjs

그러나 반대의 경우는 간단하지 않을 수 있다.

const itsMine require('./myESTest.mjs')

생각해보라. ES 모듈은 require 함수를 통해서 가져올 수 없다. 다른 방법으로 import from 구문을 사용해 시도한다면, CommonJS 파일은 import를 사용할 수 없으므로 에러가 발생할 것이다.

import { itsMine } from './myESTest.mjs' // will err

Domenic Denicola는 다양한 방법으로 import() 함수를 통해 ES 모듈을 동적으로 가져오는 방식을 제안했다. 이 방식에 대해서 좀 더 알고 싶다면 위에 링크를 참조하라. 이 방식을 따르면 우리 코드는 다음과 같이 변경할 수 있다.

async function myFunc() {
  const { itsMine } = await import('./myESTest.mjs')
}
myFunc()

그러나 주의할 점은 이 접근 방식은 async 함수를 사용할 수 있다는 것이다. async 함수 대신 여기에 기술된 콜백, 프라미스 등 다른 방식으로도 구현할 수 있다.

주의: 이 방식은 Node 10+부터 사용 가능하다.

ES 모듈을 사용하여 Node.js 실행

여기 ES 모듈과 함께 Node.js를 실행하는 두 가지 방법이 있다.

  1. --experimental-modules 플래그 사용 : 노드에서 제공하는 최소 기능이다.
  2. 라이브러리 사용 : esm은 전체 프로세스를 단순화하고 한 곳에서 구현의 모든 주요 부분을 번들링한다.

Node의 깃헙 리포지터리에서 "새 모듈 구현 계획" 페이지를 찾을 수 있다. 이 페이지에서 Node.js가 ECMAScript 모듈을 지원하는 공식 계획을 볼 수 있다. 계획은 4단계로 나누어져 있는데, 글을 쓰는 시점에는 --experimental-modules 플래그를 사용하지 않아도 될 정도의 희망과 함께 마지막 단계에 와 있다.

-–experimental-modules 플래그 사용

Node 환경에서 ES 모듈을 사용하기 위해 Node.js가 제공하는 첫 번째(공식적인) 방법부터 시작해보자.

이전에 언급했듯이 당신의 PC에 설치된 Node 버전이 10 이상인지 확인해야 한다. NVM의 힘을 빌려 현재 사용하고 있는 버전을 업그레이드하고 관리할 수 있다.

그런 다음 모듈이 어떻게 동작하는지 보여주기 위해 예제를 하나 만들 것이다. 다음 구조로 생성하라.

프로젝트 구조

첫 번째 파일인 hi.mjs는 문자열 파라미터를 연결하여 메세지를 반환하는 단일 함수를 내보낸다.

// hi.mjs 코드
export function sayHi(name) {
    return "Hi, " + name + "!"
}

export 기능을 사용한 것을 눈여겨보라. 두 번째 파일인 runner.mjs는 이전에 만든 함수를 가져오고 콘솔에 메세지를 출력한다.

// runner.mjs 코드
import { sayHi } from './hi.mjs'

console.log(sayHi('LogRocket'))

다음 커맨드를 사용해 코드를 실행해본다.

node --experimental-modules runner.mjs

실행 결과는 다음과 같을 것이다.

테스트 결과

Node에서 실험적으로 사용하는 기능이라고 보여준다.

esm 라이브러리 사용

Babel, webpack 또는 우리가 원하는 곳에서 ES 모듈을 사용하는 데 도움이 되는 다른 도구들의 경우에는 더 간단한 해결 방법이 있다. @std/esm 패키지를 사용하는 것이다.

이 패키지는 기본적으로 Babel이나 다른 번들 도구를 분배하는 모듈 로더로 구성된다. 디펜던시를 필요로하지 않으며 Node.js 4 버전 이상에서 ES 모듈을 굉장히 빠르게 사용할 수 있다. 그리고 Node ESM 명세를 완벽하게 준수한다.

지금부터는 Express.js와 함께 웹 상에서의 다른 hello world를 고려해보자. 우리는 CJS 파일을 만들어서 ESM과 대화할 것이다.

우선 프로젝트의 루트 폴더 안에서 다음 커맨드를 실행한다.

npm init -y
npm install --save @std/esm
npm install --save express

설치 단계를 따라하면서 package.json를 설정한다. 끝나면 다음 두 개 파일을 생성한다.

  • runner.js는 실행 시작점이면서 단일 자바스크립트 파일이다.
  • hi-web.mjs는 hello 함수에 접근하기 위한 Express 코드가 저장된다.

hi-web.mjs 소스 코드를 작성해보자.

import express from "express";
import { sayHi } from "./hi.mjs";

const app = express();

app.get("/", (req, res) => res.json({ "message": sayHi("LogRocket") }));

app.listen(8080, () => console.log("Hello ESM with @std/esm !!"));

여기서는 이전에 작성했던 sayHi() 함수를 내보내는 mjs 파일을 사용하고 있다. 일단 다른 파일에서 mjs를 완벽하게 가져올 수 있다는 사실을 알게 되는 건 그다지 놀라운 일이 아니다. 시작 스크립트로 이 파일을 가져오는 방법을 살펴보자.

// runner.js 코드
require = require("@std/esm")(module);
module.exports = require("./hi-web.mjs").default;

동적 가져오기를 사용하지 않는 경우에는 default를 반드시 사용해야 한다. @std/esm은 require를 재작성하고 사용 중인 Node 버전 모듈에 기능을 추가한다. 이것은 몇몇 인라인과 온 디맨드(on-demand) 변환, 실시간 처리 및 캐싱을 수행한다.

예제를 실행하기 전, 시작점이 될 파일을 package.json 스크립트에 추가한다.

...

"scripts": {
    "start": "node runner.js"
},

npm start 커맨드를 실행하면 브라우저에 다음 결과가 나올 것이다.

브라우저 결과

결론

ES 모듈이 Node로 동작하는 방식에 대해서 더 자세히 알고 싶다면 공식 문서를 확인해보라.

코드를 변환하려고 할 때 다음 중요한 사항들을 기억하라.

  • jsmjs로 마이그레이션 할 때 기본 내보내기(module.exports) 구문을 새로운 ESM export 구문으로 변경한다.
  • 모든 require는 각각의 가져오기 구문으로 변경되어야 한다.
  • 동적으로 require를 사용하려는 경우에는 await import(또는 다른 방식으로 구현한 동적 import() 함수)를 통해 가져오기를 해야 하는 것을 기억하라.
  • 또한 마이그레이션 중인 파일을 참조하는 다른 파일에서는 다른 require를 변경한다.
  • 브라우저에서 mjs 파일을 사용할 때 올바른 미디어 유형(text/javascript 또는 application/javascript)으로 배포해야 한다. 브라우저는 확장자를 신경 쓰지 않기 때문에 확장자가 필요한 것은 Node.js뿐이다. 이것이 Node.js가 파일이 CJS인지 아니면 ES 모듈인지 구분할 수 있는 방법이다.

유익한 정보가 되었으면 좋겠다.


류선임, FE Development Lab2019.08.05Back to list