수습 과제를 마무리 하고 배포했는데 백엔드 API의 Status 코드가 400이 나왔습니다.
왜 그런지 알게 된 과정 중에 핵심이 Proxy라는 개념입니다.
그래서 proxy의 기본 개념에 대해서 설명해드리려고 하는데,
그전에 React Dev Server의 개념을 알아야합니다.
리액트에서 npm run start 명령어를 적으면 React Dev Server가 열립니다.
여기서 React Dev Server는 클라이언트 기술이라서 특별히 서버가 필요하지는 않지만 리액트 개발이 까다로워서 CRA가 서버까지 제공해주는 것입니다.
여기서 CRA는 페이스북 리액트 팀에서 제공하는 기술로, 리액트 개발환경을 쉽게 구축해줍니다.
정리하면 CRA가 리액트 개발을 쉽게 해주기 위해서 제공해주는 개발용 서버가 React Dev Server입니다.
그러면 리액트 개발을 할 경우에는 React Dev Server하고 php 또는 장고, JSP 등의 백엔드 서버, 이렇게 2개의 서버를 사용하게 될 텐데, 이때 port 번호로 각각의 서버를 식별합니다.
리액트에서 api를 호출할 때 api 호출 함수인 fetch()안에 api url을 넣는데, 이를 이용해서 백엔드 서버인 localhost:8000을 보게 해줍니다.
서버를 2개 사용할 경우에 다양한 문제점이 있는데,
첫번째 문제점이 백엔드 서버의 포트가 8000번이 아니라 다른 걸 써야 한다면 그때마다 fetch함수의 url path 숫자를 바꿔줘야합니다.
두번째 문제점은, 실제 서버는 이런식으로 작성하지 않습니다.
React Dev Server는 개발용 서버이기 때문에 실서버의 경우에는 쓰지 않습니다.
실서버는 결국 php나 장고가 제공하는 서버를 쓰거나, 아파치 같은 웹 서버를 쓰게됩니다.
결국에 리액트와 백엔트 서버가 같은 주소에 같은 포트에서 서비스 되기 때문에 실서버 환경에서는 문제될 게 없습니다.
따라서 개발을 끝내고 실서버 환경으로 갈 때는 http://localhost:8000는 삭제해줘야합니다.
세번째 문제점은 CORS라는 정책으로 인한 통신 불가능입니다.
React는 기본으로 3000번 포트에서 서비스 되고 있는 웹페이진데, 다른 포트나 다른 도메인에 접근하려고 하면 브라우저 보안 기능으로 인해 그것이 금지되어서 동작하지 않고 에러가 뜰 것입니다. 그렇다면 접속당하는 쪽인 8000번 포트가 있는 서버가 접속을 허용해줘야합니다.
마지막 4번째 문제점은 로그인에 성공하면 성공의 증표로 브라우저에 쿠키를 심어놓는데, 포트가 다르면 쿠키를 자동으로 보내주지 않습니다. 쿠키 전송 옵션을 켜줘야하는 문제가 생깁니다.
이런 문제점들을 해결해 주는게 CRA의 Proxy 기능입니다.
Proxy는 상대경로인 api path만 적어도 알아서 백엔드 서버에 접속하도록 도와주고, CORS와 쿠키 설정을 해주는 기술입니다. 프론트엔드에서의 proxy 설정은 package.jaon에 proxy 한줄만 추가하면 됩니다.
이렇게 프록시를 설정하고 실행을 시키면 포트번호 :3000 인 React Dev Server에서 정보를 찾고, 정보가 없는걸 알게되면
React Dev Server가 :8000에게 정보가 있는지 대신 물어봐줍니다.
8000번에 정보가 있으면 React Dev Server에 데이터를 넘겨주고, React Dev Server는 데이터를 받습니다.
React Dev Server는 브라우저에게 정보를 전달해줍니다.
이렇게 대신해주는 서버를 proxy 서버라고 합니다.
즉, CRA를 통해 사용하는 Dev Server를 proxy 서버로서 사용하는 기술이 proxy라고 하는 것입니다.
결국 배포 후에 status code 400이 나온건, 배포 전에 사용한 proxy 설정을 그대로 배포한것이 원인이었습니다.
위에서 언급했듯이 proxy는 CRA로 만든 개발서버에서 TEST로 동작하기 위한 설정이기 때문에 배포시에는 proxy를 적용하면 안됩니다. 그래서 Proxy를 삭제하고 fetch함수에 API URL 전체 주소를 적용했더니 해결되었습니다.
위 내용에 나오는 이미지는 생활코딩님의 강의 자료에서 가져온 것입니다.
생활코딩-React Proxy
