[React] CRA 프로젝트 배포 시 이미지 경로 설정에 대해 알아보자

문제 상황

처음 이미지를 public - img - fashion.jpeg 에 넣고 아래처럼 불러왔을 때는 로컬에서 정상적으로 출력됐다.

#canvas {
	background-image: url("/img/fashion-unsplash.jpeg");
}

gh-pages를 통해 배포 후 페이지에서 이미지가 출력되지 않고 404 에러가 떴다.

 

public? src?

public 폴더에 저장했을 때

• 파일을 동적으로 로드하기 쉽다.
• webpack에 저장되지 않고 원본이 build 폴더에 복사된다.
• public 폴더에 접근하기 위해 PUBLIC_URL 환경변수를 사용해야 한다.
• public 디렉토리 파일은 webpack에서 처리되지 않는다.
• 누락된 파일은 컴파일 시 호출되지 않으며 404 오류가 발생한다.

 

src 폴더에 저장했을 때

• 빠른 재구축을 위해 webpack에서 처리되며 최종 번들에 포함된다.
• 컨텐츠 해싱으로 이미지가 변경되어도 이전 버전을 캐싱하는 문제가 발생하지 않는다.
• 내부 js 및 css 파일을 넣는다.
• javascript 모듈로 가져올 수 있다.
• 누락된 파일은 404 오류 대신 컴파일 오류가 발생한다.

 

해결 방안

#canvas {
	background-image: url(`${process.ebv.PUBLIC_URL}/img/fashion-unsplash.jpeg`);
}

앞에 배포 주소를 덧붙여 public의 경로를 해결했다.

 

결론

이미지를 public 혹은 src에 넣어 배포가 가능하다. CRA에서 src파일에 저장했을 때 발생하는 여러 이점으로 assets은 src에 넣어 import하는 방식을 권장하고 있다. 다음 프로젝트에서는 src안에 assets을 넣는 방식으로 구현해봐야겠다.

 

참고자료

https://create-react-app.dev/docs/using-the-public-folder/
https://create-react-app.dev/docs/folder-structure/