JavaScript 모듈 동작 방식 및 순환 참조 문제

JavaScript 모듈은 런타임시 최초 Import를 만날 때 단 한 번만 평가하고 반환됩니다. 이렇게 반환된 모듈은 Global로 관리되고 있는 모듈 객체에 추가됩니다. 따라서 이후 다른 곳에서 동일한 모듈을 Import하게 되면 다시 평가하는 것이 아닌, 모듈 객체에서 가지고 오게 됩니다.

이런 모듈을 사용할 때 중요한 점은 순환 참조를 주의해야 한다는 것입니다. 순환 참조란 A모듈에서 B모듈을 Import하고, B모듈에서도 A모듈을 Import할 때 아직 반환되지 않은 함수를 사용하면 에러가 나는 문제입니다.
이 문제를 해결하는 방법으로는 모듈의 Dependency 순서를 명확히 지정하는 것이고, 좀 복잡하고 Dependency가 많다면 별도의 모듈을 Import하는 파일을 만들어서 해당 파일 내부에서 모듈 Import를 관리하는 것도 하나의 방법입니다.