IIEF, Modules and Namespace

💁🏻‍♂️Contents

1. JavaScript Module
2. IIFE, Namespace
3. ES Module

JavaScript Module

 기능상 성격이 비슷한 또는 연관성 있는 부분들이

조립된 덩어리

🙋🏻‍♂️왜 모듈이 필요한가요?

● abstract code

● encapsulate code

● reuse code

● manage dependencies

 

 

코드 분리

물리적인 파일로 위치를 분리

Namespace

IIFE

CommonJS

ES Module

IIFE, Namespace

Function Declarations

Function Expressions

IIFE

함수를 표현식으로 바꾸고 즉시 실행하는 것이다

Function Expressions

함수 표현식을 만드는 또 다른 방법

IIFE

이해가 안되요...

IIFE의 활용 - private variables

IIFE의 활용 - alias

IIFE의 활용 - module

ES Module

import, export

해당 키워드를 통해 모듈내의 값을 내보내고 불러온다

Module 사용

type 속성을 module로 설정하여 브라우저에서 모듈로 처리할 수 있다

기존과의 차이

1. 모듈에서는 명시하지 않아도 기본적으로 엄격모드가 적용된다

 

2. HTML 스타일 주석 구문을 지원하지 않는다.

 

 

 

 

 

 

3. 모듈은 최상위 렉시컬 스코프를 가진다.

 

 

 

기존과의 차이

mjs 확장자

1. 해당 파일이 모듈임을 분명하게 나타낼 수 있다.
     - 기존 스크립트와 취급되는게 다르기 때문에 주의가 필요하다.

 

2. node.js에서 ES Module을 구분한다.

 

Module specifiers

🙅🏻‍♂️ 지원되는 않는 지정자

 

 

 

🙆🏻‍♂️ 지원되는 지정자

 

절대 경로 또는 상대경로를 명시해줘야 한다

defer attribute

모든 종속 모듈에도 동일하게 적용된다

Performance recommendations

● Keep bundling (Trade-off)

● Use fine-grained modules

● Preload modules

● Use HTTP/2

 

 

Appendix

ES6 와 IIFE

ES6 이후로 IIFE의 필요성이 더 이상 없을까?

ES6 와 IIFE

ES6 이후로 IIFE의 필요성이 더 이상 없을까?

ES6 와 IIFE

ES6 이후로 IIFE의 필요성이 더 이상 없을까?