From 8eede77bff0da4f633443770ca020b2585bfeaab Mon Sep 17 00:00:00 2001 From: LEESANGJO Date: Sun, 24 Nov 2024 09:53:41 +0900 Subject: [PATCH] =?UTF-8?q?Create=20=EC=9D=B4=EC=83=81=EC=A1=B0.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\354\235\264\354\203\201\354\241\260.md" | 348 ++++++++++++++++++ 1 file changed, 348 insertions(+) create mode 100644 "\354\261\225\355\204\260_11/\354\235\264\354\203\201\354\241\260.md" diff --git "a/\354\261\225\355\204\260_11/\354\235\264\354\203\201\354\241\260.md" "b/\354\261\225\355\204\260_11/\354\235\264\354\203\201\354\241\260.md" new file mode 100644 index 0000000..98d8d90 --- /dev/null +++ "b/\354\261\225\355\204\260_11/\354\235\264\354\203\201\354\241\260.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; + } +} + +```