필자가 접한 react 튜토리얼을 보면
리액트의 프톤트에서 백엔드로 요청을 할때
중간에 proxy서버를 두고 요청한다.
"proxy": "http://localhost:7080", //package.json
처음에는 단순히 리액트는 3000에 실행되어있고
서버의 경우 7080포트(필자의 백엔드 서버)에 실행되어있으니
CORS( cross-origin requests)를 방지하기 위함인줄 알고 개발을 진행했다.
cors는 웹개발시 무조건 만나는 기초 내용이니 검색해보자!
* 간단하게 추가 설명을 보태면 3000에서 실행된 리액트가 보낸 요청을 프록시 서버인 7080이 가로챈 뒤 백엔드서버인 7080으로 요청을 보내기 때문에 CORS가 발생하지 않는다.
허나 한가지 이유가 더있다.
axios.get('http://localhost:3001/users?email=${email}')
.then(res => {
console.log(res);
}
fetch('http://localhost:3001/auth/login',{
method:"post",
body : JSON.stringify(loginInfo),
})
proxy 설정을 하지 않고 ajax를 요청하면 위와 같이 코딩이 될 것이다.
프론트에서 요청하는 부분이 한부분도 아니고 만약 주소가 바뀌거나
서비스를 실제 디플로이한다면 고객사마다 주소가 다르고 포트가 다르고 등등의 상황이 생길 것이다.
그러면 react 프로젝트 내 모든 ajax 부분의 주소를 다 바꾸어야한다.
유지보수가 똥망이 된다.
axios.get('/users?email=${email}')
.then(res => {
console.log(res);
}
fetch('/auth/login',{
method:"post",
body : JSON.stringify(loginInfo),
})
"proxy": "http://localhost:7080", //package.json
이를 위와 같이 수정하고 package.json에 프록시를 추가한다.
처음 코드와 똑같이 작동할 것이다.
위와 같이 하면 proxy부분만 수정하면 된다.
'Javascript > React' 카테고리의 다른 글
(React) 실전 짤막지식 (그때그때 추가) (0) | 2022.12.26 |
---|---|
(React) Route 에서 parameter(state) 함께 넘기기 (0) | 2021.07.02 |
(React) 리액트 시작하기 (0) | 2021.06.30 |