2015년 ES6문법이 도입되면서 javascript에서도 모듈을 가지고 올 수 있는 import와 export가 생겼다. import를 할 때 아래와 같은 2가지의 방식이 있는데 1. import() 2. import ...from 이 친구들 똑같이 모듈을 import하지만 작동방식이 다르다. 오늘은 그 작동방식에 대해 정리해보려 한다.(간단히) import ...from의 작동방식 import하기전에 모듈들을 미리 로드 해놓고 import를 수행함 import.html import.js const temp = "temp입니다."; export { temp }; 결과 결과를 보면 temp에 모듈에서 export한 temp변수가 제대로 들어온 것을 확인할 수 있다. 그리고 눈 여겨봐야 할 점은 좌측의 소..

다음과 같은 코드(샘플)가 있다고 가정해보자. import.html import.js let initialized = true; export { initialized }; 코드만 보면 그냥 변수하나를 export하고 import해서 콘솔에 찍어주는 단순한 코드인데 근데 이런 상황에서 undefined가 뜨는 상황이 발생했다고 가정해보자. ( 가정이다. ) 분명 javascript는 동기적인 언어이기 때문에 import를 먼저 실행할 것이고 그 뒤에 console.log()가 실행이 될텐데.. 문제의 원인은 간단했다. 바로 import라는 키워드는 동적이 아니라, 내부적으로 비동기 프로세스를 탄다는 것이다. (이걸 모르고 있었음.. 당연히 동기인 줄 알았다.) 대충 그림으로 설명하면 이렇다. 실제 디버깅을..