[우창완] 챕터 11: 네임스페이스 패턴

챕터_11/우창완.md

@@ -0,0 +1,188 @@
+# 네임스페이스 패턴
+
+
+
+큰 코드베이스, 다양한 서드파티를 사용하는 환경에서는 변수, 메서드 이름이 예기치 않게 충돌할 수 있다. 이 때, 네임스페이스로 식별자를 분리하여 고유 식별자로 구분하는 역할을 한다.
+
+
+
+
+
+## 11.2 단일 전역 변수 패턴
+
+IIFE로 scope를 만들어 네임스페이스로 활용한다.
+
+```js
+const myUniqueApplication = (() => {
+  function myMethod(){}
+})
+
+myUniqueApplication.myMethod()
+```
+
+
+
+
+
+하지만, 같은 이름의 전역 변수를 사용하고 있다면 문제가 생긴다.
+
+
+
+## 11.3 접두사 네임스페이스 패턴
+
+네임스페이스 접두사를 변수, 함수와 함께 정의하는 방법.
+
+코딩 생활에 굉장히 해로울 것 같다.
+
+```js
+const myApplication_propertyA = {}
+```
+
+
+
+## 11.4 객체 리터럴 표기법 패턴
+
+객체를 활용하지만 iife를 사용하는 것과 유사하다. 
+
+동적으로 property를 추가할 수 있지만, 굉장히 안티패턴 같다. 네임스페이스에서 외부에서 접근해서 프로퍼티를 삭제, 추가할 수 있다면, 네임스페이스로 분리한 의미가 없다.
+
+```js
+const myApplication = {
+  getInfo(){}
+}
+
+myApplication.getInfo()
+```
+
+
+
+## 11.5 중첩 네임스페이스 패턴
+
+객체 리터럴 패턴을 안전화하게 사용하는 방법?
+
+```js
+const myApplication = myApplication || {}
+```
+
+
+
+## 11.6 즉시 실행 함수 표현식 패턴
+
+즉시 실행함수를 활용하여, 즉시 실행함수 스코프에 고유 식별자를 참조할 수 있게 하고, 전역 네임스페이스의 오염을 막는 역할도 한다.
+
+```js
+const wan = wan || {}
+
+((woo)=> {
+  	woo.foo = "foo"
+  	woo.bar = "bar"
+})(wan)
+
+
+console.log(wan) 
+```
+
+
+
+토스 es-toolkit [빌드 설정 파일](https://github.com/toss/es-toolkit/blob/626af3b292fbd169f9f296d0e5edcdaa263b0f8f/rollup.config.mjs#L101)을 살펴보자. rollup을 이용하여 browser용으로 빌드할 때, `format: iife` 로 설정되어있는 것을 볼 수 있다.
+
+```js
+// IIFE를 설정하여, 글로벌 네임스페이스 오염을 방지한다.
+output: {
+      format: 'iife',
+      name, // "_"로 설정함.
+      file: outFile,
+      sourcemap,
+      generatedCode: 'es2015',
+    },
+  };
+```
+
+
+
+직접 빌드해보면, 아래 내용을 가진  browser.global.js 로 빌드된 것을 볼 수 있다.
+
+```js
+var _=function(t){"use strict";function at(t,e)...}
+```
+
+
+
+이것을 script 형태로 사용한다면, 아래와 같이 사용할 수 있을 것이다.
+
+```html
+<!-- 브라우저에서 직접 <script> 태그로 사용 가능 -->
+<script src="browser.global.js"></script>
+<script>
+  // 라이브러리가 전역 _ 변수로 노출됨
+  _.someFunction(); 
+</script>
+```
+
+
+
+모던 번들러, es module을 사용하면 네임스페이스 충돌문제를 해결하여, 크게 개발자가 신경쓰지 않아도된다.
+
+
+
+* es module 에서는 alias를 사용하여 개발할 때, 변수 충돌문제에서 어느정도 자유롭다.
+
+  ```js
+  // 각 모듈은 자체 스코프를 가짐
+  import { something } from 'library-a';
+  import { something as otherthing } from 'library-b';
+  ```
+
+
+
+* bundling
+
+  번들링 과정에서 mangling, minifier로 변수, 함수 명이 변환되고, 각 모듈들의 고유 모듈 id로 부여되어 고유의 scope를 가진다.
+
+  ```js
+  // 고유 moduleId를 부여하여, namespace 변수 충돌문제를 해결한다.
+  (function(modules) {
+  }({
+      "moduleA_12345": function(module, exports) {
+          // moduleA 코드
+      },
+      "moduleB_67890": function(module, exports) {
+          // moduleB 코드
+      }
+  }));
+  ```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+