TIL - 20220814

 오늘은 모던 JavaScript 튜토리얼에서 모듈 소개에 대해 공부했다. 작성한 질문은 다음과 같다.

 모듈은 간단하게 파일 하나라고 생각하면 된다. 모듈은 클래스, 객체 하나 혹은 유틸 함수들로 구성된 라이브러리 하나로 구성된다.

 

• export를 사용하면 변수나 함수 앞에 붙여 사용하면 외부 모듈에서 해당 변수나 함수에 접근할 수 있다.
• import를 사용하면 외부 모듈의 변수나 함수와 같은 기능을 가져올 수 있다.

 

 모듈의 핵심 기능으로 다음이 존재한다.

• 모듈은 항상 엄격 모드로 실행된다.
• 모듈 레벨 스코프라는 자신만의 스코프가 있다. 
• 동일한 모듈을 여러 곳에서 사용되더라도 모듈 최초 시 단 한 번만 실행된다.
• import.meta 객체는 현재 모듈에 대한 정보를 제공한다.
• 모듈 최상위 레벨의 this는 undefined이다.

 

 브라우저 특정 기능으로 다음이 존재한다.

• 모듈 스크립트는 항상 지연 실행된다.
• async 속성이 붙은 스크립트는 로딩이 끝나면 다른 스크립트나 HTML 문서가 처리되길 기다리지 않고 바로 실행되지만, 모듈 스크립트에선 async 속성을 인라인에 적용할 수 있다.
• type="module"가 붙은 외부 모듈 스크립트엔 두 가지 특징이 존재하는데, src 값이 동일한 외부 스크립트는 한 번만 실행되며, 외부 사이트처럼 다른 출처에서 모듈 스크립트를 불러오려면 CORS 헤더가 필요하다.
• 경로가 없는 모듈은 허용되지 않는다.
• 구식 브라우저는 type="module"을 모르기 때문에 nomodule 속성을 사용하면 이런 상황을 대비할 수 있다.

 

웹팩과 같은 빌드 툴의 역할은 다음과 같다.

• HTML의 <script type="module">에 넣을 엔트리 역할의 주요 모듈을 선택한다.
• 주요 모듈의 의존 관계 분석을 시작으로 모듈 간의 의존 관계를 파악한다.
• 모듈 전체를 한 곳에 모아 하나의 큰 파일로 만든다.
• 이런 과정에서 변형과 최적화도 함께 수행된다.