다음과 같은 코드(샘플)가 있다고 가정해보자.
import.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<script type="module">
import { initialized } from "./import.js";
console.log(initialized);
</script>
<body></body>
</html>
import.js
let initialized = true;
export { initialized };
코드만 보면 그냥 변수하나를 export하고 import해서 콘솔에 찍어주는 단순한 코드인데
근데 이런 상황에서 undefined가 뜨는 상황이 발생했다고 가정해보자. ( 가정이다. )
분명 javascript는 동기적인 언어이기 때문에 import를 먼저 실행할 것이고
그 뒤에 console.log()가 실행이 될텐데..
문제의 원인은 간단했다.
바로 import라는 키워드는 동적이 아니라, 내부적으로 비동기 프로세스를 탄다는 것이다.
(이걸 모르고 있었음.. 당연히 동기인 줄 알았다.)
대충 그림으로 설명하면 이렇다.
실제 디버깅을 찍어봐도 import가 먼저 수행된후, 해당 .js의 export 구문이 수행되는 것을 확인 할 수 있었다.
이런 경우에는 모듈의 로딩 속도, 네트워크 연결 상태, 비동기적인 모듈 로딩 등 다양한 요인이 있을 수 있다.
( 정확히는 까먹었는데, 부모에서 import하고 자식에서 import하고
여러곳에서 같은 파일을 import하다 보니 꼬였을 수도 있다고...)
결국 이 문제를 해결하려면 import를 동기적으로 처리하면 문제를 해결 할 수 있다.
await import()나 import().then을 이용해서 말이다..
관련 내용은 아래 링크에서 확인하도록 하자.
[JS] 동적으로 모듈을 import(dynamic import)하는 방법 : import() 사용
'FrontEnd > JavaScript' 카테고리의 다른 글
| [JS] 동적으로 모듈을 import(dynamic import)하는 방법 : import() 사용 (0) | 2023.11.24 |
|---|---|
| [JS] import() 방식과 import ...from 방식의 차이점에 대한 이야기 :(feat. import시 undefined가 뜨는 현상) (0) | 2023.11.24 |
| [JS] html2canvas + jspdf 조합으로 HTML에서 원하는 영역을 PDF로 변환해보자. (0) | 2023.11.13 |
| [JS] Vue 컴포넌트의 내용을 인쇄하는 기능을 구현하며 생겼던 문제와 원인에 대한 정리 (0) | 2023.11.11 |
| [JS] window.print()를 이용해서 특정영역을 인쇄하는 기능을 구현하는 방법 (0) | 2023.11.11 |
