230601 자바스크립트 <script>와 <script type='module'>의 차이

230601 자바스크립트 <script type='module'>

인라인 자바스크립트를 사용하다보면 코드가 길어지고, 한 번에 원하는 코드를 찾기 힘들어진다.

이럴 때 사용할 수 있는 가장 간단한 방법은 코드를 여러 파일로 쪼개는 것이다.

코드 또는 함수를 여러 파일로 분리하면 서로 다른 js 파일 간에 불러와서 사용해야 할 경우가 생긴다.

이럴 때는 import와 export를 사용해 가져오고 내보낼 수 있는데, 이 구문을 사용할 때는 <script>에 type을 'module'로 지정해야 한다.

모듈의 차이점

모듈은 항상 strict mode를 사용해 실행된다.

엄격 모드를 통해 기존에 뜨지 않던 에러가 발생할 수도 있다.
에러로 잡히지 않던 잘못된 실수를 찾을 수 있다.

기존에는 조용히 무시되던 에러들을 throwing합니다.
JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡습니다.
가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어집니다.
엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지합니다.

-MDN

모듈은 단일 스크립트 스코프를 가진다.

모듈은 모듈만의 독립적인 스코프 가진다.
모듈의 최상단에서 변수를 선언해도 export를 통해 내보내지 않으면
전역 스코프에서 접근할 수 없다.
import를 사용해야 한다.

모듈은 최초 호출 시 한 번만 평가

한 번만 평가되기 때문에, 여러 번 평가되어 잘못된 일이 발생할 가능성이 적다.

 교차 출처 가져오기 시 CORS 프로토콜을 사용한다.

CORS을 사용하기 때문에 로컬이 아닌 서버에서 열어야 한다.

-로컬에서 스크립트 로드 시 에러

브라우저 구문 분석을 중단시키지 않는다.

일반 자바스크립트는 브라우저가 구문 분석 중 type="module"이 아닌 스크립트를 만나면
스크립트를 실행 후 가져오는 동안 구문 분석 중단한다.
하지만 모듈은 브라우저를 멈추게 하지 않고, HTML 문서가 완전히 준비된 후에 실행

---

코드가 길어진다면 코드 관리에 있어 자바스크립트 파일 분리는 선택이 아닌 필수이다.
파일 분리에 있어 모듈은 안전하고 독립적으로 자바스크립트를 실행할 수 있는 좋은 기능이다.