회고 Tip
1. 지금 현재, 기분과 느낌을 표현(구체적)
2. 오늘 학습한 내용의 단어를 모두 나열
3. 나열한 단어를 하나씩 설명
4. 설명하기 어려운 단어가 있다면 그 이유를 생각
5. 스스로 설명하기 위해 질문한다면 어떻게 질문할것인가 생각
웹개발_Proxy
앞서 공부했던 CORS정책도 다시 복습할 수 있었고 또 Proxy라는 개념을 익히고 실습해보며 사용법을 알 수 있었다.
늘 그랬던거처럼 쉽지 않았지만 이러한 과정들이 지금의 나에겐 당연히 필요하기에 하나하나 해결해나가는 시간을 가져보았다.
기억나는 단어들 나열해보기
- CORS정책
- Proxy
1) webpack dev server proxy 사용법
2) React Proxy 사용법
1. CORS정책
브라우저에서 기본적으로 API를 요청할때 브라우저의 현재 주소와 API의 주소의 도메인이 일치해야만 데이터를 접근할 수 있게 되어 있다. 만약 다른 도메인에서 API를 요청해서 사용할 수 있게 해주려면 CORS(Cross-Origin-Resource)설정이 필요하며, 추가 HTTP헤더를 사용하여 다른 도메인의 API가 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는것이다.
만약 모든 출처의 접근을 허락한다면 보안성이 떨어지며 해킹의 위험에 그대로 노출될것이다.
따라서 모든 도메인을 허용하지 않고 특정 도메인만 허용하도록 구현해야한다. 프론트엔드 개발자가 백엔드 개발자에게 프론트엔드 개발 서버 도메인을 허용해달라고 요청하고, 백엔드 개발자는 응답 헤더에 필요한 값들을 담아서 전달해주는것이다. 또한 적절한 응답 헤더를 받지 못하면 브라우저에서 에러가 발생한다.
2. PROXY
Proxy란 위에서 설명한 정적적인 과정이 없이 React라이브러리, Webpack Dev Server에서 제공하는 기능으로써 사용하면 CORS정책을 우회할 수 있다. 따라서 별도의 응답 헤더를 받을 필요없이 React 앱으로 데이터를 요청하고 이 요청을 백엔드로 전달하게 된다.
React 앱이 서버로부터 받은 응답 데이터를 다시 브라우저로 전달하는 방법을 쓰기 때문에 브라우저에는 CORS 정책을 위반했는지 모르게 되는것이다. Proxy기능은 쉽게 말해 브라우저를 속이는 것이다.
Webpack dev server proxy 사용법
package.json에서 "proxy" 값을 설정하여 적용하며 보통 맨 밑에 작성
기존의 fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거
React Proxy 사용법
http-proxy-middleware 라이브러리 설치 후 경로에 맞게 파일 생성 및 작성
기존의 fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거
오늘은 커리큘럼에 있어 마지막 페어활동이자 마지막 멘토 Q&A의 날이다 점점 과정이 끝나감을 느끼지만 마지막 큰 산이 남았으니 이제부터 진짜라는 생각으로 화이팅하자!
