이미지 경로 public, src
리액트, webpack으로 프로젝트를 진행하면서
필요한 아이콘은 svg파일을 사용했다.
문제없이 잘 나오던 아이콘이 프로젝트를 빌드해 에디터에 연결했을 때
아이콘이 출력되지 않는 이슈가 발생해서 해결해야했다.
나는 이미지를 import해오는 방법을 사용했고,
너무 보편적인 방법을 사용했기에 왜 이런 이슈가 발생했는지 이해할 수 없었다.
404 not found문제의 원인이 경로 문제로 파악되어 원인을 찾기 위해 여러 레퍼런스를 찾아보고 내가 작성한 코드를 살펴보다 내가 assets폴더를 src 하위에 위치한 것을 알았고,
public에도 assets 폴더를 추가하자 문제가 해결되었다.
문제의 원인을 파악하기 위해
리액트에서 이미지 경로에 대해서 찾아 보았다.
- public 디렉토리에 넣은 파일은 webpack으로 처리되지 않고, 원본이 build 폴더에 복사되기 때문에 파일 경로를 잘못 입력하거나, 해당 파일이 존재하지 않을 경우 404 오류가 발생한다.
public
- 정적 파일을 넣는 디렉토리
- webpack으로 관리되지 않는다(경량화 되지 않고, content hash 불포함)
- public 폴더에 접근하기 위해 PUBLIC_URL 사용
src
- 개발하면서 작업하는 파일 대부분을 넣는 디렉토리(js, css..)
- 파일을 찾지 못하는 경우, 컴파일 단계에서 에러를 찾을 수 있음.
참고
[React] 리액트에서 이미지 경로 설정하기 (public, src 디렉토리 차이)
[React] Create-react-app 프로젝트에서 이미지 경로를 설정하는 4가지 방법
logger