리액트 스터디를 진행하다가 CommonJS module 과 ES module 이 언급이 되었는데
정리해볼겸 포스팅한다.
자바스크립트는 파일마다 독립적인 Scope(범위)를 가지지 않고 하나의 전역객체를 공유해서 사용한다.
대신 이렇게 되면 전역변수가 중복이 되는 문제가 생길 수 있다.
이러한 문제점을 해결하기 위해서 Node.js 에서는 사실상 표준이라고 할 수 있는 CommonJS를 채택하였다.
따라서 각각의 모듈들은 각자의 Scope를 가질 수 있게 되었다.
하지만 브라우저에서는 이를 지원하지 않았다.
그래서 ES6에서 이를 해결하기 위해 모듈 기능을 추가하게 되었다.
비교
ES Modules
- module loader 를 비동기 환경에서 실행, import / export 구문을 찾아서 파싱
- import 할게 더이상 없을 때까지 import 를 찾음
- package.config 의 "type" : "module" 로 set 해주어야함(default 값이 아님)
CommonJS
- default 값임
- require() 는 동기로 이루어짐, promise / callback 을 return 하지 않음
- 즉 require 내부의 script 를 실행하고 export 되어 있는 값을 return 한다.
모듈 내보내고 가져오기
CommonJS 의 내보내기
export 와 export default 를 함수명 또는 변수명 앞에 위치시킨다.
CommonJS 의 가져오기
import 를 코드 최상단에 작성함으로써 외부에서 module을 가져와 사용한다.
// 모듈 내보내기
function FunctionA() {
// ...
}
module.exports = FunctionA;
// 모듈 가져오기
const FunctionA = require('./myModule');
const myFunctionA = new FunctionA();
ES modules 의 내보내기
export 키워드를 이용해서 모듈을 내보낸다.
export 뒤에 내보내고 싶은 모듈을 작성하는데, export default 모듈이름 도 작성 가능하다.
export 와 export default 의 차이
export default 는 모듈에서 하나의 항목을 기본으로 내보내는 방법이다.
또한 한 모듈에서 export 와 export default 를 함께 사용할 수 있다.
예를 들어 export 로 여러 항목을 내보내고, export default 로 기본항목을 내보내는 방식이다.
// 모듈 내보내기 export const a = 10; export function myFunc() { // ... } export default class MyClass { // ... } // 모듈 가져오기 import { a, myFunc } from './myModule.js'; import MyClass from './myModule.js';
ES modules 의 가져오기
import 를 코드 최상단에 작성함으로써 외부에서 module을 가져와 사용한다.
// 모듈 내보내기
export default function FunctionA() {
// ...
}
// 모듈 가져오기
import FunctionA from './myModule.js';
const myFunctionA = new FunctionA();
