[React]리엑트 에서 Spring 서버로 배포 시 이미지 경로 설정

안녕하세요? 자바 강의하는 낙자쌤입니다. 

 

요즘 FrontEnd로 리엑트 많이들 사용하시죠. 

특히나 전자정부프레임워크에서 2021년 12월 발표된 4.0.0(beta) 실행환경을 보면 리엑트가 포함된 것을 알수있습니다. 

아마도 앞으로는 리엑트가 많이 사용되지 않을까 싶네요..^^

 

리엑트는 UI를 담당하기 때문에 이미지가 사용되는 것은 매우 당연한 일입니다. 

하지만 개발시 사용된 이미지가 배포되었을때 제대로 나오지 않는다면 무용지물 이겠죠.

아래와 같이 말이죠...

배포했을때 이렇게 되면 정말이지 막막합니다. 개발시에는 멀쩡하게 나오던 이미지인데 말이죠.

리엑트 개발시(create-react-app으로 생성한 상태)  이미지는 src 하위나 public 하위 어디든 저장할 수 있습니다. 

하지만 저는 배포를 위해 public을 주로 사용합니다. 

public  하위에 my_img 폴더를 생성한 후 이미지를 복사합니다. 

 

컴포넌트에서 해당 이미지를 삽입할때는 process.env.PUBLIC_URL를 사용합니다. 

단, 위 그림에서 표시한것처럼 public상수 뒷부분에 ./ 를 반드시 삽입해야 합니다.(이게 포인트) 

이렇게 하는 이유는 이 부분이 build(배포)될때 절대경로로 변경되기 때문에 이미지경로를 제대로 찾지 못하기 때문입니다. 

 

리엑트 프로젝트를 배포합니다. 

명령은 npm run build 입니다. 

 

배포를 진행하면 build폴더가 생성되는데로 이름을 적절히 변경한 후 이클립스로 옮깁니다. 

저는 Spring Legacy 프로젝트이므로 resources하위에 복사했습니다. 

이때 public하위에 있던 my_img는 배포된 폴더 하위에 위치하게 됩니다. 

이클립스에서 배포된 react 폴더의 js의 파일을 열어보면 다음과 같이 되어있는걸 확인할 수 있습니다. 

앞에서 .(점) 을 넣으라고 했던 부분입니다. 

따라서 지금 실행된 index.html 하위에 my_img가 존재하므로 실행해보면 아래와 같이 정상적으로 이미지가 출력되는것을 볼 수 있습니다. 

 

​

오늘의 교훈

• 문제를 해결할 수 있는 방법은 많지만 나만의 방법을 찾자