Node.js 에서 import/export 사용하기

원래 기존까지는 Node.js 개발 환경에서 모듈을 불러올 때 기존의 자바스크립트가 지원하는 방식대로 require / exports 를 사용했다. 그러나 React나 Vue를 쓴 코드에서는 import react from 'react'와 같이 모듈을 export로 정의하고 import로 불러오는 코드들을 볼 수 있었다.

require과 import의 차이

require / exports 는 기존까지 Node.js에서 사용되던 CommonJs 모듈 방식으로, module.exports 객체에 모듈 전체를 치환하여 내보내고, require을 통해 해당 모듈을 불러오는 방식이다. 따라서 CommonJs 모듈 방식으로는 전체 모듈을 다 불러오게 되고, 불필요한 모듈이 로드되기도 하고 모듈 내에서 어떤 부분을 사용했는지도 확인할 수 없다.

때문에 ES6(ECMA2015)부터는 import / export 라는 방식으로 모듈을 불러오고 내보낸다. ES 모듈의 import는 require과는 다르게

import {name} from 'module'

과 같이 모듈내에 정의된 특정한 부분만을 불러올 수 있다.

자세한 import와 export에 대한 설명은 링크로 대체한다.

다른 ES6 문법들, 이를테면 let이나 const, arrow function 등이 Node.js 상에서 정상적으로 작동하기 때문에, ES 모듈도 당연히 불러올 수 있을 거라고 생각했지만, Node.js에서 import를 사용하니 ES 모듈을 불러올 수 없다는 오류가 발생했다.

여러 자료들을 찾아본 결과, Node.js가 최신 자바스크립트 문법들은 지원하지만, 모듈 시스템으로 CommonJs를 채택했기 때문에 ES 모듈 시스템은 사용할 수 없다고 한다.

직접 express를 import 하는 코드를 짜서 테스트 해 보았다.

express 설치

디렉토리를 만들고, npm init으로 node_modules를 설치한다.
이번에는 express 모듈을 import 할 것이므로 express를 설치한다.

npm install express

다음과 같은 코드의 server.js 파일을 작성한다.

• server.js

import express from 'express';
const app = express();
let port = process.env.port || 3000;

app.get('/', (req, res) => {
    res.send('Hello world!');
});

const server = app.listen(port, () => {
    console.log(`server on ${port}`);
});

터미널에 node server.js를 입력하여 프로그램을 실행한다. 다음과 같은 오류가 발생한다.

(node:9112) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
import express from 'express';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile
    (중략)...

때문에 Node.js에서 ES 모듈을 사용하려면 설정이 필요한데, 이전에는 Babel 같은 transpiler를 이용해서 ES6 이전의 문법으로 변환해주는 과정이 필요했다. 그러나 Node.js 13버전부터는 ES6 모듈을 지원해서 설정을 통해 import / export를 사용할 수 있다

Node.js 프로젝트에서 import / export 사용하기

13 버전 이상의 Node.js에서 ES 모듈을 사용하는 방법은 간단하다.
npm init을 통해 프로젝트를 생성하면 생기는 package.json을 열고, 다음과 같이 type을 module로 설정해준다.

• package.json

{
 	...(생략)
	type: "module"
 	...(생략)
}

다시 server.js를 실행한다.

server on 3000

위와 같이 app.listen에서 설정한 콘솔 메시지가 정상적으로 출력됨을 볼 수 있다.

마지막으로 http://localhost:3000으로 접속해서 정상적으로 빌드 되었는지 확인한다.

브라우저에 Hello, world! 메시지가 정상적으로 출력되는 것을 확인할 수 있다.

참고 사이트

https://ui.toast.com/weekly-pick/ko_20190805
https://www.daleseo.com/js-node-es-modules/
https://blueshw.github.io/2017/05/16/ES-require-vs-import/