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
답변 감사합니다!!