React.JS 공부노트 #2 proxy

official document를 통해 매우 쉽게 첫 프로젝트를 올리는대에 성공했으나,
back-end 와의 통신이 필요하기 때문에 몇가지 진입방법을 고민합니다.

첫번째는 매우 간단하게 API서버를 만들어 두 server(React front-end server and Express back-end serve) 를 운용하는 방법,
또 하나는 Express 서버를 중심으로 react를 render 시키는 법(server-side render) 이 있는것 같았습니다.


하지만 server-side render 의 경우는 손쉽게 도움을 받은 webpack, babel의 상당한 설정이 필요한 것으로 보여, 우선은 첫번째 방식인 API서버의 혼용을 선택!



그럼 이제 운용되는 서버는 두개가 되는데, 각각의 서버는 별도의 포트를 보유하게 됩니다. (혹은 별도의 서버 ip)
React에서 서버 API와 통신을 하기위해서는 몇가지 잘 알려진 방법이 있는데,
xhrHttpRequest , Ajax, Fetch 등이 있습니다.
이러한 통신으로 API서버의 주소를 알려주고 그 결과를 주고받아야 합니다.

하지만 맘편하게 바로 요청 url에다가 full path가 아닌 상태로 쓰게되면  API서버가 아닌 React서버에request를 날리게 됩니다. (/api/getUser 같은방식으로 말이죠).

이러한 문제를 해결하기 위해서는 full path만 있으면 문제없죠! ( http://foo.bar/api/getUser  처럼 말이죠)
하지만 라인을 한줄이라도 더 줄이고 더 쉽게 쓰기 위해서, 좀더 재미난 방식을 사용 할 수 있습니다.
바로 proxy 입니다.
React 서버에서 request가 들어오면 , proxy에서 먼저 middleware 처럼 요청을 낚아채어 작업을 할 수 있게 되는거죠.
그럼 우리는 full path url이필요없이 base domain url을 써 줘도 proxy를 통해 api서버로 요청을 분기처리 할 수 있게 됩니다.

이러한 작업을 위해서 기존의 프로젝트의 package.json 환경설정 파일에 새로운 kv쌍을 입력해 주면 됩니다
"proxy" : "your_api_server_URL"

하지만, 이렇게 할 경우 모든 요청을 proxy 를 통해 API서버로 분기시키게 됩니다.

만약 URL서버 하나가 아니고 또 다른 서버가 있고, 그 서버와의 통신또한 필요하다면?

그리하여 react에서는 조금더 자세히 설정할 수 있는 방법을 제시합니다.

http-proxy-middleware
이 모듈을 통해서, 우리는 조금 더 자세하게 요청을 분기처리할 수 있습니다.

이 모듈을 이용하기 위해서 두가지 작업이 필요로 합니다.
1. react프로젝트를 고급설정 할 수 있도록 eject 해야 합니다.

`npm run eject `

가장 쉽게 React 프로젝트를 생성하는 craete React app 을 통해서 만들어진 프로젝트는
Webpack, Babel 등의 설정을 기본적으로 해두어 패키징 한 상태로 제공합니다. 그 말은 우리가 해야할 설정들을 다수 대신 해 만들어놓은 것 입니다.

프로토타이핑이나, 공부를 할 때에는 크게 만질 일이 없을것이나, 추가적인 설정 혹은 라이브를 위한 단계 등에서는 우리는 Webpack이나 Babel의 설정을 좀더 디테일하게 잡아줘야 할 수 있는데, 이를 위해서 패키징되어있는 React 프로젝트를 언팩하는 코드입니다.
해당 명령어를 수행하면 언팩작업을 거치며 프로젝트 폴더에 수많은 새 코드들과 파일들이 생성이 됩니다.

2.http-proxy-middleware 설치
`npm i http-proxy-middleware --save`

이제 작업 준비는 끝이났습니다. http-proxy-middleware 모듈을 불러와 분기처리를 하기위해 새 js파일을 생성합니다. 위치는 React 프로젝트에서 default path 로 src/setupProxy.js 위치에 명시해 두었습니다만 따를 필요는 없습니다.

코드를 작성합니다
`
const proxy = requrie('http-proxy-middleware');
module.exports = app => {
 app.use( proxy('/context' , { target : 'your_api_server_url' } ) );
}
`
/context는 controller처럼 들어오는 요청의 url의 앞에 있는 string이 들어갑니다.
/api 라고 명시하고, target에 http://foo.bar/ 라고 세팅하게 된다면
/api/getUser 라는 요청을 React에서 보낼 경우 proxy를 통해
http://foo.bar/api/getUser 라는 url로 변형되어 url서버로 요청을 보내게 됩니다.

만일 /foo/getUser 라는 요청이 들어오게 된다면, /foo 라는 이름의 url을 proxy설정에 넣지 않았기 때문에, React 서버로 인지하여 처리하게 됩니다.
`
const proxy = requrie('http-proxy-middleware');
module.exports = app => {
 app.use( proxy('/context' , { target : 'your_api_server_url' } ) );
 app.use( proxy('/context2' , { target : 'your_api_server_url2' } ) );
}
`
위와 같이 한줄을 더 추가하게 된다면, url에 따라 또 다른 세번째 서버로 연결을 확장 시킬수 있습니다.

마지막으로 React에서 방금만든 js 파일을 mount 하기 위해서
./config/paths.js 파일에
proxySetup Key값의 value를 내가 만든 파일의 location으로 맞춰 주어야 합니다.