diff --git "a/\354\261\225\355\204\260_11/\354\230\244\355\230\234\354\204\261.md" "b/\354\261\225\355\204\260_11/\354\230\244\355\230\234\354\204\261.md" new file mode 100644 index 0000000..9952e45 --- /dev/null +++ "b/\354\261\225\355\204\260_11/\354\230\244\355\230\234\354\204\261.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