[Note_deepDive]48장 자바스크립트의 모듈 시스템

48.1 모듈의 일반적인 의미

Module: 재사용 가능한 기능단위로 파일로 분리된 코드뭉치. 모듈의 scope는 File이다.

 

특정 모듈의 FileScope내에서 asset(변수, 함수, 객체)은 기본적으로 비공개상태다.

**즉, 모듈은 Application과 분리되어 별도로 존재하는 것이다.**

 

export: 모듈의 비공개된 asset들을 외부로 공개하기위한 구문. ES6 문법이다. 모듈의 사용자는 export를 통해 공개된 일부만 사용할 수 있다.

 

 48.2 자바스크립트와 모듈

**자바스크립트는 브라우저에 script로 한꺼번에 들어간다는 사실 때문에 태생적으로 모듈 시스템이 존재하지 않는다.**

원래 export와 import는 자바스크립트에 없던 기능이다!

**기존 script 태그를 사용하여 js파일을 import해오던 방식은 모듈이 독립적인 filescope를 가지는게 아니라, 말 그대로 script를 그냥 뿌려주는 것이었다. 즉 여러개의 파일을 script로 불러들여도 그냥 하나의 파일에서 동작하는 것과 똑같다. 하나의 전역공간을 공유하는 것이나 같은 것이다. 이럴 때, 전역변수가 중복될 수도 있다.**

 

자바스크립트 모듈 시스템. 각각의 모듈은 브라우저 환경에서 실행을 할 수있도록, library loader를 가지고 있다. 

AMD: CommonJS와 경쟁하다가 밀려난 모듈 시스템이다.

CommonJS: 런타임 환경(node.js)의 베이스 모듈 시스템, require 구문을 사용한다. ECMA 표준사항은 아니다. 이를 node.js가 모듈시스템으로 가지고 있으므로 node.js의 파일들은 파일단위의 독립적인 스코프를 가질 수 있다. ~.cjs.js로 프로젝트에서 사용한 경험이 있다.

 

 48.3 ESM모듈

ESM: ecma script module. es6 부터 적용된 명세로 거의 모든 브라우저들의 표준 모듈 시스템(chrome 61+, sf 10.1+, ff60+, edge 16+)이 채택하고 있다. esm의 확장자는 mjs가 표준이나. ~.esm.js로 프로젝트에서 사용한 경험이 있다.

 

사용 방법: 위 버전 이상의 브라우저환경에서 script태그 attribute로 type="module"을 추가하여 사용한다. 그러면 브라우저에서 파일에서 스크립트를 가져와 그냥 뿌리는게 아니고, 모듈로서 인식하고 동작한다.

 

4.3.1 esm 모듈의 스코프

**esm은 독자적인 module scope를 가진다. **

esm은 기본적으로 strict mode를 적용한다. 

**esm은 독립적인 파일스코프를 가지고 있으므로, esm의 전역공간에 선언한 변수나 함수는 window 객체의 프로퍼티가 아니다. 모듈내에서 선언한 식별자는 export import 구문을 사용하지 않으면 참조할 수 없다.**

4.3.2 export

** export를 하나의 객체로 구성해서 하면 여러번 export를 쓰지 않아도 된다.**

** default export는 {} 없이 import 가능하고 임의이 이름으로 import 가능하다.

4.3.3 import

** 다른 모듈에서 공개한 식별자를 자신의 모듈  스코프로 로드하려면 import를 사용한다. esm 파일은 import foo from "foo.mjs"처럼 모듈 확장자를 생략할 수 없고, export에 작성한 식별자 이름으로만 import할 수 있다.

 

읽으면서 생긴 궁금 증

1. mjs와 rollup 번들 파일인 esm.js의 차이?

2. type="module"이 CRA index.html에는 없던데..? <div id="root"></div> 와 연관있을듯 하다. 주석에 따르면 index.html은 product bundle을 만들기 위한 템플릿이라고 한다.

3. ecma: european computer manufacturer assosiation의 역사

4. es6 출시년도와 자바스크립트 역사 기억이 안남

5. 브라우저 컴파일과정

6. 자바스크립트의 strict mode: 문법, 런타인 동작 모두를 검사하고 실수를 에러로 console에 뿌려준다. 그리고 변수 사용을 단순화 시켜준다?

7. javascript strict mode의 히스토리?

8. strict mode는 모듈 시스템에도 있고 react에도 있고 typescript에도 있다 각각 의미하는게 뭐고 차이점은 뭔지?