11장-네임스페이스-패턴

네임스페이스는 코드 단위를 고유한 식별자로 그룹화한 것을 뜻합니다. 이는 페이지 내 다른 스크립트와 변수 또는 메서드 이름이 충돌하여 코드가 실행되지 않는 문제를 방지하기 위해서 필요한 방식입니다.

11.1 네임스페이스의 기초

네임스페이스 패턴의 종류는 다음과 같습니다.

단일 전역 변수
접두사 네임스페이스
객체 리터럴 표기법
중첩 네임스페이스
즉시 실행 함수 표현식
네임스페이스 주입

11.2 단일 전역변수 패턴

하나의 전역 변수를 주요 참조 객체로 사용하는 방식입니다.

const chatApi = (() => {
    function getChatList(){
        // ...
    }
    
    function postChatMessage(newMessage){
        // ...
    }
    
    return {
        getChatList,
        postChatMessage
    }
})();

chatApi.getChatList();

11.3 접두사 네임스페이스 패턴

고유한 접두사를 선정한 다음 메서드, 변수, 객체를 뒤에 붙여서 사용합니다.

const chatAPI_getChatList = {}
const chatAPI_postChatMessage = {}

해당 패턴의 단점은 애플리케이션의 규모가 커질수록 많은 전역 객체가 생성된다는 점입니다.

11.4 객체 리터럴 표기법 패턴

const chatAPI = {
    getChatList: () => {
        // ...
    },
    postChatMessage: () => {
        // ...
    }
}

객체 네임스페이스가 존재하는지 확인하고 존재하지 않다면 다음과 같이 설정할 수 있습니다.

var myApplication = myApplication || {};

11.6 즉시 실행 함수 표현식 패턴

즉시 실행 함수는 정의 직후 바로 실행되는, 이름이 없는 함수입니다.

(() => { /** */ })();

(function foobar(){ /** */ }());

즉시 실행 함수는 애플리케이션의 로직을 캡슐화하여 전역 네임스페이스로부터 보호하는데 널리 사용되는 방법입니다.

11.7 네임 스페이스 주입 패턴

즉시 실행 함수 패턴의 또 다른 변형입니다. 이 패턴에서는 함수 내에서 this를 네임스페이스의 프록시로 활용하여 특정 네임스페이스에 메서드와 속성을 '주입'합니다.

const chatAPI = chatAPI || {};
chatAPI.utils = {};

(function (){
    let retry = 3;
    
    this.getRetry = () => retry;
    
    this.setRetry = (newCount) => {
        retry = newCount;
    }
    
    this.tool = {};
}).apply(chatAPI.utils);

console.log(chatAPI.utils.getRetry()); // 3 출력

11.8 고급 네임스페이스 패턴

11.8.1 중첩 네임스페이스 자동화 패턴

const api = {
    chat: {
        get : {
            list : {
                // ...
            }
        }
    }
}

console.log(api.chat.get.list());

하지만 객체의 깊이가 끊임없이 깊어질 수 있다는 단점이 있었고, 네임스페이스를 더 쉽게 재사용할 수 있는 일반화된 함수의 형태로 구현하였습니다.

const app = {};

function extend(ns, ns_string) {
    const parts = ns_string.split('.');
    let parents = ns;
    let pl;
    
    pl = parts.length;
    
    for (let i = 0; i < pl; i++) {
        if ( typeof parents[parts[i]] === "undefined") {
            parents[parts[i]] = {}
        }
        parents = parents[parts[i]];
    }
    
    return parents;
}

11.8.2 의존성 선언 패턴

로컬 변수를 사용하는 것이 전역 변수를 사용하는 것보다 더 빠릅니다. 또한 복잡한 애플리케이션에서는 가독성을 높일 수 있습니다.

함수나 모듈에서 사용할 로컬 네임스페이스를 함수 영역의 상단에 선언할 것을 권장하며(단일 변수 패턴 사용), 이 방식을 의존성 선언 패턴이라고 부릅니다.

11.8.3 심층 객체 확장 패턴

객체 리터럴 표기법으로 선언된 네임스페이스는 다른 객체와 쉽게 확장될 수 있습니다. 병합 이후에는 두 네임스페이스의 속성과 함수 모두를 동일한 네임스페이스에서 접근할 수 있습니다.

// 첫 번째 객체 선언
const MyNamespace = {
    version: "1.0",
    sayHello: function() {
        console.log("Hello!");
    }
};

// 두 번째 객체로 확장 (Object.assign 사용)
Object.assign(MyNamespace, {
    author: "John Doe",
    sayGoodbye: function() {
        console.log("Goodbye!");
    }
});

// 사용 예시
console.log(MyNamespace.version);  // "1.0"
console.log(MyNamespace.author);   // "John Doe"
MyNamespace.sayHello();            // "Hello!"
MyNamespace.sayGoodbye();          // "Goodbye!"

11.9 권장하는 패턴

객체 리터럴 패턴을 사용한 중첩 네임스페이스 패턴을 추천합니다. 가능하다면 중첩 네임스페이스 자동화 패턴을 구현하여 적용합니다.

즉시 실행 함수 표현식의 경우 중소 규모의 애플리케이션의 경우 잘 동작할 수 있습니다. 하지만 대규모 코드베이스의 경우에는 가독성과 확장성을 높여주는 보다 간결한 해결책이 필요합니다.

Last modified: 04 April 2025