[Web] CommonJS 모듈 vs ES6 모듈 비교

※ 모듈(Module)이란 

• 함수, 변수들의 집합으로 ~.js 파일로 작성됨 
• 모듈로 만들면 여러 프로그램에서 재사용 가능

※  CommonJS 모듈 - Node.js 기본

• module.exports 로 내보낼 객체 또는 함수 지정해야 함 
• require() 함수로 모듈 가져올 수 있음 
• require()를 여러 번 실행하더라도 모듈은 한번만 실행
• 따라서 리턴된 객체 또는 함수는 동일 !! 
• exports 는 module.exports 를 참조한다.
• exports는 속성 또는 메소드만 작성 가능
• module.exports에 새로운 객체를 대입하면 exports는 사용 못함(참조가 깨지기 때문!!! - 주의)

※  ES6 모듈 - Node.js 지원 , React 기본 

• ECMA Script 2015(ES2015, ES6) 모듈 
• 현재 Node.js는 완벽히 호환되지 않음 
• React는 webpack에서 ES6 문법으로 지원하기 때문에 import문으로 모듈 불러와야 함 
• Node.js 프로젝트에서는 package.json 파일 생성하고 다음과 같이 type 속성을 작성해야 사용가능 

{ 
	"type" : "module"
}

• React 프로젝트에서는 외부 모듈 사용시 타입=모듈을 기술해야함

<script type="module">
    import fun3, {fun1, fun2} from "./test.js";
    fun1(); // export function fun1() {...}
    fun2(); // export function fun2() {...}
    fun3(); // export default fun3;
</script>

• module.exports(X)  =>  export default
• exports(X)  =>  export
• require(X)  =>  import ... from ...