axios 사용하기

axios란?

 

웹사이트가 서버와 데이터를 주고받을 때 사용한다. 웹사이트가 서버에게 데이터를 요청하거나, 서버가 웹사이트에 데이터를 보내주는 일을 쉽게 해준다. 그리고 프로미스 기반이라 비동기적으로 처리할 수 있다.

 

1. axios 설치

yarn add axios

 

---

이제 json server를 설정해줘야 하는데, json server는 아주 간단하게 데이터 베이스와 api 서버를 생성해주는 도구다.

백엔드 개발이 끝나지 않아도 프론트엔디 개발을 할 수 있고, 가짜 데이터를 만들어 테스트 할 수 있다.

 

먼저 설치부터!

yarn add json-server
yarn add json-server -D # 개발 환경인 경우, -D 옵션을 함께 입력합니다.

 

 

 

json server는 간단한 패키지지만 서버이므로 리액트와 별개로 따로 실행해줘야 한다.

 

이제 파일을 먼저 만들어본다. 프로젝트 루트 경로에 db.json 파일을 만들고,

{
  "todos": []
}

이 내용을 입력하면 이 내용이 데이터베이스가 된다.

 

그리고 다른 터미널을 새로 열어서 아래 명령을 통해 json server을 실행한다.

yarn json-server db.json --port 4000

 

그럼 db.json 파일에 데이터를 추가하고 싶다면 어떻게 할까?

{
  "todos": [
    {
      "id": 1,
      "title": "json-server",
      "content": "json-server를 배워봅시다."
    }
  ]
}

이렇게 추가하면 된다.

 

이제 브라우저에서 http://localhost:4000/todos로 이동한다면, db.json에 넣은 데이터가 보일 것이다.

브라우저에서 url을 입력하는 것은 GET 요청을 보낸 것과 같고, 우리는 만든 api 서버에 GET 요청을 보낸 셈이다.

---

자 이제 이어서 써보겠다. 이제 본격적으로 json server를 설정해서 axios를 연습해본다.

 

먼저, db.json을 설정해야 한다.

{
  "todos": [
    {
      "id": "1",
      "title": "react"
    }
  ]
}

위 코드처럼 만들어준다.

 

먼저 테스트 해볼 것은 GET 요청이다

1. axios get

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

 

기본적인 사용방법은 이렇다.

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

axios.get(url[, config]) // GET(url은 매개변수, 대괄호([]) 안의 값은 선택 입력사항입니다.

 

그런데 get 요청 코드를 작성하기에 앞서 어떤 방식으로 요청해야할지는 json server의 방식을 알아봐야 한다.

axios는 get 요청을 할 수 있도록 도와주는 패키지일 뿐, 어떻게 요청을 보내야 할지는 우리가 사용할 api 명세서를 확인해 봐야 한다.

 

json server는 path variable로 url을 작성하면 된다. path variable은 경로에 포함된 변수로, 특정 리소스를 명확하게 지정할 때 사용한다.

http://example.com/users/123 //여기서 123이 path variable

 

 

2. axios post

서버에 데이터를 보낼 때는 post 요청을 사용한다.

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

url에는 데이터를 보낼 서버의 주소를, data는 서버에 보낼 데이터를 입력한다. config는 선택 사항이다.

 

3. axios delete

서버에 저장된 데이터를 삭제할 때 사용한다.

axios.delete(url[, config])

 

4. axios patch

서버에 있는 데이터를 수정할 때 사용한다.

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