리팩토링을 진행하며 폴더 구조도 점검하던 와중 public 폴더와 src 폴더
어떤 폴더에 어떤 파일이 들어가야하는지 정확하게 모르는것 같아 정리하고 가보려고한다.
https://create-react-app.dev/docs/using-the-public-folder/
(출처)
언제 public 폴더를 사용해야 하나
공식 문서에서는 stylesheets, images, and fonts from JavaScript 들을 넣는것을 추천한다.
리액트로 개발을 끝내면 build 작업이라는걸 하는데 지금까지 작성한 코드를 한 파일로 압축해주는 작업이다.
src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 것들은 그대로 보존해준다.
그래서 형태를 보존하고 싶은 파일은 public 폴더에 넣으면 되는데 js 파일은 그럴 일은 거의 없고 이미지, txt, json 등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관이 없다.
사용 방법
<img src="/이미지파일이름" />이렇게 하면되지만 권장되는 방법은
<img src={process.env.PUBLIC_URL + '/logo192.png'} />이것이다.
html페이지를 배포할 때 사이트이름 경로에 배포하면 문제가 없지만
사이트이름/???/ 경로에 배포하면 /이미지파일이름을 못 찾을 수 있기 때문에
???에 해당하는 부분을 process.env.PUBLIC_URL추가해 주면 된다.
주의사항
Keep in mind the downsides of this approach:
-
공용 폴더에 있는 파일은 후처리되거나 최소화되지 않습니다. (압축이 안된다는 뜻)
-
누락된 파일은 컴파일 시 호출되지 않으며 사용자에게 404개의 오류가 발생합니다.
(src폴더에서 require로 가져오는 경우 404 오류 대신 컴파일 단계에서 에러를 잡을 수 있다.) -
결과 파일 이름에는 내용 해시가 포함되지 않으므로 쿼리 인수를 추가하거나 변경할 때마다 이름을 변경해야 합니다.
(src폴더에 보관하면 content hash가 파일명에 포함되기 때문에 브라우저가 오래된 버전(파일 수정 전)의 파일을 캐싱하고 있는 경우를 고려하지 않아도 된다. (파일이 변경되었을 때만 hash값이 변경된다))
