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

Question

강의에서는 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   항상 좋은 강의 감사드립니다! 덕분에 정말 즐겁게 공부하고 있습니다 ㅎㅎ

제로초(조현영) · Answer

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