diff --git "a/\354\261\225\355\204\260_11/\354\232\260\354\260\275\354\231\204.md" "b/\354\261\225\355\204\260_11/\354\232\260\354\260\275\354\231\204.md" new file mode 100644 index 0000000..ac36b00 --- /dev/null +++ "b/\354\261\225\355\204\260_11/\354\232\260\354\260\275\354\231\204.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 + + + +``` + + + +모던 번들러, 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 코드 + } + })); + ``` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +