1. 오류 발생

public 폴더 내의 이미지를 불러오기 위해 process.env.PUBLIC_URL를 사용하는 도중 특정 페이지만 src의 링크가 잘못 불러오는 문제가 생겼다.

사용된 코드

<img alt="" src={process.env.PUBLIC_URL + 'icon.png'}/>

2. process.env.PUBLIC_URL

아예 처음 보는 변수라 process.env.PUBLIC_URL이 뭔지부터 찾아봤다.

process.env - nodejs에서 환경변수을 객체로 가져 자바스크립트에서 사용할 수 있게 하는 변수

그 중 process.env.PUBLIC_URL은 리액트에서 사용되는 환경변수로 public 폴더의 절대경로를 가리키는 값을 가지고 있다.

참고)
process.env - https://nodejs.org/dist/latest-v8.x/docs/api/process.html#process_process_env
process.env.PUBLIC_URL - https://create-react-app.dev/docs/using-the-public-folder/#using-the-public-folder

그래서 리액트에서 public에 있는 이미지를 불러올 때 사용했던 것이었다.

3. 원인 찾기

어쨋든 어떤 변수인지 알았고 그래서 어떤 문제지?
process.env.PUBLIC_URL 변수에 잘못된 값이 들어갔나? 싶어 콘솔에 출력했지만 다른 페이지와 비교해봐도 아무 이상이 없었다.

인터넷에서 여러 정보를 찾아봐도 PUBLIC_URL을 직접 설정하라는 글이 대부분이었다.
쓰읍... 내 문제와는 상관없는 것 같은데

찾던 중 상대경로를 지정하라는 해결방법이 있어 따라했더니

<base href="http://localhost:3000/">

이미지가 정상적으로 로드됐다!

근데 왜 해결됐지? 싶어 코드를 자세히 살펴봤더니

<img alt="" src={process.env.PUBLIC_URL + 'icon.png'}/>

이미지 경로에 /를 안붙여 상대경로로 불러와진 것이었다..

4. 의문점

그렇지만 다른 페이지에서는 /를 붙이지 않았는데도 왜 정상적으로 로딩이 됐을까?

이유는 해당 페이지가 최상위 경로에 있기 때문에 상대경로로 입력하더라도 잘 불러와졌던 것뿐이었다.