CommonJS vs ES6 모듈

[ CommonJS 방식 ]

1. 내보내기

  1) 단일 객체 : module.exports : 변수 자체에 할당

      ex) module.exports = { 여러 개의 function이 들어갈 수도 있음 }

 

  2) 복수 객체 : exports : 변수의 속성으로 할당

      ex) exports . A = function 1  /  exports . B = function 2

 

2. 불러오기

  1) 단일 객체 : require : 변수를 통해 접근

     ex) const ABC = require ( "경로 or " )

             ABC.A  /  ABC.B

 

  2) 복수 객체 : require : 한번에 불러와 속성 이용

     ex) const ABC = require ( "경로 or " )

             ABC.A  /  ABC.B

 

 

 

[ ES6 방식 ]

1. 내보내기

  1) 단일 객체 : export default

          : 어떤 이름을 지정하지 않고 내보낸다 / 불러올 때도 아무이름으로 불러온다.

          : import 시 중괄호 { }가 필요 없다.

      ex) export default = { 여러 개의 function이 들어갈 수도 있음 }

 

  2) 복수 객체 : export

       a. 선언과 동시에 내보내기

          ex) export function 1 / export const = 1

       b. 선언 후에 내보내기

          ex) const A = function2 /  export { A }

 

 

2. 불러오기

  1) 단일 객체 : import : 아무이름

     ex) impot anyName from '경로'

            anyName . function1  /  anyName . function2

 

  2) 복수 객체 : import 

      a. 필요한 것만 불러오기

        ex) import { function1 } from '경로'

 

      b. 모든 객체에 별명을 붙이고 접근

        ex) import * as anyName from '경로'

            anyName . function1

 

 

** import 중괄호 or not

-import { user } from user : just export

-import User from user : export default 한 것

 

 

 

*** export 예시

 

1. module.exports = { 상수, 변수 명 }

2. module.exports = { a : ' 입력값 '  }   ( key : value )

3. module.exports = require('불러올 파일 이름')

 

 

 

 

 

 

 

참고사이트

https://medium.com/@chullino/require-exports-module-exports-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-1d024ec5aca3

 

https://likejirak.tistory.com/82

 

-ES6 정리-

https://www.daleseo.com/js-module-import/

-CommonJS 정리-

https://www.daleseo.com/js-module-require/