import 와 export vs require 와 exports > IT 기술백서

자바스크립트 모듈화에는 2가지 방법이 존재한다.

1. import 와 export

2. require 와 exports

1은 ES6 방식이며 2는 CommonJS 방식이다.  CommonJS는 브라우저를 벗어난 환경에서 모듈화를 위해 만들어진 방식이고 nodejs 나 webpack에서 사용한다.

즉, 1은 ES6을 지원하는 브라우저 (현재 ie를 제외한 대부분의 브라우저)에서 기본적으로 지원하는 모듈화 방식이며, 2는 nodejs 에서 사용하는 방식이다. 헤깔리게 이렇게 나뉜이유는 아마도(?) ES6 가 나오기 이전에 모듈화를 지원하기 위해 자체적으로 만들어낸 이유가 아닐까 한다.

import 와 require 는 확연히 다르기 때문에 헤깔리지 않는데 export 와 exports 는 단수냐 복수냐의 차이 때문에 많이 헤깔릴 수 있다. 없는 걸 만들어 냈기 때문에 's' 를 더 붙인거라 생각하면 외우기 편하기 않을까? ^^ 

import 와 export

export 에는 export default 라는  키워드가 존재한다. 

default 키워드 없이 

module.js

[code]

export const name = '고양이';

이렇게 했을때 이를 불러와서 사용할때는 

main.js

[code]

import { name} from './module.js'
[/code]

이렇게 중괄호를 사용해야 한다.

module.js
[code]
const name = '고양이';

export default name
[/code]

위와 같이 default 를 붙이면 아래처럼 중괄호 없이 사용할 수 있다.
[code]
import name from './module.js'
[/code]

이처럼 모듈의 기본 property 라고 생각하면 된다. 참고로 default 한정자를 붙일경우에는 객체로 전달되기 때문에 아래와 같이 사용하는 것은 안된다.

module.js
[code]
export default const name = '고양이';  // 에러
[/code]

보통은 모듈당 하나의 함수 또는 클래스를 사용하기 위해 default 한정자를 사용한다.

module.js
[code]
export default {

    ....

}

[/code]

또는
[code]
export default sum = (a, b) => {

    return a + b

}
[/code]

와 같이 사용한다.

사용할때는 아래처럼 불러오면 된다.

main.js

[code]

import Sum from './module.js' 

Sum(10, 5)

[/code]

참고로 import & export 는 브라우저에서도 사용할 수 있기 때문에 <script> 태그로 html 에 불러와 사용할 수 있다.

이때는 주의해야 하는게 <script> 태그의 type 속성에 module 이라고 기입해 줘야 한다.

[code]
<script type="module" src="main.js"></script>
[/code]

참고로 http서버가 아닌 로컬파일로 실행하면 CORS 에러가 뜬다.  이는 개발자 도구로 보면 알겠지만 Origin 항목이 null 이 되기 때문이다.

require 와 exports

module.js
[code]
exports sum = function(a, b) {

    return a + b

}

exports extract = function(a, b) {

    return a - b

}
[/code]

이렇게 각자로 정의 할 수도 있고

module.js
[code]
module.exports = {

    sum: function(a, b) {

        return a + b

    },

    extract: function(a, b) {

        return a - b

    }

}
[/code]

이렇게 묶어서 정의 할 수도 있다.

둘의 차이점은 없다.  결국엔 module.export 객체로 반환된다.

사용할때는 아래처럼 하면 된다.

[code]

const Calc = require('./module.js')

Calc.sum(10, 5); // 15

Calc.extract(10, 5); // 5

[/code]