React :: public 경로와 src 경로의 차이점. 각각 언제 사용하면 좋을까?

Public 디렉토리 와 src 디렉토리의 차이점

 

Public 디렉토리

- 정적 파일을 넣는 디렉토리 (index.html을 비롯한 html 파일, img 파일 등..)

   * 파일이 후처리(post-process) 되거나 경량화(minify) 되지 않는다.

   * 파일 경로를 잘못 입력하거나, 파일이 존재하지 않을 경우에 컴파일 단계에서 오류가 발생하지 않고, 사용자가 접근할 때 404 오류를 응답하게 된다.

   * 파일이 수정될 때 마다 직접 파일명을 수정하거나 매개변수 쿼리를 추가해야 함

     => 환경 변수를 사용하면 어느정도 해결이 가능하긴 하다..

 

src 디렉토리

- 개발하면서 작업하는 파일의 대부분을 넣는 디렉토리 (index.js, 그 외 리액트 컴포넌트 같은 js 파일, css 파일 등..)

 

언제 사용하는지? 

컴포넌트 안에서 사용하는 이미지는 src 폴더에 있는 게 좋음.

하지만..

파비콘 같이 앱 밖에서 사용하는 이미지는 public 폴더에 있어야 함.