React 생활코딩 #6

https://www.youtube.com/watch?v=VaAWIAxvj0A

Proxy

ajax 통신을 할 때 쓰는 새로운 표준 : fetch

fetch를 사용하려면 위와 같이 표현해주어야 한다. 그러나 문제점들이 존재

1. 실제 서버를 구동할 때는 http://localhost:8000에서 서버를 열지 않기 때문에 위의 코드대로 하면 작동하지 않는다 --> fetch('/api_path') 같이 상대경로만 지정해주어도 작동하게 하고 싶다.

---> proxy를 사용하면 가능하다.

2. Cross-Origin Resource Sharing (CORS) 정책으로 인해 통신이 불가능하다. 다른 포트, 다른 도메인에 접근하려고 하면 보안정책에 의해 접근이 금지돼있다. 즉, 3000번 포트에 있는 도메인에서 8000번 포트에 접근하려고 하면 8000번 포트에서 접근을 허용해주어야 접근을 할 수 있다.

3. Cookie 문제 : port가 다르면 cookie를 자동으로 만들어서 보내주지 않는다.

proxy의 사용

/api_path는 3000번 port가 갖고 있지 않지만, 값이 없다면 proxy에 적혀있는 정보를 보고 8000번에 있는 정보를 가져와서 응답을 대신한다(=proxy).

proxy의 장점 : CORS에 걸리지도 않고, 상대경로를 사용할 수도 있고 Cookie역시 공유한다.

Rest api 통신

package.json

node의 port번호를 8000번으로 설정했다. 내 임의로 4000번으로 설정했을 때는 오류가 떴었는데, 8000번으로 하니까 된다.

localhost:4000/user/test 에 node를 이용해서 json data를 import하는 api server을 구축했다.

axios

axios를 import 해준다.

axios를 이용해서 get API 를 받는다.

console.log(res) 만 해보면 위와 같이 찍히는 것을 알 수 있다. json의 값은 data.userData로 받아야 출력이 가능하다.