[React] 이슈 해결 로그

상황

jsx 파일에서 이미지를 import 하기 위해 경로를 지정했는데 다음과 같은 오류가 발생했다.

에러 코드

Module not found: Error: You attempted to import ../../../public/assets/icons/ArrwTop.svg which falls outside of the project src/ directory. Relative imports outsde of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_moules/.

에러 원인

CRA(create-react-app)에서 컴파일은 src 내부에서만 일어나는데, 이때 js에서 import된 이미지와 같이 엮여 있는 파일들은 모두 컴파일 대상이다. 따라서 이미지를 js 파일에 import 해오는 경우이거나 css파일에서 background-image로 사용되는 경우라면, ⭐이미지가 src 폴더 내부에 있어야 한다. (public 폴더는 우리가 CRA를 배포했을 때 실제 서버에 배포되는 폴더!)
참고로 img의 src 속성으로 바로 불러오는 경우에는 컴파일 이후에 index.html 기준으로 이미지를 불러오기 때문에 public 내부에 있어야 한다. (6.23 추가) 오늘도 같은 실수를 반복해따..ㅎ 이제 진짜 잊지 못할듯

해결 방법

이미지 파일들이 있는 assets 폴더를 src 폴더 바깥의 public 폴더에서 src 폴더 내부로 이동시킴으로써 이슈를 해결했다.

도깨비님의 블로그글을 보고 참고했습니다🙏 오늘도 경로 설정의 중요성을 깨닫고 갑니다.