3.REST API 구축하기

node.js express 를 설치하여 REST API를 구축해보았다. 

REST API는 최근 상당수의 웹 서버 프레임워크에서 기본적으로 지원하는 기능으로 서버와 클라이언트가 웹 프로토콜을 기반으로 하여 효과적으로 데이터를 주고 받을 수 있도록 해준다. 저번 강의에 이어서 전체 고객 목록을 불러오는 API를 구현해보았다. 

터미널에 각각 npm run server 와 npm run client를 입력하면 각각의 포트가 열리도록 서버에 만든 package.json의 scripts에 작성해두었다. 

 

서버            <->          클라이언트 

5000번 포트               3000번 포트 

package.json              package.json 

server.js                     app.js 

 

클라이언트의 package.json 에   "proxy": "http://localhost:5000/" 를 넣어서 해당 포트를 API 서버로 이용하도록 해주었다. 

/api/customers 경로로 들어가면 3명의 데이터가 json형태로 출력되는 것을 볼 수 있다. 

 

리액트는 비동기 통신으로 서버에서 데이터를 가져온다. 비동기 통신이기 때문에 삼항연산자를 통해 customers 변수에 값이 들어있을 때만 각 고객의 데이터를 출력할 수 있도록 했다. 

API 서버에 접근해서 데이터를 가져오는 메소드는 componentDidMount()를 사용한다. 모든 컴포넌트가 마운드가 완료되었을 때 실행된다. 받아온 json 데이터를 state변수 customers에 넣어준다. 

 

app.js

 

참고: https://ndb796.tistory.com/218 [안경잡이개발자]