항해 26일차 (axios)

항해 26일차

오늘은 axios에 대해 공부를 하였다. 리액트에서 서버랑 처음 접하는 부분이어서 두렵기도 하고 설레기도 하였다.

그래서 오늘 axios에 대해 til를 작성한다.

axios

node.js와 브라우저를 위한 promise 기반 http 클라이언트이다. 즉 http를 이용해서 서버와 통신하기 위해 사용하는 패키지이다.

axios에는 get, post, delete, patch(put)이라는 기능들이 있다.

먼저 get은

Get

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

기본문법

// url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있습니다.
// config는 axios 공식문서에서 확인하세요.

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

두 번째 post이다.

Post

post는 보통 서버에 데이터를 추가할 때 사용한다. 추가외에 다른 용도로 사용할 수도 있다.

기본문법

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

Delete

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

기본문법

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

patch

patch는 보통 어떤 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 메서드이다. 다만, patch, put 이외에도 post를 사용하여 수정할 수도 있다.

기본문법

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

put

put은 리소스의 전체내용을 수정하고자 서버에 요청을 보낼 때 사용하는 메서드이다. 즉 put과 patc는 각각의 사용 목적에 따라 선택해야 한다. 만약 리소스를 완전히 대체하고자 하는 경우 Put을 사용하고, 리소스의 일부를 업데이트를 하고자 하는경우는 patch를 사용한다.

기본문법

axios.put(url[, data[, config]])

마무리

오늘은 axios에 대해서 공부를 해보았다. 기본적인 CRUD에 대해 알게 되었다. 리액트 부분에서 처음 서버와 접하는 부분이어서 신기했고 json-server의 port를 설정하여 데이터를 관리할 수 있다는 것도 알 수 있었다.