hoxy...Proxy가 왜 필요한지 아시나요? 정확히요...

🙏🏻 thanks to 생활코딩 Create React App - Proxy

 

코스 교육과정 중 proxy관련 부분이 이해가 잘 안되서 다른 교육 자료를 찾아봤는데

생활 코딩님의 유튜브 영상을 보고 너무 잘 이해가 갔다..감덩...

샤라웃투 생활코딩, 구독 좋아요 박았숩니다!👍🏻

 

무튼 이번 블로깅은 그 영상으로 부터 배운 것들을 판서하는 식으로 작성했다.

영상을 다 보기 어려울 때 아래 내용을 보고 참고하고, 

영상을 볼 수 있는 경우 영상으로 볼 것을 추천한다.

 

 

 

---

 

🤔 어떤 경우 , 왜 Proxy가 필요할까? 

 

CRA(Create React App)로 개발을 할 경우 개발환경을 편하게 만들어 주기위한 proxy라는 기능이 있다.

이 기능이 왜 필요한가에 대해 먼저 알아보고자 한다.

 

일단 CRA로 웹 개발을 하다보면 두개의 서버가 필요한 경우가 있다.

 

☝🏻 백엔드(php,Django,jsp,ror) 기술을 이용해서 데이터를 만들어주는 서버

&

✌🏻 리액트의 개발 서버

 

리액트 개발 서버는 npm run start를 했을 때에 나오는 서버이다.

하나의 컴퓨터 안에 react dev server도 있고, php 서버도 있다면, 식별력이 없기 때문에  port로 구분을 시킨다.

ex. php서버는 8000번 포트에서 listen, react dev server는 3000번 포트에서 listen하는 경우 

 

그럼 브라우저에서 

localhose:3000으로 브라우저에 치면, 브라우저가 react dev server에  접속해서 react dev server가 제공해주는 html, js를 다운받아서 어플리케이션이 실행된다.

하지만, 사실 어플리케이션은 ajax라는 기술을 활용해서 php또는 Django가 서비스되고 있는 서버에 접속해서 데이터를 가져오거나 데이터를 생성시키는 작업을 한다. 이때 fetch를 사용한다.

 

다시말해 3000포트로 돌아가는 개발 서버에서 fetch로 8000포트에 접속해 데이터를 가져오거나 변경하는 과정이 생긴다.

이때 몇가지 문제및 아쉬운 점이 발생한다.

그 아쉬운 점이 바로 proxy가 필요한 이유이며, 아래와 같다.

 

 

--------------------------------------------------------------

 

1️⃣ 개발환경에서 build로 배포할때 fetch 주소 변경 이슈

 

일단 개발환경에서 서버를 동작할때 아래와 같은 이슈가 있을 수 있다.

1. 서버가 8000포트가 아니라 다른걸 써야하면 그때마다 바꿔줘야 한다.
2. 실서버에 배포할 경우에는 react dev server를 사용할 일이 없기 때문에 코드 수정이 필요하다.

2번은, 개발을 끝내고 실서버 환경에 배표할 때에 fetch('http://localhost:8000/api_path')에서 localhost:8000 주소를 삭제해줘야한다는 말이다.

그런데 한 앱에 엄청나게 많은 요청이 있을 텐데 이걸 그때마다 빼줄 생각을 하니 깝깝하다.

따라서 경로 localhost:8000  없이 상대 경로/api_path만 적어도 알아서 백엔드 서버에 접속할 수 있음 얼마나 좋을까를 꿈꾸게 된다. proxy는 그걸 하게 해준다.

 

++추가

실무에서도 프론트앤드서버와 백앤드 서버가 다르게 구축되어 있는 경우가 많다고 한다.

그럴 때도 편이하게 한군데서 서버 정보만 바꾸면 돼서 proxy를 설정하면 좋다.

 

 

--------------------------------------------------------------

 

2️⃣ 개발환경에서 build로 배포할때 fetch 주소 변경 이슈

 

또하나, Cross-Origin Resource Sharing 정책으로 인해 다른 경로에 통신이 불가능해진다. (링크참조)

다시말해 3000포트에서 돌아가는데 8000에 접근하려면 브라우저가 보완상 자동을 CORS 에러를 띄운다.

때문에 8000번 포트가 접속을 허용을 해주는 설정이 필요하다. 근데 이 설정이 귀찮고 어렵다. ㅜ

