챕터 10

챕터_10/오혜성.md

@@ -0,0 +1,69 @@
+# 모듈형 자바스크립트 디자인 패턴
+
+## AMD
+
+- CommonJS의 모듈 형식에 대한 사양 초안으로 시작됐지만, 합의점을 이루지 못해 amdjs 그룹으로 넘어감
+
+- 모듈과 의존성 모두를 비동기적으로 로드할 수 있도록 설계된 모듈 정의 방식
+
+## CJS
+
+- 2009년 ServerJS 프로젝트에서 만들어진 형식, 이후 CommonJS 그룹에 의해 공식화됨
+
+## VS
+
+- AMD
+  - 브라우저 우선 접근 방식을 채택하여 비동기 동작과 간소화된 하위 호환성을 선택
+  - 반면 파일 IO에 대한 개념이 없음
+  - 객체, 함수, 생성자, 문자열, JSON 등 다양한 형태의 모듈을 지원
+
+- CJS
+  - 서버 우선 접근 방식을 취함
+  - 동기적으로 작동
+  - 전역 변수와의 독립성
+  - 언래핑된 모듈을 지원하기 때문에 ES 표준에 조금 더 가깝게 느껴짐
+
+> 여기서 말하는 언래핑된 모듈?
+
+```js
+// wrapped-module.js
+define(['dependency1', 'dependency2'], function(dep1, dep2) {
+    var privateVar = "비공개 변수";
+
+    return {
+        publicMethod: function() {
+            return "공개 메서드";
+        }
+    };
+});
+
+// unwrapped-module.js
+var dep1 = require('dependency1');
+var dep2 = require('dependency2');
+
+var privateVar = "비공개 변수";
+
+exports.publicMethod = function() {
+    return "공개 메서드";
+};
+
+// 문법적 차이
+// 래핑된 모듈: define() 함수로 전체 모듈을 감싸야 함
+// 언래핑된 모듈: 일반 JavaScript처럼 직접 코드를 작성
+
+// 의존성 관리
+// 래핑된 모듈: 의존성을 배열로 한번에 선언
+// 언래핑된 모듈: 필요한 곳에서 직접 require()로 호출
+```
+
+## UMD
+
+- 브라우저와 서버 환경에서 모두 작동할 수 있는 모듈을 위해 개발
+
+- UMD는 AMD나 CommonJS를 대체하기 위한 것이 아니라, 오늘날 다양한 환경에서 동작할 수 있도록 돕는 보조 도구
+
+## 내 생각
+
+Node.js 환경도 13.2.0 이후부터 ES 모듈을 정상적으로 사용할 수 있으니 앵간해서는 ES 모듈을 사용하는게 좋지 않을까 생각됨
+
+- CJS 트리쉐이킹 안되는 것은 다른 분이 설명해주실 것으로 예상