(2023.11.17) ES6 Module이란?

ES6 모듈이란.. ?

      ● ES6에 도입된 모듈 시스템을 말합니다.

      ● ES6 Module은 import와 export를 사용해서 분리된 자바스크립트 파일을 접근 가능하게 할 수 있습니다.

 

기존 CommonJS 방식을 사용한 예제 모듈을 먼저 확인해보고, ES6 모듈을 적용했을 때 코드를 확인하면서 차이점을 알아보도록 하겠습니다. 

 

기존 CommonJs 사용

const express = require("express");
const app = express();

app.get("/", (req, res) => {
    res.send("test");
});

express 모듈을 불러올 때 CommonJS는 패키지를 불러와서 express 모듈을 사용하는 것을 확인할 수 있습니다. 

 

2-1. 파일 단위로 ES 모듈 적용하기

(현재 시간을 찍어주는 모듈로 예를 들어보겠습니다.)

 

   ● time.mjs

//time.mjs 
// commonJS를 사용할 때는 js파일을 사용하지만 ES6 Module을 사용할 때 확장자는 mjs로 변경해주어야 합니다.

import moment from "moment"; // 현재 시간을 찍어주는 모듈

export function time() {
    return moment().format();
};

 

    ● time.now.js

import { time } from "./time.mjs";

console.log("Time:" time());

 

위 작업을 해줄 때 js파일 확장자를 바꿔주지 않으면 오류가 나는 것을 확인 할 수 있습니다. 

ES6 Module을 사용하는 경우에는 확장자를 확인해야 오류가 나지 않으니 CommonJS를 사용하시다가 ES6 Module로 변경 하시는 분은 확장자를 확인하시는 것을 말씀드려요.

또한 import 부분에서 확자자를 포함해서 경로를 명시해주어야하니 작업하실 때 확인하시고 진행하시는 것이 좋습니다. 

 

2-2 프로젝트 단위로 ES 모듈 적용하기

 

일일이 확장자를 변경하지 않고 프로젝트 전체에 ES 모듈을 적용하고 싶을 때는 먼저 package.json 파을 열고 최상단에 "type" : 항목을 module로 설정해줍니다.

 

 "type": "module"

 

이후에 mjs로 변경해주었던 파일을 js 파일로 다시 변경해서 사용해주면 정상적으로 돌아가는 것을 확인 할 수 있습니다.