53 :: React Router, CORS

엘리스 SW 엔지니어 트랙 53일차

실시간 강의날

 

 

CRUD 복습

Update 복습을 하자! 제일 복잡하니

 

 

라우팅

url을 공유할 수 있게 만들어준다

window.history를 사용해서 만들면 코드가 엄청 길어주는데

react-router-dom 이라는 녀석을 npm에서 다운받아서 사용하면 편하다

npm install react-router-dom

 

웹 어플리케이션을 만들 때 라우팅이 반이다

어떻게 라우팅을 하는지 중요하다

 

 

 

react-router-dom

배우긴 어렵지만 강력한 기술

최상위 컴포넌트에서 라우터를 쓰겠다고 선언해야된다

=> <BrowserRouter></BrowserRouter>

 

라우터 어렵다 안익숙해서 그렇지

 

 

CORS(Cross Origin Resource Sharing)

보안(유저 보호) 위한 정책

브라우저가 막지만, 설정은 서버가 해야된다.

다른 도메인을 사용 못하게 하는 정책

 

해결 방법

1. 백엔드에서 특정 도메인 허용

access-control-allow-origin 허용 필요

 

2. JSONP 사용

JSONP 위키 링크 => https://ko.wikipedia.org/wiki/JSONP

<script> 태그는 보안 정책이 적용 안된다는 점 이용

외부 자원을 JSON 형태로 변환해서 받아오기

 

3. 프록시 설정

프록시 위키 링크 => https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9D%EC%8B%9C_%EC%84%9C%EB%B2%84

프록시 서버: 서버와 사용자 통신할 때 중간에서 이어주는 역할

 

프록시 방법 순서

1. API와 사용자 간 프로시 설정하고
2. 서버의 자원을 프록시 서버에서 받고
3. 사용자에게 CORS 허용된 것 처럼 HTTP 요청 허용 해준다

 

React에서 해결 방법

프록시도 가능하지만,

https://cors-anywhere.herokuapp.com 이용하면 가능

저 사이트가 프록시 서버가 되어준다

CORS 프록시 설정 간편하게 가능

 

사용 예시

// 네이버 API 이용 예시
axios.get("https://cors-anywhere.herokuapp.com/https://openapi.naver.com/v1/search/shop",
    { params: { 
        query: "부산 여행" 
      }, 
      headers: {
        'X-Naver-Client-Id': API_KEY, 
        'X-Naver-Client-Secret': API_SECRET
      }
    }).then((res) => (res.data.items));

 

하지만

프로덕션 레벨에서는 서버가 통신하게 하자

 

 

참고 링크

History API

링크 => https://developer.mozilla.org/en-US/docs/Web/API/History_API

 

리액트 라우터 새버전 v6 듀토리얼

링크 => https://velog.io/@velopert/react-router-v6-tutorial

 

cors-anywhere

링크 => https://cors-anywhere.herokuapp.com/