ES Module이란?

ES Module은 ES6에 도입된 모듈 시스템으로, import와 export를 사용하여 분리되어 있는 js파일끼리 서로 접근이 가능하다는 특징이 있다.

ES Module 왜 사용하지?

브라우저의 ES module

• 초기의 자바스크립트는 독립적인 작업을 수행하여 큰 스크립트가 필요하지 않았다. jQuery가 생겨나면서 웹 어플리케이션의 규모가 커지고, 이에 따라서 script 파일을 나누어 관리하기 시작하며 파일간 변수, 함수 등을 전달하고 받는 방법이 필요해졌다.

• ES Module 이전에는 각 script 파일을 전역 스코프(블록 혹은 함수의 바깥에 선언된 변수)처럼 사용해왔다. HTML 파일에서 보다 위에 있는 script 파일은 전역 스코프처럼 하위 script 태그에서 접근, 변경이 가능했다.

• 이러한 이유로 jQuery script를 최상단에 두고 순서를 올바르게 구성하는 것이 중요했다. 이 구조에서는 파일 순서가 뒤틀리면 에러가 발생하며, 하위 스크립트가 보다 상위의 스크립트 값을 쉽게 변경시키는 전역 오염이 발생할 수 있으며 스크립트간 의존성을 파악하기가 힘들어 유지보수에 어려움이 있었다.

모듈화의 등장

• 위와 같은 문제의 발생으로 모듈화에 대한 필요성이 높아져 ES Module이 나오게 되었다.

• 모듈은 함수와 변수를 모듈 스코프에 넣고, 각 함수는 함수 스코프를 가지게 된다.

• 다만 export로 해당 변수, 함수를 다른 모듈에서 import를 통해 의존할 수 있게 한다.

모듈화의 장점

• import, export의 명시적 관계로, 하나의 모듈이 제거되면 어떤 모듈이 손상되었는지 알 수 있다. 즉 기존에 비해 의존성 파악에 있어 개선이 되었다.

• import, export로 관계되지 않은 모듈간에는 오염이 일어나지 않는다.

• 코드들을 각각 독립적으로 작동하는 단위로 나누기 수월해진다. 또한 모듈의 재사용 또한 쉽게 이루어질 수 있다.

동작방식

• 브라우저에서 ES Module은 구성, 인스턴스화, 평가의 단계를 거쳐 동작하게 된다.

• 브라우저의 자바스크립트는 파일 자체를 사용할 수 없다. 이러한 이유로 모듈 레코드(Module Record)라고 하는 데이터 구조로 변환하는 과정을 거친다. 이 때 해당 파일들의 모든 구문을 분석할 필요가 있다.

• 파일을 불러오는 것은 loader가 하며, 이는 ES Module의 명세가 아닌 HTML 명세를 따른다. script 태그에 type = "module"을 적어두어 entry 파일로 지정한다.

구성

• entry 파일부터 import문을 찾아가며 필요한 모든 파일을 모듈 레코드로 구문 분석한다.

1. 모듈이 들어있는 파일을 어디서 다운로드 할 것인지 확인
2. URL 혹은 파일 시스템을 통해 파일을 불러옴
3. 파일을 모듈 레코드로 구문 분석 실행

인스턴스화

1. export된 값을 모두 배치하기 위한 메모리 공간을 찾는다
2. 'export'와 import문이 이 메모리 공간을 가리키는 연결(linking) 과정을 거친다.

• 이 과정에서 메모리 공간을 찾고 지정할 뿐 실제 값을 공간에 채우지는 않는다.

평가

1. 코드를 실행하여 메모리를 변수의 실제 값으로 채운다.