* public 폴더의 용도
- 이미지 같은 static 파일의 경우 public폴더에 보관하여도 된다.
- 리액트로 개발을 끝내면 build 작업을 하게 되는데 지금까지 작성한 코드를 하나의 파일로 압축해주는 작업이다. src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 내용들은 그대로 보존된다.
- 그래서 형태를 보존하고 싶은 파일은 public폴더에 넣으면 된다.
- 이미지, txt, json등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관없다.
- JS파일은 제외(압축이 필요함)
* public 폴더에 있는 이미지 사용할 때는
<img src="/logo192.png" />
- 위의 예시처럼 "/이미지경로"로 사용하면된다.
- css파일에서도 "/이미지경로"로 사용하면 된다.
- public 폴더에 넣으면 import를 안해도 되니 편하다.
- 원래는 import 작명 from './이미지경로' 한 다음 이미지 경로가 필요한 곳에서 작명한걸 사용하였다.
<img src={process.env.PUBLIC_URL + '/logo192.png'} />
- 권장되는 방식은 위와 같다.
- 만약 리액트로 만든 html 페이지를 배포할 때 발생 할 수 있는 문제를 해결해준다.
- www.latte.com으로 배포하면 아무런 문제가 없지만
- www.latte.com/poodle/ 경로에 배포하게 되면 해당 파일을 찾을 수 없다고 나올 수 도 있다.
- /poodle/부분을 뜻하는 process.env.PUBLIC_URL을 더해주면 정상적으로 작동한다.