어느 폴더에서 관리하는 것이 좋은지?
1. public 폴더에 저장하기
- webpack으로 처리되지 않음
( 파일이 후처리(post-process) 되거나 minify(경량화) 되지 않음.
원본이 build 폴더에 복사됨.
파일 경로를 잘못 입력하거나, 파일이 존재하지 않을 경우 컴파일 단계에서 오류가 발생하지 않음.
사용자가 접근했을 때 404 오류로 나타남.
content hash가 포함되지 않기 때문에, 파일이 수정될 때 마다 직접 파일명을 수정하거나 매개변수 쿼리를 추가해야 함.)
- 정적파일을 넣는 디렉토리
(CRA 문서에서 다음과 같은 경우에만 public 폴더에서 관리하는 것이 유용하고, 이외에는 src 폴더 관리를 추천)
특정 이름을 가진 파일이 필요할 때 (manifest.webmanifest 처럼 build된 결과물에서 특정한 파일 이름이 필요한 경우)
수천개의 이미지 파일을 동적으로 참조해야 하는 경우
번들링 된 코드 밖에서 pace.js 같은 작은 스크립트를 포함하고 싶을 때
webpack과 호환되지 않는 라이브러리를 사용해야 할 때 (<script> 태그로 라이브러리를 포함해야 할 때)
public 폴더에 접근하기 위해서는 PUBLIC_URL 환경변수를 사용
2. src 폴더에 저장하기
파일을 찾지 못하는 경우, 컴파일 단계에서 에러를 잡을 수 있다.
import할 경우 참조할 수 있는 경로(path) 문자열을 출력한다.
content hash가 파일명에 포함되기 때문에 브라우저가 오래된 버전(파일 수정 전)의 파일을 캐싱하고 있는 경우를 고려하지 않아도 된다. (파일이 변경되었을 때만 hash값이 변경된다)
서버 요청 횟수를 줄이기 위해 10,000 bytes 이하의 이미지는 path대신 data URL을 반환한다.
(bmp, gif, jpg, jpeg, png 파일에만 적용, SVG 파일 제외)
이 때, 파일 크기 기준(10,000 byte)은 IMAGE_INLINE_SIZE_LIMIT 환경변수로 설정을 변경할 수 있다.
- 개발하면서 작업하는 파일 대부분을 넣는 디렉토리 (index.js, 그 외 리액트 컴포넌트 같은 js 파일, css 파일 등)
[React] Create-react-app 프로젝트에서 이미지 경로를 설정하는 4가지 방법
create-react-app 프로젝트에서 public, src에있는 이미지를 사용할 때, jsx, css 에서 각각 어떻게 불러올 수 있는지 정리해본다.
velog.io