[박상범] 챕터 10: 모듈형 자바스크립트 디자인 패턴

챕터_10/상범.md

@@ -0,0 +1,50 @@
+### AMD
+- 비동기적이고 동적으로 모듈 로드
+  - 초기 로딩 시간 감소 (비동기)
+  - 필요한 모듈을 적절할 때 로드 (동적)
+- 브라우저 환경을 위함
+- 스크립트 로더: RequireJS, curl.js
+- 장점
+  - 독립적인 모듈과 의존성을 명확하게 선언
+  - 전역 네임스페이스 오염 방지
+- 단점
+  - 서버사이드와 호환 되지 않음
+  - ESM의 표준화에 따라 사용빈도 줄어듦
+
+### CommonJS
+- 동기적이고 동적으로 모듈 로드
+- Node.js에서 사용
+- `require()`, `exports`로 활용가능
+
+### UMD
+- 브라우저와 서버에서 모두 동작이 가능한 형태
+
+### ESM
+- 표준 모듈 시스템
+- `import`, `export` 키워드 사용
+- 정적 분석이 가능
+  - 선언적으로 작성하며, 파싱 시점에 구조를 파악가능
+- 의존성 트리 구축 가능
+- 트리쉐이킹 원활
+- 순환 참조 감지 가능
+  -> 효율적이고 예측가능한 코드 작성 가능
+- 정적 분석 과정이 있어 CJS보다는 느리다
+
+- 요즘엔 서버에선 CommonJS, 브라우저에선 ESM 주로 사용
+- ESM이 표준이지만 이미 CommonJS로된 오픈소스들이 많음
+- CommonJS와 ESM은 호환되지 않는다.
+  - ESM에서 CJS를 `import` 할 수는 있으나 default import만 가능하다.
+  - 반대는 쉽지 않다. (특히 top-level await 때문에)
+
+
+
+
+
+
+> 정리 :
+> CommonJS는 Node.js 환경에서 주로 사용되며, require()와 module.exports를 사용하여 모듈을 가져오고 내보냄   
+> ES Module은 최신 JavaScript 표준으로, import와 export 키워드를 사용함   
+> 둘이 비교하면, CommonJS는 동기적으로 모듈을 로드하는 반면, ES Module은 비동기적으로 로드함   
+> 이는 ES Module이 브라우저 환경에서도 사용될 수 있도록 설계되었기 때문, 왜냐하면 브라우저 환경에서는 비동기 로드가 필수적이니까, 반면에 CommonJS는 서버 사이드에서 모든 모듈이 로드된 후에야 코드가 실행되어야 해서 동기적 로드가 유리한 조건임      
+> CommonJS는 트리 셰이킹(Tree Shaking)이 어렵다는 단점 존재함, 동적 로드 지원해서 그럼 ㅋㅋ 
+> 반면, ES Module은 트리 셰이킹이 용이, 왜냐면 ES Module은 정적 분석이 가능하기 때문