: node.js와 브라우저를 위한 Promise 기반 http 클라이언트
-> http를 이용해서 서버와 통신하기 위해 사용하는 패키지
yarn add axios : axios 설치
테스트용 json-server 설정
✅ Axios GET
: 서버의 데이터를 조회할 때 사용
axios.get(url[, config])
: url - 서버의 url이 들어감
: config - 기타 여러가지 설정 추가 가능
https://axios-http.com/kr/docs/req_config
json-server API 명세서 확인하기
: Axios 사용해서 GET 요청코드 작성하기에 앞서, 어떤 방식으로 요청해야 할지는 json-server 방식을 알아봐야 함
-> Axios는 GET 요청을 할 수 있도록 도와주는 패키지일 뿐, "어떻게 요청해야하지?"라는 방식에 대한 확인은 우리가 사용할 API 명세서를 봐야 함
-> GET 요청할 때 path variable로 해야할지, query로 보내야할지는 API를 만든 사람이 하라는대로 해야 함
json-server 공식문서를 보면,
🔥 전체정보, 상세정보는 path variable로 url 작성해서 보내기
🔥 filter와 같은 기능을 위해 GET 요청할 때는 query로 작성해서 보내기
예시 코드
: 우리가 만든 json-server에 있는 todos를 axios를 이용해서 fetching하고, useState를 통해서 관리하는 로직을 만들어보자.
🔥 중요 코드
: 비동기처리를 해야하므로 async/await 구문 사용
: axios를 통해 get 요청 함수 생성
: 서버로부터 fetching한 데이터를 useState의 state로 set
: 생성한 함수를 컴포넌트가 mount 됐을 때 useEffect를 사용
-> fetchTodos() 함수 넣어 실행
: data fetching이 정상적으로 되었는지 콘솔을 통해 확인
-> 우리가 생성한 Todos를 서버에서 정상적으로 가져와서 state가 set한 것을 확인 가능
✅ Axios POST
: 서버에 데이터를 추가할 때 사용
axios.post(url[, data[, config]])
: post 요청에 대한 로직은 BE 개발자가 구현하므로 추가기능 외에 다른 용도로도 사용될 수 있음
: 보통 클라이언트의 데이터를 body 형태로 서버에 보내고자할 때 사용
json-server API 명세서 확인하기
: Axios 사용해서 POST 요청코드 작성하기에 앞서, 어떤 방식으로 요청해야 할지는 json-server 방식을 알아봐야 함
json-server 공식문서를 보면,
🔥 path variable로 url 작성해서 보내기
예시코드
: GET 코드예시에 POST 코드 추가
: 새롭게 생성하는 todo를 관리하는 state 추가
: 화면의 input에 어떤 값을 넣고 버튼을 클릭했을 때 onSubmitHandler가 실행
: onSubmitHandler 이벤트 핸들러에 axios post 구현
-> 🔥 todo를 body에 담아 서버로 POST 요청을 보냄
: 버튼을 눌러 POST 요청을 하면 todos에 입력한 title이 추가됨
: POST 요청한 후 새로고침을 해야만 새로운 정보가 표시됨...
❓ 새로고침없이 화면이 업데이트되는 방법은?
네트워크탭 확인하기
: post 요청을 보냈을 때 브라우저의 네트워크 탭에는 어떤 로그가 생기는지 확인
🔥 네트워크쪽 개발할때는 항상 브라우저에 있는 네트워크 탭을 확인하면서 개발 진행해야 함
-> 어떤 문제가 생겼을 때 이 정보를 통해 디버깅 가능
headers
- Request URL - 우리가 의도한 URL로 post 요청을 보냈음을 알 수 있음
- Request Method - 우리가 사용한 메서드 (post) 알 수 있음
- State Code - 201 코드 받음(정상적으로 네트워크가 이루어짐), 자동으로 생성되지 않고 BE 개발자가 직접 개발하고 설정한 code가 브라우저에 보이는 것
(만약 BE 개발자가 구현해놓지 않았다면 다른 status code가 브라우저에 보일 수 있음) - request headers, response headers 등...
payload
: 우리가 보낸 body 확인 가능
response
: 우리가 보낸 post에 요청에 대한 서버의 응답값 확인 가능
: 자동으로 생성되는 것이 아니라 FE 개발자가 BE 개발자에게 요청한 것을 직접 개발해야 생기는 값
-> 우리가 사용한 json-server은 POST 요청을 했을 때 클라이언트가 보낸 body를 그대로 응답해주도록 만들어진 패키지이므로 위와 같이 표시됨
✅ Axios DELETE
: 저장되어 있는 데이터를 삭제할 때 사용
axios.delete(url[,config])
json-server API 명세서 확인하기
: Axios 사용해서 POST 요청코드 작성하기에 앞서, 어떤 방식으로 요청해야 할지는 json-server 방식을 알아봐야 함
json-server 공식문서를 보면,
🔥 path variable로 url 작성해서 보내기
예시코드
: GET, POST 코드예시에 DELETE 코드 추가
: onClickDeleteButtonHandler()
: map을 돌린 항목별로 삭제하기 버튼 추가
: delete 요청이 성공적으로 이루어진다면, 브라우저를 새로고침했을 때 삭제한 Todo가 화면에서 보이지 않음
네트워크탭 확인하기
: 네트워크탭에 todo.title의 id값이 name으로 찍히며 Headers의 Request Method에 DELETE가 찍힘
✅ Axios PATCH
: 어떤 데이터를 수정하고자 서버에 요청을 보낼 때
: http 환경에서 서로가 한 약속이자 문맥이므로 수정을 하고자 만드시 patch, put을 써야하는 것이 아님
-> BE에 의해서 POST를 통해 '수정'의 기능은 충분히 만들 수 있기 때문
axios.patch(url[,data[, config])
json-server API 명세서 확인하기
: Axios 사용해서 POST 요청코드 작성하기에 앞서, 어떤 방식으로 요청해야 할지는 json-server 방식을 알아봐야 함
json-server 공식문서를 보면,
🔥 path variable로 url 작성해서 보내기
예시코드
: GET, POST, DELETE 코드예시에 PATCH 코드 추가 (put은 동일한 원리)
: Todo를 수정하기 위해 필요한 데이터는 2개 (수정하고자하는 Todo의 id, 수정하고자하는 값)
-> 수정하고자하는 값은 기존에 있던 todo라는 state 사용, id는 직접 입력하여 url로 넘겨주는 방식으로 구현 (보통 직접 입력은 안함)
: patch에서 사용할 targetId와 변경될 setTargetId 선언
: 수정할 editTodo와 수정할 값인 setEditTodo 선언
: 수정 버튼을 클릭하면 onClickEditButtonHandler 이벤트 핸들러가 작동
: todoId와 edit이 인자로 들어감
: 입력받은 id값을 ev.target.value로 받아 setTargetId에 담아줌
: 입력받은 수정값을 ev.target.value로 받아 editTodo의 title에 담아줌
: 버튼 클릭하면 onClickEditButtonHandler가 작동하고, targetId와 editTodo가 인자로 들어감
네트워크탭 확인하기
: 네트워크탭에 todo.title의 id값이 name으로 찍히며 Headers의 Request Method에 PATCH가 찍힘
✅ .env
API 서버의 IP 또는 URL을 숨겨서 처리
https://tooo1.tistory.com/m/582
🙋🏻♀️ axios instance
🙋🏻♀️ axios intercepter !! 꼭 알아보기
🙋🏻♀️ fetch에 비해 axios가 더 좋은 점?
🙋🏻♀️ http status code에는 어떤 것들이? 각 code의 의미는?
🙋🏻♀️ request headers와 response headers의 정보들은 각각 어떤 정보들?
