# 네임스페이스 멀티 파일
## 네임스페이스 멀티 파일 관리
네임스페이스 코드를 단 하나의 파일에서 관리할 필요는 없습니다. 예를 들어 `events.ts`, `selectors.ts`로 나뉘어 개발된 파일이 2개 있다고 가정 해봅니다. 각각의 코드는 다음과 같이 작성되어 있습니다.
{% code title="Dom/events.ts" %}
```typescript
namespace Dom {
export let version:string = '0.0.2';
export function on(
el : Element|Document,
type : string,
handler : (e:Event)=>void,
is_capture : boolean = false
):void {
el.addEventListener(type, handler, is_capture);
}
export function off(
el : Element|Document,
type : string,
handler : (e:Event)=>void,
is_capture : boolean = false
):void {
el.removeEventListener(type, handler, is_capture);
}
}
```
{% endcode %}
{% code title="Dom/selectors.ts" %}
```typescript
namespace Dom {
const document = window.document;
export function el(
selector:string,
context:Element|Document = document
): Element {
return context.querySelector(selector);
}
export function els(
selector:string,
context:Element|Document = document
): NodeList {
return context.querySelectorAll(selector);
}
}
```
{% endcode %}
그리고 네임스페이스 Dom을 활용하려는 코드를 가진 `app.ts` 파일이 있다고 합시다. 하지만 아래 작성된 코드는 네임스페이스를 호출하지 않아 오류가 발생합니다.
{% code title="app.ts" %}
```typescript
let body = Dom.el('body');
Dom.on(body, 'click', function(e) {
this.classList.toggle('clicked');
});
```
{% endcode %}
### 방법 1. 컴파일 된 파일 로드
컴파일 된 JavaScript 파일들을 `app.js` 보다 먼저 호출하면 `app.js` 코드가 정상 작동합니다. 분명 잘 작동하지만 문제가 있습니다. **나눠진 파일 개수가 많아질수록 서버에 요청(Request)하는 횟수가 증가하게 되어 성능에 악영향**을 미칩니다.
```markup