배포 중인 프로젝트에서 주소창으로 페이지에 접근하거나 새로고침 시 페이지가 아니라 raw json이 렌더링 되는 오류를 겪었다. (개발 환경에선 이런 현상이 일어나지 않았다)
문제 상황
우선 해당 프로젝트의 환경은 다음과 같다.
- react + spring boot
- react를 먼저 빌드해서 static 폴더에 합친 뒤 함께 build하는 방식
- 페이지 주소와 api 주소가 같음
가설
링크나 버튼을 클릭해서 이동했을 시엔 raw data가 뜨지 않는다.
오로지 주소창이나 새로고침을 통해 접근했을 시에만 오류가 난다.
가설: 주소창을 통해 GET 요청이 서버로 먼저 넘어가버리는 것 같다.
해결방법
서버 api에 모두 /api라는 prefix를 붙였다.
예컨대, 기존 식물 정보 페이지가 react-router-dom으로 컴포넌트를 연결하는 용도로도 /plant/1, 서버에 해당 식물의 데이터를 요청하는 용도로도 /plant/1을 사용했다면,
지금은 페이지를 띄울 땐 /plant/1을, 서버와 통신할 땐 /api/plant/1을 사용한다.
