[Node.js/Javascript] commonJS 문법과 ES6 - require() 와 import 비교

안녕하세요. 

Node.js 와 Express.js 로 개발하다가 구글링을 해서 블로그에 있는 코드를 살펴보면

외부의 모듈을 불러올 때(import)

모듈을 외부로 내보낼 때(export)

표현이 2가지로 나뉘는 걸 볼 수 있습니다.

 

정리해보면 이렇습니다.

모듈을 불러올 때, CommonJS는 require() 을, ES6는 import 를 사용합니다.

모듈을 내보낼 때, CommonJS는 module.exports 을, ES6는 export 를 사용합니다.

---

CommonJS

Node.js 은 CommonJS 포맷을 표준으로 합니다.

commonJS 는 자바스크립트를 브라우저에서뿐만 아니라 서버 사이드 애플리케이션으로 사용할 수 있도록 나타낸 언어그룹 입니다.

[파일구조]

/ (root directory)
|_ node_modules (설치된 패키지 및 내장모듈들이 있다)
|_ index.js
|_ src
     |_ router.js
     |_ middle_wares.js
     |_ moduleGET.js

 

[코드1] index.js

/* fileName: index.js	*/
/* filePath: /index.js	*/

const express = require('express');
const rootRouter = require('./src/router');

app = express();
app.use(express.json());
app.use(express.urlencoded({extended: true}))
app.use("/", rootRouter);

const PORT = 4000;
app.listen(PORT, () => {
    console.log("Server Started....")
})

 

[코드2] 

/* fileName: router.js		*/
/* filePath: /src/router.js	*/

// (import) node_modules에 설치된 모듈을 불러옵니다.
const express = require('express');

const rootRouter = express.Router(); 


// (import) 프로젝트 안에 있는 다른 모듈 middlewares.js 의 middleWare 을 불러옵니다.
const { middleWare }  = require('./middle_wares');


// (import) 프로젝트 안에 있는 다른 모듈을 불러옵니다.
const _moduleGET = require('./moduleGET');


rootRouter.get('/', middleWare, _moduleGET);


// 현재 모듈의 rootRouter 하나를 외부에 내보냅니다.
// rootRouter 만 외부에서 조회할 수 있습니다.
module.exports = rootRouter;

 

[코드3] middle_wares.js

/* fileName: middle_wares.js */

const message = "::: "
const middleWare =  (req, res, next) => {
    console.log("::: middleWare successfully");
    next();
}

module.exports = { middleWare, message };

 

 

[코드1] ~ [코드3] 을 보면

외부로 보내고 싶은 모듈이 있다면 module.exports 를 붙입니다.

함수/변수/상수/객체 등을 외부에 보낼 수 있습니다.

 

[코드2] 는 한개의 모듈  rootRouter 을 외부로 보냅니다.

index.js 가 src/router.js 의 모듈 rootRouter을 사용하고 싶다면

const rootRouter = require('./src/router.js');  코드가 있어야합니다.

 

반면에 index.js 에  const router = require('./src/router.js');  코드를 입력했을경우에는 런타임 실패가 나옵니다.

왜냐하면 src/router.js 는 router 을 외부에 보내지 않기 때문이죠.

 

[코드2]와 다르게 [코드3]은 두 개 이상의 여러개를 보냅니다. 

여러개를 보낼 때는 { } 괄호에 감싸서 보내야합니다.

[코드3] 은 middle_wares.js 가 message 와 함수 middleWare() 를 외부로 보냅니다.

 

 

정리하자면 다음과 같습니다.

from.js 와 to.js 가 같은 디렉토리에 있다고 가정합니다.

한개를  외부에 export 하고 싶다면

// from.js
const Target = "개발하는 후딘";

module.exports = Target ;

 

그러면, 외부모듈이  from.js의 Target 을 받아야 된다면

module.exports 에 정의한 이름 그대로 임포트 해야 됩니다. .

// to.js

