네임스페이스

JavaScript(ES)에는 네임스페이스를 공식적으로 지원하지 않지만, TypeScript를 사용하면 네임스페이스를 활용할 수 있습니다. 네임스페이스를 사용하는 기본 작성 방법은 다음과 같습니다.

// 네임스페이스 Dom 정의
namespace Dom {

  // 외부에서 접근 불가
  const document = window.document;

  // 외부에서 접근 가능하도록 export
  export function el(selector:string, context:HTMLElement|Document = document) {
    return context.querySelector(selector);
  }

  // 외부에서 접근 가능하도록 export
  export function els(selector:string, context:HTMLElement|Document = document) {
    return context.querySelectorAll(selector);
  }

  // export 하지 않은 네임스페이스 내부에 정의된 함수는 외부에서 접근 불가
  function each(list:any[], callback:(item:any, index:number, list:any[])=>void): void {
    list.forEach(callback);
  }

}

// [오류]
// [ts] 'el' 이름을 찾을 수 없습니다.
// any
console.log(el('body')); // 오류

// [오류]
// [ts] 'typeof Dom' 형식에 'each' 속성이 없습니다.
// any
Dom.each([1, 4, 9], (item, index) => console.log(index, item));

// 네임스페이스 Dom을 통해서만 정의된 el()에 접근 사용 가능합니다.
console.log(Dom.el('body')); // <body>

JavaScript(ES5)로 컴파일 된 코드를 살펴보면 IIFE 패턴을 사용해 외부와 차단된 공간을 만든 후, Dom 객체를 네임스페이스처럼 활용합니다. 이 방법은 네임스페이스를 지원하지 않는 JavaScript 개발자들이 오래 전부터 사용하던 방법 중 하나 입니다.

컴파일 코드:

JavaScript

// 네임스페이스 Dom 정의
var Dom;
(function (Dom) {
  // 외부에서 접근 불가
  var document = window.document;
  // 외부에서 접근 가능하도록 export
  function el(selector, context) {
    if (context === void 0) { context = document; }
    return context.querySelector(selector);
  }
  Dom.el = el;
  // 외부에서 접근 가능하도록 export
  function els(selector, context) {
    if (context === void 0) { context = document; }
    return context.querySelectorAll(selector);
  }
  Dom.els = els;
  // export 하지 않은 네임스페이스 내부에 정의된 함수는 외부에서 접근 불가
  function each(list, callback) {
    list.forEach(callback);
  }
})(Dom || (Dom = {}));

실습

참고

Previous네임스페이스와 모듈 Next네임스페이스 멀티 파일

Last updated 5 years ago