회고
이번 주는 json-server를 이용해서 mok서버를 만들고 axios와 redux thunk를 이용해 비동기 서버 통신을 해보았다. 그리고 JWT를 사용해서 쿠키에 저장하고 사용하는 법을 연습해보았다. 그 중 가장 기본적으로 사용해야했던 Axios에 대해서 정리해보려고 한다.
Axios?
axios?
axios는 브라우저나 Node.js를 위해 Promise API를 활용하는 HTTP 비동기 통신 라이브러리를 말한다.
특징으로는
- 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용
- Promise(ES6) API 사용
- 요청과 응답 데이터의 변형
- HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경
메소드
1. GET
GET : 입력한 url에 존재하는 자원에 요청을 한다.
문법
axios.get(url,[,config])✅ GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도이다.주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET메서드는 값이나 상태등을 바꿀 수 없다.
응답은 json 형태로 넘어온다.
2. POST
POST : 새로운 리소스를 생성(create)할 때 사용한다.
문법
axios.post(url[, data[, config]])POST 메서드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.
✅ 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때 사용한다.Post를 사용하면 주소창에 쿼리스트링이 남지 않기때문에 GET보다 안전하다.
3. Delete
REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용한다.
문법
axios.delete(url[, config])✅ Delete메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.
Delete메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.
4. Patch
patch는 보통 어떤 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 메서드이다.
위에서 언급한 post를 통해서 BE에 의해 수정이 가능은 하다.
문법
axios.petch(url[, data[, config]])✅ put과 patch는 동일한 원리이다.
Patch메서드는 필요한 데이터가 2가지있데, 수정하고자 하는 데이터의 id, 수정하고자 하는 값이다.
다음 주
이때까지 리액트 입문, 숙련, 심화 과정을 거치면서 배웠던 내용들을 활용해 FE, BE로 나뉘어서 미니 프로젝트를 진행하게 된다. 일단 주제는 간단하게 설명하면 붕어빵 가게 위치 알려주는 서비스를 하려고 한다.
참고자료
