React proxy

React proxy

 

react를 개발할때 react app에선 기본으로 react dev server을 제공해주어 npm start를 하면 server가 생성됩니다.

 

하나의 컴퓨터안에 react와 node등 다른 여러 server을 2가지이상 사용하고싶을때 구별을 위해 port를 사용하게 되는데

 

react에서 ajax 기술을 이용해서 php, Django가 서비스되는 서버에 접속해서 data를 가지고오거나 데이터를 변경시키는 작업을 할때 fetch를 씁니다. 보통 port가 8000이면 fetch(‘http://localhost:8000/api_path')로 하게 되죠.

 

 

여기서 문제가 생기게 됩니다.

 

react dev server을 쓸때 문제가 생깁니다.

이유는 port가 달라서 인데요. react dev는 3000에서 서비스되는데 연결하려는 서버는 8000에서 서비스가 됩니다.

(실제 서버에서는 react dev server없이 react와 backend server가 같은 port에서 service될것이라 문제가 없음)

 

그렇다면 port가 다르다면 어떻게 될까요?

실제 서비스시 여러가지 문제가 생기게 됩니다(cookie, CORS, localhost 접근불가). 

 

이거를 해결하기위해 proxy를 사용합니다.

-> react에게 proxy server라고 알려주고 '요청이들어왔는데 요청이 실패하면 자동으로 8000포트에게 물어봐서 

개가 알려주는 정보를 가지고 와'라는 식으로 할수있다.

 

 

그렇다면 사용은 어떻게 할까요?

 

client directory의 pakage.json에 {… proxy:’http://localhost:8000'…} 라 설정합니다.

(proxy:’http://localhost:8000' 이 error가 나면 다른 이름인 ‘http://127.0.0.1:8000’ 시도)

 

아주 간단합니다!

 

 

그렇다면 proxy의 장점은 무엇일까요?

 

1. proxy를 키면  fetch(‘http://localhost:8000/api_path') -> fetch(/api_path’) 로 간결하게 표현가능합니다

(절대 경로가 상대 경로로 바뀜)

 

2. 같은 port라 CORS에 걸리지 않습니다.(보안을 위해 다른 port로 가는 것을 막고 있음)

 

3. Cookie를 공유하게 됩니다.(login시 server에서 cookie를 주고 나중에 cookie를 가지고있으면 로그인 편하게해줌)

 

 

마지막으로 proxy의 원리에 대해 알아보겠습니다.

 

fetch(‘/api_path’)로 접근하면 react는 3000포트에 있어서 localhost:3000/api_path로 접근합니다.

proxy가 없다면 error를 내겠지만 정보가 없다는걸 알게되면 pakage.json의 proxy server로 접근해서 정보 가져오게 됩니다.

 

 

 

 

오늘은 간단하지만 유용한 proxy에 대해 알아보았습니다.

유익한 컨텐츠를 제공할 수 있도록 항상 노력하겠습니다.

 

 

 

 

- 이 노트는 생활코딩의 유튜브 강의를 통해 배운 내용을 정리한 것입니다.

- 초보 개발자라 부족한 점이 아직 많습니다. 다른 의견이 있으시다면 자유롭게 남겨주세요.

- 처음 접하시는 분께는 다소 어려울 수 있지만 어느 정도 개념이 잡히신 분께 도움이 되었으면 하는 바람에서 작성된 글입니다.