json-server, Axios

json-server란?

1. json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지 입니다. 우리가 json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함입니다.

2. json-server를 통해서 FE에서는 BE가 하고 있는 작업을 기다리지 않고, FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업을 할 수 있습니다. 이번 챕터에서는 단순히 mock data로 사용하는 것을 넘어, 실제로 배포까지 하여 간단한 API 서버를 구축하고 과제 프로젝트를 완성하는데 사용할 것 입니다.

Axios란 무엇인가?

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.
쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다.

Axios 특징

운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
Promise(ES6) API 사용
요청과 응답 데이터의 변형
HTTP 요청 취소
HTTP 요청과 응답을 JSON 형태로 자동 변경

설치

npm i -g json-server

yarn add axios

json-server 설정

API 서버는 우리가 만든 json-server를 사용합니다. 배포는 하지 않아도 되고, 한 프로젝트 내에서 3001 포트로 서버를 가동시켜 사용합니다.

Axios get

get은 서버의 데이터를 조회할 때 사용합니다.

 axios.get(url[, config]) // GET

Axios POST

post는 보통 서버에 데이터를 추가할 때 사용합니다. 다만 post 요청에 대한 로직은 BE 개발자가 구현하는 것이기때문에 추가외에 다른 용도로 사용될 수 있지만, 보통은 클라이언트의 데이터를 body형태로 서버에 보내고자 할 때 사용합니다.

axios.post(url[, data[, config]])   // POST

DELETE

DELETE는 저장되어 있는 데이터를 삭제하고자 요청을 보낼 때 사용합니다.

axios.delete(url[, config])  // DELETE

PATCH

patch는 보통 어떤 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 메서드 입니다. 다만, 이것은 http 환경에서 서로가 한 약속이자 문맥이기때문에, 수정을 하고자 반드시 patch, put 을 써야만 하는 것은 아닙니다. BE에 의해서 POST를 통해서 “수정" 이라는 기능은 충분히 만들 수 있기 때문이죠. 보통은 수정기능을 만들 때 직접 id를 입력받아 처리는 방식은 거의 없습니다.

axios.patch(url[, data[, config]])  // PATCH

정리

• Axios를 이용해서 API 서버와 통신할 수 있다.
• Axios는 http 통신을 도와주는 패키지이며, 구체적인 명세는 API 명세서를 확인해야 한다.
• 브라우저 네트워크 탭을 잘 봐야 한다.
• http method, staus code와 같은 정보들은 BE개발자가 구현해주는 부분이며, 약속이자 문맥이므로 BE와 FE간의 커뮤니케이션이 잘 되어야 한다.
• 네트워크 통신 이후, 화면을 업데이트 하고자 한다면 별도로 FE에서 추가로 구현해야 한다.