diff --git "a/\354\261\225\355\204\260_10/\354\203\201\353\262\224.md" "b/\354\261\225\355\204\260_10/\354\203\201\353\262\224.md" new file mode 100644 index 0000000..c5abe36 --- /dev/null +++ "b/\354\261\225\355\204\260_10/\354\203\201\353\262\224.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은 정적 분석이 가능하기 때문