[이상조] 챕터 11: 네임스페이스 패턴 (#90)

챕터_11/이상조.md

@@ -0,0 +1,348 @@
+안녕하세요! 자바스크립트의 네임스페이스 패턴에 대해 설명해드리겠습니다.
+
+## 네임스페이스란?
+
+네임스페이스는 큰 프로그램을 구조화하고 관련 코드들을 논리적으로 그룹화하는 방법입니다. 주요 목적은 다음과 같습니다:
+
+1. **이름 충돌 방지**: 서로 다른 부분의 코드에서 같은 이름을 사용할 때 발생할 수 있는 충돌을 방지
+2. **코드 구조화**: 관련된 기능들을 하나의 이름 아래 구조적으로 관리
+3. **전역 스코프 오염 방지**: 전역 변수/함수의 수를 줄여 전역 스코프의 오염을 방지
+
+## 네임스페이스의 장점
+
+1. **모듈화**: 코드를 논리적인 단위로 구분하여 관리 가능
+2. **캡슐화**: private 변수/함수를 구현할 수 있음
+3. **유지보수성**: 코드의 구조화로 인한 유지보수 용이성 향상
+4. **재사용성**: 필요한 기능만 선택적으로 사용 가능
+
+## 네임스페이스의 단점
+
+1. **깊은 중첩**: 네임스페이스가 깊어질수록 코드가 복잡해질 수 있음
+2. **성능**: 깊은 중첩의 경우 속성 접근 시간이 늘어날 수 있음
+3. **번들 크기**: 모든 코드가 하나의 객체에 포함되므로 불필요한 코드도 포함될 수 있음
+
+
+## 1. 단일 전역 변수 패턴
+
+가장 기본적인 네임스페이스 패턴으로, 하나의 전역 객체를 생성하여 모든 기능을 이 객체에 추가하는 방식입니다.
+
+```javascript
+var MYAPP = {};
+
+MYAPP.name = "My Application";
+MYAPP.version = "1.0.0";
+
+MYAPP.calculateTax = function(amount) {
+    return amount * 0.1;
+};
+
+MYAPP.formatCurrency = function(amount) {
+    return `₩${amount.toLocaleString()}`;
+};
+```
+
+### 장점:
+- 구현이 매우 간단함
+- 전역 네임스페이스 오염을 최소화
+- 코드 충돌 가능성 감소
+
+### 단점:
+- 모든 변수와 함수가 public
+- 구조화가 부족
+- 확장성이 제한적
+
+## 2. 접두사 네임스페이스 패턴
+
+모든 변수와 함수 이름 앞에 특정 접두사를 붙여서 구분하는 방식입니다.
+
+```javascript
+// 회사_프로젝트_기능 형태로 접두사 사용
+const COMPANY_PROJECT_userCount = 0;
+const COMPANY_PROJECT_maxUsers = 100;
+
+function COMPANY_PROJECT_addUser() {
+    if (COMPANY_PROJECT_userCount < COMPANY_PROJECT_maxUsers) {
+        COMPANY_PROJECT_userCount++;
+    }
+}
+
+function COMPANY_PROJECT_removeUser() {
+    if (COMPANY_PROJECT_userCount > 0) {
+        COMPANY_PROJECT_userCount--;
+    }
+}
+```
+
+### 장점:
+- 구현이 매우 간단함
+- 이름 충돌 방지가 확실함
+
+### 단점:
+- 코드가 지저분해짐
+- 타이핑해야 할 양이 많아짐
+- 압축이 어려움
+- 현대적인 개발에서는 거의 사용되지 않음
+
+## 3. 객체 리터럴 표기법
+
+관련된 기능들을 객체로 그룹화하는 패턴입니다.
+
+```javascript
+const MyApplication = {
+    // 설정 관련
+    config: {
+        apiUrl: 'https://api.example.com',
+        timeout: 5000,
+        debug: true
+    },
+
+    // 유틸리티 함수들
+    utils: {
+        formatDate: function(date) {
+            return new Date(date).toLocaleDateString();
+        },
+        validateEmail: function(email) {
+            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+        }
+    },
+
+    // 사용자 관련 기능
+    user: {
+        data: {
+            name: '',
+            email: '',
+            preferences: {}
+        },
+        login: function(credentials) {
+            // 로그인 로직
+        },
+        logout: function() {
+            // 로그아웃 로직
+        },
+        updatePreferences: function(newPrefs) {
+            this.data.preferences = {...this.data.preferences, ...newPrefs};
+        }
+    }
+};
+
+// 사용 예시
+MyApplication.utils.formatDate(new Date());
+MyApplication.user.login({username: 'test', password: '1234'});
+```
+
+### 장점:
+- 코드 구조화가 명확함
+- 관련 기능들을 논리적으로 그룹화
+- 구현이 간단함
+
+### 단점:
+- 모든 멤버가 public
+- 의존성 관리가 어려움
+- 큰 애플리케이션의 경우 관리가 복잡해질 수 있음
+
+## 4. 중첩 네임스페이스 패턴
+
+객체를 계층적으로 구성하는 패턴입니다.
+
+```javascript
+var MYAPP = MYAPP || {};
+
+// 중첩된 네임스페이스 생성 함수
+MYAPP.createNS = function(namespace) {
+    let parts = namespace.split('.');
+    let parent = MYAPP;
+
+    if (parts[0] === 'MYAPP') {
+        parts = parts.slice(1);
+    }
+
+    for (let i = 0; i < parts.length; i++) {
+        if (typeof parent[parts[i]] === 'undefined') {
+            parent[parts[i]] = {};
+        }
+        parent = parent[parts[i]];
+    }
+
+    return parent;
+};
+
+// 네임스페이스 생성
+MYAPP.createNS('MYAPP.models');
+MYAPP.createNS('MYAPP.views');
+MYAPP.createNS('MYAPP.controllers');
+
+// 기능 구현
+MYAPP.models.User = function(name) {
+    this.name = name;
+};
+
+MYAPP.controllers.UserController = {
+    createUser: function(name) {
+        return new MYAPP.models.User(name);
+    }
+};
+
+// 사용 예시
+const userController = MYAPP.controllers.UserController;
+const newUser = userController.createUser('John');
+```
+
+### 장점:
+- 체계적인 코드 구조화
+- 깊은 계층 구조 표현 가능
+- 모듈화가 용이
+
+### 단점:
+- 긴 체이닝으로 인한 성능 저하 가능성
+- 코드가 복잡해질 수 있음
+- 의존성 관리가 어려움
+
+## 5. 즉시 실행 함수 표현식 (IIFE) 패턴
+
+함수를 즉시 실행하여 private 스코프를 만드는 패턴입니다.
+
+```javascript
+var MYAPP = (function() {
+    // private 변수와 함수
+    let privateVariable = 0;
+
+    function privateFunction() {
+        return privateVariable;
+    }
+
+    // public API
+    return {
+        // public 변수
+        publicVariable: "I'm public",
+
+        // public 메서드
+        incrementCounter: function() {
+            privateVariable++;
+            return privateVariable;
+        },
+
+        getCounter: function() {
+            return privateFunction();
+        },
+
+        // 모듈 초기화
+        init: function() {
+            // 초기화 로직
+            console.log('Module initialized');
+        }
+    };
+})();
+
+// 의존성 주입을 지원하는 버전
+var MYAPP = (function($, window, document, undefined) {
+    // jQuery, window, document 객체를 지역 변수로 사용 가능
+
+    return {
+        init: function() {
+            $(document).ready(function() {
+                // DOM 조작 로직
+            });
+        }
+    };
+})(jQuery, window, document);
+```
+
+### 장점:
+- private 스코프 생성 가능
+- 의존성 주입 가능
+- 클로저를 통한 데이터 은닉
+- 모듈화가 용이
+
+### 단점:
+- 디버깅이 어려울 수 있음
+- 과도한 사용 시 메모리 사용량 증가
+- 복잡한 의존성 관리가 필요
+
+## 6. 네임스페이스 주입 패턴
+
+의존성을 외부에서 주입받는 패턴입니다.
+
+```javascript
+var MYAPP = MYAPP || {};
+
+// 네임스페이스 주입을 받는 모듈
+(function(app) {
+    // private 변수
+    let counter = 0;
+
+    // 모듈 기능을 네임스페이스에 추가
+    app.module = {
+        increment: function() {
+            return ++counter;
+        },
+        decrement: function() {
+            return --counter;
+        }
+    };
+
+    // 의존성이 필요한 기능
+    app.dependentModule = function(utils) {
+        return {
+            doSomething: function() {
+                // utils의 기능 사용
+                return utils.helperFunction();
+            }
+        };
+    };
+
+})(MYAPP);
+
+// 다른 모듈에서 의존성 주입
+(function(app) {
+    // utils 모듈 정의
+    app.utils = {
+        helperFunction: function() {
+            return 'Helper function called';
+        }
+    };
+
+    // dependentModule에 utils 주입
+    app.initializedModule = app.dependentModule(app.utils);
+
+})(MYAPP);
+
+// 사용 예시
+console.log(MYAPP.module.increment()); // 1
+console.log(MYAPP.initializedModule.doSomething()); // "Helper function called"
+```
+
+### 장점:
+- 유연한 의존성 관리
+- 테스트가 용이
+- 모듈 간 결합도 감소
+- 코드 재사용성 향상
+
+### 단점:
+- 구현이 복잡할 수 있음
+- 의존성 관리가 복잡해질 수 있음
+- 초기 설정이 번거로움
+
+---
+
+처음 네임스페이스 듣고 타입스크립트 namespace랑 헷갈림  
+
+```ts
+namespace User {
+    export interface Response {
+        name: string;
+    }
+
+    export interface Request {
+        ...
+    }
+}
+
+namespace Product {
+    export interface Response {
+        id: number;
+        title: string;
+        price: number;
+    }
+}
+
+```