사용법

JS파일을 외부에서 가져다가 쓸때는 ES6부터 도입된 표준 모듈 시스템을 사용할 수 있다.

이때 주의점은, 스크립트에 모듈임을 명시해줘야 한다.

<script th:src="@{/js/home-tree-index-carousel.js}" type="module"></script>
<script th:src="@{/js/home-tree-explanation.js}" type="module"></script>

모듈로 명시된 스크립트 끼리는 export문과 import 문을 사용할 수 있다.

모듈은 변수, 함수 단위로 객체를 주고받아 사용 할수 있고, 각자의 네임스페이스를 사용할 수 있다.

export const bookExRemoveNone = () => {

  ...
  
  }

import {bookExRemoveNone} from "./home-tree-explanation.js";

이때 주의점은, export , import 를 사용하는 스크립트 코드 모두 모듈로 타입이 설정되어있어야 한다는 점이다.

비동기

import 하는 자바스크립트 코드는 비동기로 렌더링 되므로 렌더링의 순서에 신경쓸 필요 없다.