게다가 실제 빌드될땐 1️⃣에서 말했듯이 어차피 빼줘야하는데 굳이  이런 설정으로 시간낭비를 하고 싶지 않을것이다.

다행이 proxy가 이런 개발과정에서의 cors 문제도 해결할 수가 있다.

 

 

--------------------------------------------------------------

 

 

3️⃣ 수동적 쿠키 전달 문제

서버에서 브라우저에 쿠키를 심어놓고, 쿠키가 있음 데이터를 보내는 등(ex.로그인 했을때만 데이터 보내주기)의 통신이 있을 수 있는데,

그때, 포트가 다르면 쿠키를 자동으로 보내주지 않는다.

withCredentials 이라는 옵션을 이용해서 요청마다 쿠키를 전송하는 옵션을 일일이 켜줘여한다.

이런 복잡한 문제들을 해결하는 기술이 proxy이다.

 

 

---

 

🚀 CRA의 proxy 당장 써보자

 

이처럼 proxy하나로 여러가지 문제를 한방에 해결할 수 있다면

안쓸 이유가 없다.

 

프록시 설정은 react dev server에게

"너는 proxy 서버야.

너한테 요청이 들어왔는데 그 요청이 실패하면

자동으로 8000번(백엔드 서버) 포트한테 물어봐서 걔가 알려주는 정보를 가지고 와"

하고 알려주는 과정과 같다.

 

이 알려주는 과정, 즉 proxy 설정은 package.json에  아래와 같이 proxy값으로

백엔드 서버 주소를 적어줌으로써 해결할 수 있다.

{
...
proxy: "http://localhost:8000"
...
}

🛑 package.json 적용했으면 "ctrl + c"로 개발서버 껐다가 "npm run start"로 다시시작해야한다. 그래야 적용됨

 

이렇게 적어주면 덤으로 이외의 요청 fetch 코드도 더 간결해진다.

 

//💩before 
fetch('http://localhost:8000/api_path') //절대경로 덕지덕지


//💖after
fetch('/api_path') //상대경로만 깔꼼하게✨

 

이렇게 하면...

1. 일단 3000번 포트 서버에 접속해서 요청한다.

2. "엥? 나 그거에 해당하는 경로의 정보 없는데" 라고 3000번 서버가 응답을 한다.

3. 그래서 3000번의 react-dev-server가 이번엔 package.json에서 정의한 proxy에 해당하는 8000번 포트에 요청한다.

4. 8000번 서버가 "아! 여깄다" 하고 정보를 3000번 서버에게 준다.

5. 그 정보를 가져와서 3000번 포트의 dev server가 응답을 대신해준다.

6. 원하는 정보를 받아오는데 성공!!

 

일케 react dev server(개발서버)가 응답을 대신 받아와서 보내주도록 설정한것을 "proxy설정한다" 라고하고,

그런 대리역할을 하도록 proxy 설정이 된 서버를 "proxy서버"라고 한다.

 

생전 못들어본 단언데 proxy.... 말그대로 "대리"라는 뜻이었다. 왜 한번도 들어보지 못한거지..

 

파파고에 검색 결과

 

이렇게 proxy 설정을 해주면, 실제 api서버가 다른 포트에서 돌아가고 있다고 하더라도,

개발서버를 package.json에만 적음으로써 간경하게 해줄 수 있고,

포트가 바뀌거나 빌드할때  package.json의 proxy 설정값만 바꿔주면 된다.

 

게다가 결국 같은 포트인 3000번 포트가 대신 심부름하는 거기 때문에

내가 8000번 포트에 직접 시킨 것은 아니므로 cors에 걸리지 않는다.

그리고 쿠키는 당연히! 공유한다.

 

이렇게 세가지 문제를 깔끔하게 해결할 수 있는 것이다.

 

 

---

 

🐾 더 나아가

 

위의 나온 proxy설정은 전역적인 설정이다.

전역적인 설정이아니라 요청마다 다른 설정이 필요해서 수동으로 proxy설정이 필요한 경우가 있는데

그땐 " http-proxy-middleware" 라는 미들웨어 라이브러리를 다운받아서 사용하면 된다.

 

 

---

 

🔗 참고자료

 

CRA 공식 프록시 관련 문서

 

proxy: 장애물은 없앤다...!!!