Node.js에서 module 내보내고 가져오기

thumbnail image - morioh.com/p/877114da324e

참고 부탁드립니다.

이번 포스트에서는 require() 대신 ECMAScript 6 문법인 import를 사용하였습니다.

CommonJS 방식으로 export하는 방법을 설명하지 않았지만
export한 결과를 console을 통해 확인하는 과정에서 module.exports를 다루었습니다.

최초에 exports 객체는 module.exports 객체와 같은 주소를 참조하고 있으며
module을 내보낼 때 최종적으로 반환되는 것은 module.exports 객체입니다.

따라서 exports.foo = bar와 같이 exports의 property에 할당해준 값은
module.exports에도 잘 반영이되지만

exports = newObject와 같이 exports 자체에 새로운 객체를 할당하게 되면
exports와 module.exports가 서로 다른 주소를 참조하게 되고
exports에 담긴 내용은 제대로 내보내지지 않습니다.

아래 링크는 위 내용을 잘 설명해주신 감성 프로그래밍님의 포스트입니다.
module.exports 와 exports 의 차이점 - 감성 프로그래밍

named export

변수, 함수, 클래스 등 각 항목은 export할 때 그것의 이름을 기준으로 참조되고
import 할 때에도 그 이름을 기준으로 참조됩니다.

MDN 에서는 아래와 같이 설명하고 있습니다.

each item (be it a function, const, etc.) has been referred to by its name upon export,
and that name has been used to refer to it on import as well.

named exports로 내보내기

내보내려는 변수, 함수, 클래스 등을 선언할 때 export 키워드를 사용합니다.

내보내려는 항목들을 객체 형태로 묶은 후 export 키워드를 한번만 사용하는 것도 가능합니다.

두 가지 방법으로 내보낸 결과는 동일합니다. 결과를 확인해보겠습니다.

내보냈던 항목들이 module.exports라는 객체의 property와 value에 매핑되었습니다.

named exports로 내보낸 module 가져오기

named exports로 내보낸 항목들이 어떤 형태로 module.exports 객체에 포함되는지 확인했으므로
module을 가져와서 사용할 때도 그 점을 활용하면 되겠습니다.

import 구문은 아래와 같습니다.

내보낸 module이 포함된 .js 파일의 경로를 from 뒤에 명시해주고
가져온 module.export 객체를 각 변수에 구조 분해 할당합니다.

결과를 확인해보겠습니다.

named exports로 내보냈던 변수와 함수가 잘 가져왔습니다.

default exports

내보낸 항목들이 module.exports 객체에 포함된다는 것은 named exports와 동일하지만
module.exports 객체 구조와 import 구문이 조금 다릅니다.

또한, 각 module에서 default exports 키워드는 딱 한번만 사용할 수 있습니다.

MDN 에서는 아래와 같이 설명하고 있습니다.

this is designed to make it easy to have a default function provided by a module, and also helps JavaScript modules to interoperate with existing CommonJS and AMD module systems

default exports로 내보내기

내보내려는 변수, 함수, 클래스 등을 선언할 때 export default 키워드를 사용합니다.

각 module에서 default exports는 한번만 사용할 수 있으므로 중복해서 사용하면 오류가 발생합니다.

내보내려는 항목들을 객체 형태로 묶은 후 export default 키워드를 사용하는 것도 가능합니다.

결과를 확인해보겠습니다.

우리가 내보냈던 항목들이 default라는 이름의 객체로 module.exports 객체에 포함되었습니다.

named exports로 내보냈을 때 module.exports 객체의 property와 value에 각각 매핑되었던 것과는 조금 다른 구조입니다.

dafault exports로 내보낸 module 가져오기

default exports를 왜 사용하는지, MDN 에서 this is designed to make it easy to have a default function provided by a module이라고 표현했는데 무엇이 편한 것인지,

이런 의문들은 module을 가져와서 사용해보면 알 수 있습니다.

import 구문은 아래와 같습니다.

내보낸 module이 포함된 .js 파일의 경로를 from 뒤에 명시해주고
가져온 module.export 객체에 포함된 default 객체를 사용자가 임의로 지정한 변수에 할당합니다.

위 import 구문을 좀 더 자세히 풀어 써보면 아래와 같습니다.

결과를 확인해보겠습니다.

변수 nameWhatYouWant에 module.exports 내부에 있는 default 객체가 할당되었습니다.

간단한 예시

named exports와 default exports를 활용하여 간단한 예시를 작성해보겠습니다.

디렉토리 구조는 아래와 같습니다.

server.js
utils/
  ﾤ sumDeduct.js
  ﾤ multiplyDivide.js

sumDeduct.js 에는 덧셈, 뺄셈을 하는 두 개의 함수와 변수 하나가 선언되어 있습니다.
named exports를 사용하였습니다.

multiplyDivide.js 에는 곱셈, 나눗셈을 하는 두 개의 함수와 변수 하나가 선언되어 있습니다.
default exports를 사용하였습니다.

server.js에서 나머지 두 개의 .js파일을 import하고
import한 .js파일 내부에 구현되어 있는 함수와 변수를 사용해보겠습니다.

결과를 확인해보겠습니다.

다음 포스트에서는 각 디렉토리에 index.js 파일을 작성하고 module 구조를 좀 더 깔끔하게 정리하는 방법을 다뤄보겠습니다 😀

Reference

modules - MDN
export - MDN
ES6 In Depth: Modules - Jason Orendorff
CommonJS modules - Node.js v14.17.6 documentation
ECMAScript modules - Node.js v14.17.6 documentation