어느새 항해도 중반에 접어들어 이제 본격적으로 백엔드 팀과의 협업 과정에 접어들었다.
리액트로 고통받고, 리덕스가 상처내고, 미들웨어가 상처에 소금 뿌리던 여정에 axios라는 큰 벽이 나타났다.
그렇다고 이 벽을 피해갈 수는 없으니 지금까지 그래왔듯이 역시 맞부딫혀 공부하고 넘어가는 수 밖에 없다.
Axios의 특징
- 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
- Promise(ES6) API 사용
- 요청과 응답 데이터의 변형
- HTTP 요청 취소
- HTTP 요청과 응답을 JSON 형태로 자동 변경
그래. 일단 첫번째 특징에서 막힌다.
XMLHttpRequest라니. 이건 또 무슨 개념이란 말인가. 두 다리로 걸을 수 있다는 것 빼면 원숭이와 하등 다를 바 없는 나는 아주 작은 개념 조차도 소흘히 넘어갈 수 없다.
MDN에서 찾아보니 이렇다 카더라.
XMLHttpRequest (XHR) 객체는 서버와 상호작용할 때 사용합니다.
XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있습니다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트할 수 있습니다.
하지만 MDN에서도 쓸테면 쓰지만 그렇게 권장하지는 않는다고 한다(...)
강의에서도 분명 IE6 버전대의 레거시 브라우저에서 구동할 일이 없다면 굳이 쓰지 않아도 된다고 한 역사적 유물 같이 설명해 주셨으니 이런게 있나보다... 하고 넘어가면 될 것 같다. 코딩 시작하고 뭔가 그런가 싶으면 대충 넘어가 버리는 버릇이 생겼다(...)
본래의 주제로 돌아와, axios는 현대 웹 환경 기반에서 서버발 데이터를 받아올 때 가장 많이 쓰이는 라이브러리라고 한다.
axios에는 여러가지 메소드가 있는데, 지금 당장 내가 알아둬야 할 것들은 CRUD를 수행하기 위해 크게 네가지 정도로 압축할 수 있을 것 같다.
GET : axios.get(url[, config])
POST : axios.post(url, data[, config])
PUT : axios.put(url, data[, config])
DELETE : axios.delete(url[, config])axios의 GET 메서드에는 크게,
1. 단순 데이터(페이지 혹은 지정된 요청)을 수행할 경우와 2. 파라미터 데이터를 포함시키는 경우
의 두가지 상황이 존재한다.
다음으로, POST 메서드는 데이터를 바디에 포함시켜 보내고, DELETE는 GET, POST와 달리 바디가 비어있는 것이 특징으로, REST 기반 API에서 DB에 저장되어 있는 내용을 삭제하는 목적으로 사용한다고 한다.
하지만, query나 params가 많아져서 헤더에 많은 정보를 담을 수 없을 때는 두 번째 인자에 data를 추가해줄 수 있다.
마지막으로 PUT이 있다.
PUT은 REST 기반 API에서 DB에 저장되어 있는 내용을 수정하는 목적으로 사용된다.
PUT는 수정에 사용되는 만큼 서버 내부에서 자체적으로 GET -> POST의 과정을 거치기 때문에 POST와 비슷한 형태로 사용한다.
이제 갓 배운 개념이라 너무 혼란스럽고 어떻게 사용할지 감도 쉽게 오지 않지만, 조금씩 차분하게 개념을 잡아가면서 공부하다 보면 언젠가 axios도 큰 벽으로 느껴지지 않을 만큼 성장할 수 있으리라 생각하고 오늘도 꾸역꾸역 앞으로 나가야겠다.
