public 폴더에 있는 이미지를 사용하는 경우, 배포 시 이미지가 로드되지 않는 문제

🧐 배포시 일부 이미지가 들어오지 않는 문제 

 

프로젝트를 하던 도중에 localhost 주소 에서는 잘 들어오더 이미지가 배포시에는 들어오지 않는 문제가 발생했다.

  background: url(/public/assets/SignInBg.png) no-repeat;

 

해결방법 : process.env.PUBLIC_URL 환경 변수 사용

  background: url(${process.env.PUBLIC_URL}/assets/SignInBg.png) no-repeat;

 

프로덕션 환경에서는 애플리케이션의 경로가 변경될 수 있기 때문에, 정적 파일의 경로를 하드코딩하는 것은 좋지 않습니다.

이를 해결하기 위해 process.env.PUBLIC_URL을 사용하는 것입니다.

 

process.env.PUBLIC_URL은 애플리케이션의 루트 경로를 나타내는 환경 변수입니다. 이 변수를 사용하여 애플리케이션의 경로를 자동으로 가져와 정적 파일의 경로를 정의할 수 있습니다. 이렇게 하면 애플리케이션이 호스팅되는 경로가 변경되더라도 정적 파일의 경로를 일일이 수정하지 않아도 됩니다. 따라서 코드 유지보수성과 이식성을 높일 수 있습니다.

 

process.env.PUBLIC_URL을 사용하면, 프로덕션 환경에서도 올바른 경로를 참조할 수 있습니다.

따라서, 정적 파일의 경로를 하드코딩하는 대신, process.env.PUBLIC_URL을 사용하는 것이 좋습니다. 😀