모듈

• 모듈은 독립 가능한 기능의 단위
• 여러 모듈을 결합하여 하나의 프로그램을 만들 수 있음
• 모듈의 장점 3가지
  1. 유지 보수 용이 : 중복 코드 최소화
  2. 전역 스코프 오염 방지 : 이름 공간이 파일 단위로 제한되므로 전역 이름 공간을 침범하지 않음
  3. 재사용성 향상 : 모듈을 다른 프로젝트에 공유하여 재사용

내부 모듈과 외부 모듈

<aside> 💡 내부 모듈은 네임스페이스를 의미하며, 외부 모듈은 export로 선언해서 외부에 공개된 모듈

</aside>

• 모듈은 크게 Internal Module(내부 모듈)과 External Module(외부 모듈) 2가지 방식으로 나뉜다
• module-loader 의존성 여부에 따라 두 모듈의 차이를 나눈다.
• Internal Module은 TS 특유의 모듈 방법으로 다른 module-loader에 의존하지 않는다.
  • Internal Module인 네임스페이스는 전역 이름 공간과 분리된 네임스페이스 단위의 이름 공간이다
  • 같은 네임스페이스는 다른 파일에서 별도 참조문 없이 선언된 모듈을 참조(reference)할 수 있다.
  • 같은 네임스페이스 안에선 클래스, 함수, 변수 등 이름을 중복된 이름을 선언할 수 없다.
  • 다른 네임스페이스에선 이름이 같아도 충돌하지 않는다.
• External Module은 module-loader에 의존하여 모듈화하는 방법.
  • export로 선언한 모듈은 External Module이라고 한다
  • External Module의 이름 공간은 파일 단위로 제한된다. 다른 파일이라면 중복 이름을 선언할 수 있다
  • ES Module, CommonJS(Node), Require.js(AMD) 처럼 moduler-loader를 사용한다.
• ⭐️ TS에서 top-level에 export 혹은 import가 있으면 모듈 파일로 취급한다. export import가 없으면 일반 스크립트로 파일로 취급하며, 해당 파일내 생성된 변수는 전역 스코프에 영향을 미친다.

네임스페이스 (내부 모듈)

<aside> 💡 네임스페이스의 역할과 기능은 module과 같다고 보면 된다.

</aside>

네임스페이스는 하나의 독립된 이름 공간을 여러 파일에 걸쳐 공유할 수 있다. 내부 모듈은 자바스크립트 ES6으로 컴파일될 때 즉시 실행 함수로 변환된다. 즉시 실행 함수 내부는 전역 스코프와 분리된 이름 공간이다.

아래 컴파일 후 코드에서 즉시실행 함수로 보낸 파라미터 (Hello || (Hello = {}))는 모듈이 있으면 전달하고, 없으면 Hello를 {}로 초기화해서 전달한다. 이를 모듈 패턴에선 느슨한 확장이라고 부른다. 만약 Hello만 파라미터로 전달한 경우라면 단단한 확장이라고 부른다.