챕터 11

챕터_11/오혜성.md

@@ -0,0 +1,109 @@
+# 네임스페이스 패턴
+
+- 네임스페이스는 코드 단위를 고유한 식별자로 그룹화한 것을 뜻함
+
+## 단일 전역 변수 패턴
+
+```js
+const myUniqueNamespace = {};
+```
+
+## 접두사 네임스페이스 패턴
+
+```js
+const foo_property = {};
+```
+
+## 객체 리터럴 표기법 패턴
+
+```js
+const myUnique = {
+  getInfo: () => {}
+  models: {};
+}
+```
+
+## 중첩 네임스페이스 패턴
+
+```js
+foo.util.DOM.getElementById('bar');
+```
+
+## 즉시 실행 함수 표현식 패턴
+
+```js
+const namespace = {};
+
+((n) => {
+  n.foo = 'foo';
+})(namespace)
+```
+
+## 네임스페이스 주입 패턴
+
+```js
+const namespace = {};
+
+(() => {
+  this.foo = 'foo';
+}).apply(namespace);
+```
+
+- 객체/클로저 내에서 명시적으로 선언할 때 직접 접근이 불가능한 상황에서만 사용하는 것을 추천
+
+## 고-급 네임스페이스 패턴
+
+
+### 중첩 네임스페이스 자동화 패턴
+
+```js
+const namespace = {};
+const mod = extend(namespace, "module1.module2.module3");
+
+console.log(mod === namespace.module1.module2.module3); // true
+```
+
+### 의존성 선언 패턴
+
+```js
+const namespace = {
+  // 대충 여기에 중첩된 거 많음
+};
+
+const util = namespace.DOM.util;
+util.getById('bar');
+```
+
+- 로컬 변수를 사용하는 것이 전역 변수에 매번 접근해 사용하는 것보다 빠름
+> 이전 챕터에서 공유한 것처럼 체이닝을 덜하는 이점도 있을 것이라 생각
+
+
+## 내 생각
+
+- ES 모듈을 이용하는 현대적인 환경에서 전역 네임스페이스를 고려하는 환경이 있을까 싶음
+  - 너무 내가 어플리케이션 레이어 개발자인가 ;;
+
+- 코드 스니펫 정도에서 배워가는 건 있었다고 생각 (살짝)
+
+- 의존성 선언 패턴(이게 이름이 적절한지는 모르겠는데)이 좋은 건 알겠으나, 가독성 측면에서 좋지 않다고 느낀 경험
+
+```tsx
+const UserCard = () => {
+  const { data: {
+    foo: {
+      name
+    }
+  } } = useSuspenseQuery(대충getUserQuery);
+
+  return <div>{name}</div>
+}
+
+// 간단한 형태라면 이렇게 사용해도 좋겠으나
+
+const ComplexUserCard = () => {
+  const { data: user } = useSuspenseQuery(대충getUserQuery);
+
+  // 복잡한 형태라면 해당 줄만 읽어도 출처를 알 수 있는 형태가 좋았던 경험이 있음
+  return <div>{user.foo.name}</div>
+}
+```