티스토리 뷰
문제
프로젝트 진행중 객체를 import 했더니 undefined가 출력되는 문제가 발생했습니다. 코드의 문제는 아닌것 같았습니다. 검색해본 결과 순환참조 때문이라고 판단이 되었습니다.
원인
1. A파일에서 B파일을 import 합니다.
2. B파일에는 C파일을 import 하라고 합니다.
3. C파일을 load하기 시작합니다. C파일에서는 A파일을 load하라고 합니다.
4. A파일은 이미 로드되었기 때문에 캐시에서 즉시반환합니다. 하지만 A파일은 아직 B파일을 import하는 코드를 완료하지 못했기때문에 undefined 값을 export 합니다.
위와같은 문제로 제대로 import 되지않고 undefined 를 불러오지않았나 생각됩니다.
순환참조 문제는 그 자체만으로는 문제가 되지 않지만 문제가 생겼을때 증상이 모호하다는 점에 있는것 같습니다. 가능하면 순환참조를 끊어주는것이 잠재적인 문제를 방지할수 있습니다.
해결
일단 어디에서 순환참조가 일어나는지를 알아야했습니다. 순환참조를 알아내는 라이브러리는 여러가지 있겠지만 제가 찾은건 madge 라는 라이브러리였습니다. 바로 적용해 보았습니다.
사용법
npx madge --circular --extensions ts ./
위 명령어를 입력하면 순환참조된 파일들을 순서대로 나열해줍니다.
순환참조된 파일을 찾았고 연결고리를 끊어주니 정상적으로 동작되는것을 확인할 수 있었습니다.
'프로그래밍 언어 > javascript' 카테고리의 다른 글
javascript 불변성(immutable) 유지하면서 배열 다루기 (0) | 2020.12.17 |
---|
댓글