Section4 Unit7 [Deploy] CI/CD - Proxy 설정해 HTTP 통신하기

---

Section4 Unit7 [Deploy] CI/CD - Proxy 설정해 HTTP 통신하기

 

📌 Chapter4. Proxy

• 프록시 서버는 클라이언트가 자신을 거쳐 다른 네트워크에 접속할 수 있도록 중간에서 대리해주는 서버를 말한다. 서버와 클라이언트 사이에서 대리로 통신을 수행해주는 것을 proxy라고 하고, 그 기능을 하는 서버를 proxy 서버라고 한다.

• 브라우저에서 기본적으로 API를 요청 할 때에는 브라우저의 현재 주소와 API 주소의 도메인이 일치해야만 데이터에 접근 할 수 있다. 만약 다른 도메인에서 API를 요청해서 사용 할 수 있게 해주려면 CORS 설정이 필요하다.

 

Proxy 적용 전 흐름

Proxy 적용 후 흐름

 

 

⭐️ 과제. Proxy 설정해 HTTP 통신하기

 

✔️ Bare Minimum Requirement

과제1 📁api 서버 이용

  ✅ webpack dev server의 proxy 기능을 사용해 우회하여 응답을 받기

 

과제2 📁api2 서버 이용

  ✅ webpack dev server의 proxy 기능 대신 http-proxy-middleware의 proxy 기능을 사용하여 proxy를 유연히 설정해 2개의 도메인에서 모두 응답을 받아오기

  ✅ api2에 관련된 fetch 함수를 만들고, 컴포넌트를 하나 이상 만들어 2개의 도메인에서 모두 응답을 받아오는지 테스트하기

 

 

 프록시 설정과 예제를 아래 첨부된 포스팅에 정리해두었다. 처음에는 어렵다고 생각한 개념이었는데, 계속 들여다보니 조금 익숙해진 것 같다 🙂

Proxy 설정해 HTTP 통신하기 ( webpack dev server의 proxy와 React Proxy 사용법 )

 

 

---

🌙  오늘의 회고

 오늘이 공식적(?)으로는 마지막 수업이다. 내일은 Section4 회고 시간이기 때문에 더 이상의 진도는 없다. 마지막 과제는 Proxy 설정을 통해 HTTP 통신을 하는 것이었다. 헷갈리고, 이해가 완전히 되지는 않았지만 여차저차 완료는 했다.

 너무 무더운 여름이다. 가만히 앉아있어도 덥고 습해서 공부하는 것도 힘든 날씨다. 이런 날씨 속에 제대로 집중하지 못한 하루가 또 흘렀네. 시간이 정말 너무 빠르다.