Create-react-app 프로젝트에서 이미지를 어떤 폴더에 저장하는 것이 좋을까? (public vs. src)

현재 진행 중인 React 프로젝트에서 svg 파일들을 어디에 위치시킬지에 대한 고민이 있었다. public 폴더일까? src 폴더일까? 각각에 위치시키는 것이 어떤 차이점이 있을까? 오늘은 그런 의문점들을 해소하면서 정리해 보려고 한다. 블로그 글을 참고하여 src 폴더에 위치시키기로 했다. 가장 큰 이유로는 바로 경로가 잘못되었을 때 컴파일 단계에서 에러가 나서 알 수 있냐 아니냐의 여부였다. public에 이미지를 위치할 경우 컴파일 단계에서 에러가 발생하지 않아서 별로 좋지 않다고 생각했다. 반면 src 폴더에 이미지를 넣을 경우 경로가 틀렸을 때 바로 에러로 알려 주기 때문에 수정이 용이하다. 

 

📂 이미지를 public 폴더에서 관리할 때

• webpack에 의해 관리되지 않는다. 
  • 즉, minify 되지 않고, content hash가 포함되지 않는다.
  • 대신 원본이 build 폴더에 복사된다.
• public 폴더에 접근하기 위해서는 PUBLIC_URL 환경 변수를 사용해야 한다. 
• 경로가 잘못되었거나 파일이 없을 경우, 컴파일 단계에서 에러가 발생하지 않고 404 에러가 발생한다. (BAD)
• CRA 문서에서는 다음과 같은 경우에만 public 폴더에서 관리하는 것이 유용하고, 이외에는 src 폴더 관리를 추천한다.
  • manifest.webmanifest처럼 build된 결과물에서 특정한 파일 이름이 필요한 경우
  • 수천 개의 이미지 파일을 동적으로 참조해야 하는 경우

 

📂 이미지를 src 폴더에서 관리할 때 

• 파일을 찾지 못하는 경우, 컴파일 단계에서 에러를 잡을 수 있다. (GOOD)
• import 할 경우 참조할 수 있는 경로(path) 문자열을 출력한다.
• content hash가 파일명에 포함되기 때문에 브라우저가 오래된 버전(파일 수정 전)의 파일을 캐싱하고 있는 경우를 고려하지 않아도 된다. (파일이 변경되었을 때만 hash 값이 변경된다) 
• 서버 요청 횟수를 줄이기 위해 10,000 bytes 이하의 이미지는 path 대신 data URL을 반환한다. 

 

Reference

[React] Create-react-app 프로젝트에서 이미지 경로를 설정하는 4가지 방법

 

사진 출처 

How to Organize a Large React Application and Make It Scale - SitePoint