[Node] FrontEnd & BackEnd 연동

- FrontEnd는 React.js

- BackEnd는 Node.js

 

먼저, 둘을 연동하기 위해서는 데이터를 주고 받기 위한 통신 라이브러리인 axios를 설치해야 한다.

- npm install axios

 

그리고 FrontEnd(React.js) 쪽에 있는 package.json에 proxy를 추가해 줘야 한다.

이 proxy는 Front 쪽에서 axios로 요청하는 모든 것은 proxy에 적혀 있는 포트로 연결해서 요청하고 데이터를 가져온다.

"proxy" : "http://localhost:8080" 이처럼 적혀 있다면 Front에서 3000포트로 연결하더라고 Back의 8080 포트에 접속하는 것이다.

 

axios.get("주소").then(res => {}).catch(error => {});

- axios get()에는 메소드명(get, post 등)을 넣는다.

- .then은 응답 성공 시 response를 받는 부분이고 res를 통해 응답쪽에서 보낸 데이터를 받을 수 있다.

- axios.get() 매개변수에 들어가는 주소로 요청을 보내는 것이다.

- res.data로 응답쪽에서 보내는 데이터를 받아 사용할 수 있다.

 

이제 서버에서는 listen으로 서버를 열어놓고 기다리다가 요청이 들어오면 그 요청 주소에 맞는 응답을 클라이언트에게 보내준다.

 

서버와 클라이언트에서 요청을 보내고 응답을 할 때에 요청 응답 방식과 요청 응답 주소가 같은 것끼리 매칭이 되어서 요청을 하고 응답을 하게된다.

같은 요청 주소라도 요청 방식이 다르면 매칭이 안되고 요청 방식이 같더라도 요청 주소가 다르면 매칭이 안된다.

서버

클라이언트