fetch request 비동기통신

클라이언트와 서버를 연동했다면 서로 데이터를 보내거나 받을 수 있다.

그전에 클라이언트와 서버를 동시에 실행시키는 모듈을 소개하고자 한다.

 

npm-run-all                                                                       

npm-run-all 은 지정한 script를 차례대로 자동실행시켜주는 모듈이다.

사용하지 않는다면 프롬프트를 필요한만큼 켜서 실행시켜야 하는 불편함이 있기에 사용하면 편리하다.

 

설치가 끝났으면 script를 수정해준다.

 

-p는 병렬실행옵션

starts:**는 코드그대로 starts:로 시작하는 다음 스크립트를 2개 실행시킨다는 의미이다.

npm run start => 아래와 같이 client, server를 같이 실행시키게 된다.

 

 

 

비동기 통신                                                                             

클라이언트와 서버 사이의 데이터는 비동기통신인 fetch를 이용해서 통신할 수 있다.

클라이언트 단에서는 $.ajax, fetch같은 비동기통신 함수를 제공하고

nodejs 서버단에서는 request 같은 비동기통신 모듈을 제공한다

나는 보통 restAPI를 사용할때 fetch와 request를 사용한다

 

 

 

 

fetch                                                                                       

fetch를 이용하면 원하는 url로 비동기통신을 요청하고 정보를 받을 수 있다.

특히 restAPI처럼 특정 서버로부터 원하는 데이터를 얻고자할때 사용한다.

 

사용법은 다음과 같다

fetch( url, set ).then( ).catch( )

 

url은 말그대로 통신을 요청하는 위치가 되고

 

set에는 요청할 때 필요한 정보들을 담는 곳으로

method : 'GET', 'POST', 'PUT'

headers : 'Content-Type':'ex)application/json' , ...

form : POST같은 method를 사용할 때, 데이터들을 담아 보내는 공간으로 dataset이 된다.

 

 

 

 

request module                                                                         

NodeJS에서는 편리한 비동기통신을 위해 request 모듈을 제공한다.

다음과 같이 모듈을 require

 

request도 일반적인 비동기통신 함수들과 사용법이 거의 같다.

 

 

 

클라이언트와 서버간의 통신                                                        

 

클라이언트에서 서버로 데이터를 요청해보자

 

server/router/index.js

 

app.js

 

만들어진 버튼을 클릭하면

3001번 포트에서 가져온 데이터인 res, 타입, json을 통해 콘솔한 결과가 아래와 같이 나타난다.

정상적으로 잘 가져와진다.