Common Js vs Es Modules

오늘은 JS에서 다른 스크립트 파일을 현재 스크립트 파일로 불러와 사용할 수 있도록 하는 import, export에 대해서 정리해보았다.

크게 JS에서는 common js방식과 es module 방식이 있다.

html 문서에서는 주로 es module 방식을 통해 html에 js 스크립트 파일을 불러오곤 하는데, 이에 대해서도 알아보자.

문제점

ESM 이전에는 각각의 script 파일을 전역 스코프처럼 사용했다. HTML 파일에서 보다 위에 있는 script 파일은 전역 스코프처럼 하위의 script 태그에서 접근, 변경이 가능했다.

이 때문에 jQuery script를 최상단에 두고, 순서를 올바르게 구성하는게 중요했다.

• 이 구조는 파일 순서가 뒤틀리면 에러가 발생한다.
• 하위 script가 상위 script의 값을 쉽게 변경시키는 '전역 오염'이 발생하기 쉽다.
• 해당 script가 어떤 script에 의존성을 갖고 있는지 파악하기 힘들다.
• 유지보수가 힘들다.

해결책 - 모듈화

• 이러한 문제속에서 모듈화에 대한 필요성이 높아져 ES Module이 등장하게 되었다.
• 모듈은 함수와 변수를 모듈 스코프에 넣고, 각 함수는 함수 스코프를 가진다.
• 다만 export로 해당 변수, 함수를 "다른 모듈에서 import를 통해 의존할 수 있도록" 지정할 수 있다.

Common Js vs Es Modules

그럼 이제 모듈화를 적용할 수 있는 두 가지 방법에 대해서 알아보자.

• ES Modules: ES Modules는 정적 분석(Static Analysis)을 통해 모듈 의존성을 파악하므로 빌드 도구가 코드 번들링 및 최적화를 더 잘 수행할 수 있다.
  즉, 코드를 실행하기 전에 어떤 모듈이 필요하고 어떻게 가져와야 하는지 미리 알 수 있다

• CommonJS: CommonJS는 런타임에 모듈을 동적으로 로드하므로 정적 분석이 어렵고 번들링 및 최적화가 어려울 수 있다.

---

Es Modules

export

named export

여러 항목을 하나의 모듈에서 내보낼 수 있다.
가져올 때, 가져온 항목의 이름과 내보낸 항목의 이름이 일치해야 한다!!!!

1. 묶어서 내보내기

const a = 1
function fn(){}
class Class{}

export { a, fn, Class }

default export

모듈에서 하나의 항목만 기본(default)으로 내보낸다.
가져올 때 이름을 마음대로 지정할 수 있으며, 중괄호를 사용하지 않는다.

1. 내보내고자 하는 변수, 함수 앞에 export default 붙이기

// 변수값은 default로 선언, 내보내기가 동시에 되지 않는다
export default const a = 1 은 틀린 방법!! 
export default { a: 1 }; 이 올바른 방법!!

// function
export default function fn(){}

// Class
export default class Class{}

default export는 모듈 당 하나만 가능하다.

1. 선언 후 내보내기

//a.js
const a = 1
export default a

// fn.js
function fn(){}
export default fn

// Class.js
class Class{}
export default Class

import

named export를 import하는 경우

import {a} from 'a.js'
import {fn} from 'fn.js'
import {Class} from 'class.js'

defualt export를 import하는 경우

import a from 'a.js'
import fn from 'fn.js'
import Class from 'class.js'

//default의 경우 변수명은 원하는대로 바꿔도 된다.

import DD from 'class.js'

HTML 문서에서의 스크립트 모듈 불러오기

HTML 문서에서 스크립트 모듈을 불러오는 것은 다음과 같이 할 수 있다.

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

---

Common js

export

변수 내보내기:

module.exports.myVariable = 'Hello';

객체 내보내기:

module.exports.myObject = {
  key1: 'value1',
  key2: 'value2'
};

함수 내보내기:

module.exports.myFunction = function() {
  // 함수 내용
};

클래스 내보내기:

class MyClass {
  // 클래스 내용
}
module.exports = MyClass;

import

const 변수명 = require('./파일');