[리액트]Module not found: Can't resolve 파일 경로 (상대경로 지정 문제)

Module not found: Can't resolve 파일 경로

먼저 결론부터 말하자면, 파일 상단에 import 상대 경로를 잘못 정해준 경우가 많습니다. 따라서 해당 파일 경로의 모듈을 찾지 못했다는 에러가 발생할 때, 상대경로를 올바르게 정해줬는지 확인해볼 필요가 있겠습니다. 저는 개인 프로젝트 파일의 폴더 구조를 변경하고 코드들을 옮기는 작업 중에 위와 같은 에러를 발견했는데요! 아래에 저의 문제 상황과 해결 과정, 팁을 적어두었습니다.😊 그리고 아래 상대경로와 절대경로에 대해 정리된 글을 첨부했습니다! 

https://blog.naver.com/tipsware/221275416466

[용어] 절대 경로, 상대 경로, 작업 경로에 대하여

 

우선 저의 개인 프로젝트 폴더 구조는 다음과 같고, 하단 MenuListPage 파일에서 data 파일을 import해야하는 상황이었습니다.

./는 현재 디렉토리(폴더), ../는 상위 디렉토리라는 것을 알고 있었는데, 상위 디렉토리보다 상위에 있는 건 어떻게 정해주어야 하는지 정확히 몰라서 잘못 지정해준 것 같습니다.

 

찾는 파일의 상위 디렉토리 계층으로 올라갈 때까지 ../을 계속 써주면 됩니다. 따라서 MenuListPage.js에서 data.js를 import하기 위해서는, 상위 디렉토리 components(../) -> components의 상위 디렉토리 src(../) 까지 경로를 지정한 다음 /assets/data로 다시 내려가면 됩니다. 따라서 "../../assets/data"와 같은 경로를 상대경로를 지정해주어야 정상적으로 import 된 것을 확인할 수 있었습니다. 

왜 제대로 지정하지 못했었나?🤔

개인 프로젝트를 하면서 처음으로 복잡한 파일 구조를 접해 익숙하지 않은 것이 원인인 것 같습니다. 제가 그동안 해오던 리액트 개발은 강의를 들으면서 만드는 간단한 실습용프로젝트였기 때문에 파일 구조가 단순했습니다. 그래서 작업한 모든 파일이 같은 디렉토리 안에 들어있어서 컴포넌트를 불러올 때도 습관적으로 "./파일명"과 같이 사용해왔는데요. 조금만 계층이 복잡해지니 파일을 불러오는데 어려움을 느껴졌습니다. 비록 간단한 문제였지만 앞으로 하게 될 복잡한 프로젝트들을 좀 더 잘 관리할 수 있을 것같습니다!