자바스크립트 모듈화에는 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 = ‘고양이’;
[/code]
이렇게 했을때 이를 불러와서 사용할때는
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]
[출처 : 핵탐]
