[React] public 폴더의 용도

리액트로 개발을 끝내면 build라는 작업을 해주는데 지금까지 짰던 코드들을 한 파일로 압축해주는 것이다.

src 폴더에 있던 코드, 파일들을 다 압축을 해주는데 public 폴더는 그대로 보존을 해준다.

그래서 형태를 보존하고 싶은 이미지, txt, json같은 파일의 경우는 public에 저장해주면 좋다.

 

 

public 폴더에 있는 이미지 사용

 

public폴더에 이미지를 넣으면 import 안해도되고, /이미지경로로 사용하면되니 편하다.

css파일에서도 /이미지경로로 사용하면 된다.

 

<img src="/logo.png" />

 

 

하지만 권장하는 방식은 다음과 같다.

리액트로 만든 html 페이지를 배포할때 codingapple.com 경로에 배포하면 아무런 문제가 없지만

codingapple.com/어쩌구/ 경로에 배포하면 /logo192.png 이렇게 쓰면 파일을 찾을 수 없다고 나올 수도 있다. 

그래서 /어쩌구/ 를 뜻하는 process.env.PUBLIC_URL 이것을 더해주면 된다고 한다.

 

<img src={process.env.PUBLIC_URL + '/logo.png'} />