[우창완] 챕터 10: 모듈형 자바스크립트 디자인 패턴

챕터_10/우창완.md

@@ -0,0 +1,116 @@
+# 모듈형 자바스크립트 디자인 패턴
+
+
+
+ESM 이전에는 AMD, CommonJS, UMD 3가지 방식이 사용되었다.
+
+AMD: 브라우저 환경 
+
+CommonJS: Node 환경
+
+UMD: 브라우저, Node 환경
+
+
+
+## 10.1 스크립트 로더에 대한 참고사항
+
+
+
+## 10.2 AMD
+
+**특징**
+
+* 비동기로 모듈 로드
+* 브라우저 환경
+
+AMD 의 대표적인 구현체로는 Require.js 가 있다고 한다.
+
+**사용법**
+
+```js
+// user.js
+define([], function() {
+    return {
+        getUser: function() {
+            return {
+                name: "John Doe",
+                age: 30
+            };
+        }
+    };
+});
+
+// main.js
+require.config({
+    // 기본 경로 설정
+    baseUrl: 'scripts'
+});
+
+// 모듈 로드 및 사용
+require(['user'], function(math, user) {
+    // user 모듈 사용
+    var userInfo = user.getUser();
+    console.log('User:', userInfo.name);
+    console.log('Age:', userInfo.age);
+});
+```
+
+
+
+
+
+vscode는 최근에 amd로 작성된 모듈들을 esm 으로 마이그레이션하여 bundle size가 10%를 줄였다고 한다.
+
+https://code.visualstudio.com/updates/v1_94#_esm-is-shipping-for-vs-code
+
+
+
+## 10.3 CommonJS
+
+* Node 환경
+* 동기적으로 module import
+
+
+
+
+
+node 23 부터 require(esm) 을 지원한다.
+
+https://github.com/nodejs/node/pull/51977
+
+```js
+// main.js
+const required = require('./point.mjs');
+
+(async () => {
+  const imported = await import('./point.mjs');
+  console.log(imported === required);  // true
+})();
+```
+
+
+
+pr 컨트리뷰터의 글(나중에 읽어보자..):
+
+https://joyeecheung.github.io/blog/2024/03/18/require-esm-in-node-js/
+
+
+
+## 10.4 UMD
+
+브라우저와 node 환경 모두에서 사용할 수 있는 모듈을 만들기 위한 방법
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+