절대 경로를 나타내는 환경 변수 process.env.PUBLIC_URL

 

리액트로 포트폴리오를 작업하는데 서브페이지에 접속했다가

다시 홈으로 돌아오면 이미지 경로를 찾지못해서 404에러 뜨는걸 발견했다..

진짜 리액트로 혼자 작업하려니까 별별 에러가 다떠서 스트레스~
정말이지 다양한 경험을 많이 한 고연차가 우대받는것은 당연한가보군요...

React Router를 사용하여 SPA 내에서 컴포넌트 간의 화면을 라우팅 ➡️ Route로 서브 페이지 화면을 렌더링 하는 방법을 사용했는데,
다시 홈으로 돌아가면 홈에 있는 슬라이드 내 이미지들이 위와 같이 액박...

 콘솔도 404 Not Found 에러가 표시됐다.

📌 원인

• 이미지 경로를 상대경로로 사용했기 때문.

 

📌 해결방안

• public 폴더 기준 절대경로로 지정해주어야한다.
• process.env.PUBLIC_URL 적용

 

❓process.env.PUBLIC_URL란❓

내 로컬에서는 이미지를 향한 길을 잘 찾아갈 수 있지만, 배포하면 앱이 파일을 못찾게 되는 문제가 발생한다.

process.env.PUBLIC_URL을 적용하면 CRA가 빌드하면서 실제 경로를 찾아갈 수 있게끔 주소를 바꿔준다.

즉, process.env.PUBLIC_URL은 배포 위치가 바뀌어도 public 폴더 내 파일들의 주소를 제대로 가리키도록 ‘자동으로 맞춰주는 환경 변수’

📌 사용방법

일반적으로는 이렇게 사용하고

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

리액트 컴포넌트 속성의 경우에는 아래처럼 사용하면 된다. imgSrc 속성 명은 내가 컴포넌트를 이렇게 설계했기 때문임!
유의사항은 이미지경로 앞에 무조건 ‘/’를 붙여줘야한다.

<!-- 리액트 컴포넌트 속성 -->
imgSrc={process.env.PUBLIC_URL + "/assets/images/이미지.png"}

손쉽게 해결되었다!
페이지 왔다갔다 여러번 해보니 더이상 액박이 뜨지 않는다!

오늘도 하나 배웠다,