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

강의에서는 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

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