0. 들어가며..
프론트에서 서버로 요청을 보내는 baseURL을 배포 서버로 연결하는 과정에서 문제가 발생했습니다.
1. axios로 통일
Proxy설정을 통해 api 요청을 보내고있었습니다.
(baseURL 설정한 axios는 정의만 해 놓았습니다.)
그런데, 배포를 진행한 후 프론트에서 API 요청을 보내면 baseURL이 서버의 URL이 아닌 클라이언트의 URL로 지정되는 문제가 있었습니다.
원인을 찾던 중 다음의 정보를 알 수 있었습니다.
- Proxying API Requests in Development
"Keep in mind that proxy only has effect in development (with npm start)"라는 말은 create-react-app을 사용하여 개발할 때 package.json 파일에 설정한 프록시 설정이 개발 모드에서만 작동한다는 것을 의미합니다.
즉, npm start를 통해 로컬 개발 서버를 실행할 때만 프록시 설정이 적용되며, 프로덕션 빌드를 생성할 때는(npm run build 실행 시) 이 프록시 설정이 적용되지 않습니다.
문제점을 인지한 후 기존의 proxy 설정을 제거하고 axios를 통해 api 요청을 보내도록 요청 방식을 변경하였습니다.
2. api 무한 요청과 502 Bad Gateway
api 무한요청으로 인해 502 Bad Gateway가 발생했습니다.
원인을 찾아보니 다음의 정보를 알 수 있었습니다.
useEffect는 React 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할 수 있도록 하는 Hook입니다. 첫 번째 인자로 전달된 함수는 컴포넌트 렌더링 이후에 실행되며, 선택적으로 두 번째 인자로 의존성 배열을 전달하여, 배열 내의 값이 변경될 때만 함수가 실행되도록 제한할 수 있습니다. 컴포넌트가 마운트될 때, 업데이트 될 때, 그리고 언마운트 될 때의 사이드 이펙트를 관리하는 데 사용됩니다.
그런데, 두번째 인자를 비우는 경우 모든 state의 변경에 대해 훅을 실행하여 무한 요청이 발생합니다. 무한요청을 야기하지 않기 위해서는 빈 종속성 배열을 두번째 인자로 제공해야합니다.
따라서, 빈 종속성 배열을 두번째 인자로 제공하여 무한 요청 문제를 해결했습니다.
