인프런 커뮤니티 질문&답변

박한영님의 프로필 이미지

작성한 질문수

웹 게임을 만들며 배우는 React

common js 방식으로 내보내기를 하던 도중 문제가 생겨 질문 드립니다!

21.12.29 12:33 작성

·

174

0

강의에서는 es6 방식을 사용하지만, common js도 알아두어야 할 것 같아서, 혼자 common js를 사용해보던 도중 문제가 발생하여 질문 드립니다!

문제 요약: common js 방식으로 내보내기 한 후, 같은 경로 상의 다른 파일에서 require를 했을 때, 빈객체가 required됩니다.

 

세부사항

1. 상황

TicTacToe.jsx에서 CLICK_CELL이라는 상수를 내보내어, Td.jsx라는 동일 경로의 다른 파일에서 그 상수를 받아 오려 하는데, 빈 객체가 required 되어 CLICK_CELL의 값이 undefined로 나타납니다. 해당 상수는 Td.jsx가 아닌 다른 경로에 있는 파일에서는 정상적으로 required됩니다!

2. 코드 

# 파일 구조

# TicTacToe.jsx

# Td.jsx

console.log 결과

3. 추측

common js를 통해 같은 경로 상의 파일에서 모듈을 받아오는 경우에 문제가 생기는 것 같습니다.

다만 정확히 어떤 문제인지, 또 어떻게 해결할 수 있는지 해결 방법을 끝내 찾지 못해 질문 드립니다.

 

*깃헙 주소: https://github.com/Parkhanyoung/React-zerocho-basic

 

항상 좋은 강의 감사드립니다! 덕분에 정말 즐겁게 공부하고 있습니다 ㅎㅎ

답변 1

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2021. 12. 29. 17:20

순환 참조 문제입니다. tictactoe랑 td가 서로를 참조하면 한쪽이 빈 객체가 됩니다. clickcell같은 걸 다른 파일로 분리하세요.

박한영님의 프로필 이미지
박한영
질문자

2021. 12. 29. 21:38

답변 감사합니다!!

박한영님의 프로필 이미지
박한영
질문자

2021. 12. 29. 21:52

이 순환 참조 관련 문제는 common js에서만 발생하는 건가요?

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2021. 12. 29. 23:50

esm에서도 발생은 합니다만 commonjs만큼 많이 발생하지는 않습니다. esm에서도 순환참조는 피하는 것이 좋습니다.

박한영님의 프로필 이미지
박한영
질문자

2021. 12. 30. 10:17

넵 답변 감사합니다!