기초 JS, CS 상식 - 모듈

본 내용은 프로그래머스의 코딩테스트 광탈 방지 A to Z : JavaScript 강의를 토대로 작성하였습니다.

1.모듈 시스템 등장 이전

• 일반적으로 웹 사이트는 여러개의 JavaScript로 이루어져 있음
  • 각각 파일을 별개의 프로그램으로 취급
  • 웹 사이트의 역할이 늘어남에 따라 파일도 크게 증가
• 스크립트 파일간 통신을 위해 전역 스코프의 변수와 함수를 사용해왔음
  • 즉시 실행 함수를 통해 전역 스코프가 오염되는 것을 막을 수 있었음
  • but. 스크립트간의 의존도를 파악하기 힘듦
  • 실행순서를 제어해야 했음

2. 모듈

• 스크립트간 의존도 파악 용히
• 실행 순서 제어 가능

모듈 vs. 컴포넌트

• 모듈 : 설계 시점에 의미있는 요소
• 컴포넌트 : 런타임 시점에 의미있는 요소

JavaScript에서의 모듈

• 런타임에서 실행
• 파일 하나가 프로그램이 되어 모듈로 지어졌을 것으로 추측
  • 한 파일내에 컴포넌트를 여러개 만들고 필요한 것만 내보낼 수 있음
• 설계시, 용어가 혼동
• 디렉토리 단위를 모듈 개념에 가깝게 사용
• import, export를 통해 모듈 불러오기와 내보내기 수행
• 로컬 파일에서 동작하지 않고 HTTP, HTTPS 프로토콜을 통해서만 동작

3. 기초 사용 방법

script 태그

• type attribute가 module이면, 해당 script는 module로 동작
• module로 동작하게 되면 import를 통해 다른 파일을 불러올 수 있음

<script type="module">
 // ...
</script>  

모듈의 특징

• 항상 use strict로 실행
• 모듈 레벨 스코프가 있음
  • 최상위에 변수를 선언해도 전역으로 올라가지 않고 자체적인 모듈 스코프에 올라감
  • import하지 않는 한, 서로간 참조 불가능
• 단 한 번만 평가
  • 두 번 import 되어도 실행은 한 번만 됨
• 지연 실행됨
  • 일반 script는 body태그에서 순서에 따라 dom이 생성되기 전에 실행 가능
  • module은 differ 옵션이 없어도 자동 지연 실행
• webpack과 같은 번들링 시스템을 사용하면, type="module"을 사용할 일이 별로 없음

Reference

프로그래머스의 코딩테스트 광탈 방지 A to Z : JavaScript