const Target = require("./from");

 

 

여러개를 외부에 export 하고 싶다면

// from.js

const Target1 = () => { console.log('Taget1') };
const Taget2 = {
	name: "개발하는 후딘",
    blog: "ek12mv2.tistory.com",
    call: () => { console.log("감사합니다."); },
};

module.exports = { Target1, Target2 }

 

to.js 가  from.js의 모든 모듈이 필요하다면

// to.js

const { Target1, Target2 } = require('./from');

 

반면에, to.js 가  from.js 에서 Target2 모듈만 필요하다면

// to.js

const { Target2 } = require('./from');

 

---

ES6

babel과 같은 최신의 자바스크립트 문법으로 변환해주는 도구를 사용할 수 없다면 CommonJS의 방식으로 사용할 수 밖에 없습니다.

package.json 에서  "type": "module"  을 추가하면, import/export 를 사용할 수 있습니다.

// package.json
{
	"dependencies": {
    	...
    },
    "devDependencies": {
    	...
    },
	"type": "module"
}

 

[ES6] 모듈 내보내기 & 가져오기

[파일 구조]

 /
|_ init.js
|_ src
    |_ index.js
    |_ routers
    |.      |_ userRouter.js
    |_ controllers
           |_ userController.js

 

[코드1] init.js

/* filePath: /init.js	*/

import app from "./src/index.js"

const PORT = 4000;

app.listen( PORT, () => {
	console.log(`Server listening or port ${PORT}`);
});

 

[코드2] index.js

/* filePath: /src/index.js	*/

// node_modules에 있는 express 모듈을 불러옵니다.
import express from "express";

// 프로젝트 안에 있는 다른 파일의 rootRouter 모듈을 불러옵니다.
import rootRouter from "./routers/userRouter"

const app = express();
app.use("/users", userRouter);

export default app;

 

 

index.js 의 app 모듈을 불러옵니다. ES6문법으로는   import app from "./src/index.js"  으로 나타낼 수 있습니다.

마찬가지로 ./src/index.js 에서 app이란 이름으로  정의 한  외부로 보냈음을 알 수 있습니다.

[코드2] 를 보면, CommonJS 와 다르게    export default app  으로 했습니다.

그리고 프로젝트 내 다른 파일이 아닌, node_modules에 설치된 모듈들을 사용하려면 import 불러올대상 from "모듈명" 식으로 하면 됩니다.

만일 express 모듈의 함수 express() 를 사용하고 싶다면, import express from "express" 로 하면 됩니다.

 

 

[코드3] userRouter.js

(파일 이름명은 내보내려는 모듈과 같을 필요는 없습니다)

/* filePath: /src/routers/userRouter.js	*/

import express from "express";
import { getJoin, postJoin, getLogin, postLogin } from "../controllers/userController";

const userRouter = express.Router();

userRouter.get("/join", getJoin);
userRouter.post("/join", postJoin);

userRouter.get("/login", getLogin);
userRouter.post("/login", postLogin);

export default userRouter;

 

[코드4] userController.js

/* FilePath: /src/controllers/userController.js	*/

const getJoin = (req, res) => { ... }

const postJoin = (req, res) => { ... }

const getLogin = (req, res) => { ... }

const postLogin = (req, res) => { ... }

export { getJoin, postJoin, getLogin, postLogin };

 

[코드4]를 보면, 여러개의 모듈을 외부를 내보낼 때는    export { getJoin, postJoin, getLogin, postLogin }   와 같이 합니다.

그리고 여러개의 모듈을 불러올 때는  [코드3] 의   import { getJoin, postJoin, getLogin, postLogin  } from  "../controllers/userController"  형식으로 합니다. 

---

[참고자료]

 

[NODE] 📚 require vs import 문법 비교 (CommonJS vs ES6)

https://d2.naver.com/helloworld/12864

[JS] CommonJS와 ES6

CommonJS와 ES6의 모듈(module) 시스템