FrontEnd/JavaScript

[JS] ES6에서 import를 했는데 undefined값을 읽는 문제에 관한 이야기

모찌바라기 2023. 11. 23. 23:37
728x90
반응형

 

 

 

 

 

다음과 같은 코드(샘플)가 있다고 가정해보자.

 

 

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() 사용

 

 

 

728x90
반응형