[JavaScript] ES모듈로 동적 로드와 버튼 액션 구현하기
2025. 1. 8. 15:34ㆍFrontend
인스타그램 클론 팀 프로젝트를 진행하던 중
동적으로 로드한 sidebar.js 내부함수를 호출했는데 무반응.
디버깅해보니 discovery(호출하는 곳)에는 버튼에 해당하는 html을 못찾아서 발생된 문제.
처음에 전역으로 선언했지만 메모리를 낭비할 수도 있겠단 생각에 다른 방식을 찾아봄(작은 프로젝트지만 확장성 고려)
검색하다 ES모듈이라는 것을 찾아서 적용하게 됨.
함수 내보내기
// sidebar.js
export function configButtonAction() {
const menuButton = document.querySelector(".menuButton");
menuButton.addEventListener("click", (e) => {
// button Action
}
}함수 가져오기
// discovery.js
import { configButtonAction } from "./sidebar.js";
document.addEventListener("DOMContentLoaded", () => {
renderSideBar(); // sidebar.html을 로드하는 함수
configButtonAction();
}이렇게만 선언할 경우 콘솔에서
discovery.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
라는 오류가 발생함.
HTML에서 모듈 로드
<head>
<script type="module" src="./js/discovery.js" defer></script>
</head>script 태그에 type속성 module로 추가해주면 브라우저가 es모듈로 인식함.
defer은 head에서 스크립트를 선언해줘서 추가해준건데
모듈로 변경시 defer를 써줄 필요없다고 함.
설명을 위해 삭제하지 않았음.
type="module" 속성을 지정한 스크립트는 기본적으로 비동기적으로 로드되기 때문에 defer를 사용하는 스크립트와 유사하므로 굳이 추가하지 않아도됨.
But, 모듈 스크립트의 명시적으로 의도된 로딩 타이밍을 강조하고싶다면 써도 된다!
이렇게하면 버튼 액션이 잘 동작하는 것을 확인할 수 있음.
'Frontend' 카테고리의 다른 글
| [React] Router를 활용하여 모달띄우기 (0) | 2025.01.20 |
|---|---|
| [VSCode] Live Server 실시간 업데이트 적용하기 (0) | 2024.11.15 |