node.js) ajax

비동기 통신으로 

원하는 정보를 JSON/XML 형식으로 받을 수 있다

 

원하는 데이터만 받기 때문에 받는 속도는 빠르지만

받아온 데이터를 재 가공해야하기 때문에 처리해야하는 작업이 늘어남

 

readyState===4, state 가 200이면 성공

 

cors 

-> 포트번호가 다른 url을 현재 포트로 연결해주는

-> 데이터를 넘겨주는 API 서버와 화면을 출력해주는 서버가 다를 경우 사용할 수 있다 (vscode의 live server도 같은 형식)

 

ajax 객체를 통해 요청을 보내고 응답을 받는 것으로 비동기 통신 가능

 

ajax 통신을 구현하는 방법에는 3가지가 있다

1. XMLHttpRequest 객체 사용

2. jQuery

3. axios 사용 (axios cdn 검색) - 적은 코드로 사용 가능 (cdnjs.com/libraries/axios)

 

axios 주소를 script src에 넣어주고 axios.get()으로 사용 -> Promise 객체로 반환

.then() 콜백함수의 응답.data 안에 결과

 

client - live server(port:5500)

client - API server(port:3000, cors로 다른 포트 허용) - DB

두가지 서버의 비동기가 이뤄진다

 

위 기능을 react.js로 구현하면 

비동기 통신을 더 효율적으로 할 수 있다

-> 하나의 단위를 컴포넌트라고 한다