DRF+ AI) 웹개발 최종 - 4일차(js export/ import)

회원가입 및 로그인 관련 기능이 어느정도 완성된 관계로, 프론트 엔드 기능을 구현하며 테스트 해보기로 하였다.

 

이때 팀원이 js에서 export, import를 이용하는 것을 제안하였다. 이유는 아래와 같다.

1. 불필요한 코드 중복을 줄일 수 있다.
2. 명시적으로 export, import를 이용함으로서 추적이 쉽다.
3. 프론트엔드에서 필요한 js만 불러옴으로서 부담을 줄일 수 있다.

사용하는 방법은 다음과 같다.

//file1.js

export function canadianToUs(canadian) {
  return roundTwoDecimals(canadian * exchangeRate);
}

//file2.js
import { canadianToUs } from "./file1.js";

이렇게 import, export를 사용한 js 파일은 html에서 불러올 때 type="module"을 지정해야한다.

<script src="./file2.js" type="module"></script>

 

문제 발생 : 위와같이 함수를 import해오자, onclick 시 함수 실행을 시도하자 해당 함수를 찾을 수 없다는 오류가 발생하였다.

 

원인: type="module"을 사용하여 함수를 불러오면 문서 전체에서 사용가능한 것이 아니라, 해당 스크립트 태그 안에서만 사용가능하다!

따라서 이벤트 핸들러가 아닌 이벤트 리슨너를 이용해 js 내에서 동작을 마쳐야한다.

<script type="module">
    import { canadianToUs } from "./file1.js";

    const btnNode = document.getElementById("btn");

    btnNode.addEventListener("click", () => {
      canadianToUs();
    });

</script>