[Study] Axios

productuidev·2022년 3월 8일

axios 개발 공부 프론트엔드개발

FE Study

목록 보기

24/67

버튼을 누를 때마다 페이지가 갱신이 된다면 > 불편함

검색을 하는데 추천 검색어가 로드될때마다 페이지가 새로고침된다면 > 불편함

이와 같은 불편함을 해결하기 위해 비동기식으로 데이터를 주고받아 사이트 구성하게 된다.

Axios 란?

Axios에 대한 이해를 하기 위해서는 먼저 AJAX에 대한 이해가 우선되어야 한다. AJAX란 Asynchronous Javascript And Xml의 약자로, Javascript의 라이브러리의 하나이다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여, 페이지 일부만을 위한 데이터를 로드하는 기법으로 Javascript를 사용한 비동기 통신, 서버와 클라이언트 간에 XML 데이터를 주고받는 기술이다.

리액트에서 AJAX를 구현하려면, Javascript의 내장객체인 XMLRequest를 사용하거나, HTTP Client를 사용해야 한다. Axios는 리액트에서 많이 쓰이는 HTTPClient 라이브러리의 하나이다. Axios는 Promise 기반이고, async/await 코드를 쉽게 구현할 수 있게 해준다.

HTTPClient 라이브러리

브라우저랑 서버가 데이터를 송수신하는 통신 프로토콜
브라우저 > 서버 데이터 요청 / 서버 > 브라우저 데이터 응답
(*서버가 전송해준 데이터를 화면에 표시할때, 전체 화면을 새로고침 하지 않아도 일부분 데이터만 변경할수 있음)

Axios 특징 및 장점

운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
오래된 브라우저에서도 지원한다.
요청을 중단할 수 있다.
요청과 응답 데이터의 변형
response timeout을 쉽게 지정할 수 있다.
CSRF 보호 기능이 내장되어 있다.
Promise(ES6) API를 사용한다.
HTTP 요청 취소 혹은 요청과 응답을 JSON 형태로 자동 변경해준다.

비동기 처리

비동기 처리란? 로직을 실행 > 로직 끝남을 기다려 주지 않고, 뒤의 나머지 코드를 미리 실행
왜? 로직이 끝나는 시작을 알수 없음 + 로직 끝나기까지 시간이 오래걸린다면 다른 코드 실행이 느려짐
방식? 바로 다른 로직을 실행할 수도, 일정 시간 후에 실행할수도
주의? 한 페이지 안에서 콜백안에 콜백을 넣어 여럿 비동기 처리를 한다면, 가독성도 떨어지고 로직 변경도 어려움 = 콜백지옥
해결? promise나 async를 사용하여, 콜백 함수들을 분리

Promise(ES6) API

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용
일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용
$.get('url 주소/products/1', function(response) { // ... });
위 API가 실행되면 서버에다가 ‘데이터 하나 보내주세요’ 라는 요청을 보냄 > 그런데 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜸 > 이와 같은 문제점을 해결하기 위한 방법 중 하나임
출처 - https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

promise란? 비동기처리에 사용하는 객체
방식? 서버에서 데이터를 받아오는 함수 실행시, 데이터를 받아올때의 대기, 완료, 실패 세가지 상태를 처리해줌 (pending / fulfilled / rejected)
결과? 상태에 따라 then을 사용하여 결과를 받거나, catch를 사용하고 실패 이유를 받음
(*catch를 사용해야 많은 오류들을 잡을 수 있다.)
활용? fulfilled> then > then을 여러개 로 연결하여 활용 가능

Fetch API와 비교

REST API

REST란, 어떤 자원에 대해 CRUD(Create, Read, Update, Delete) 연산을 수행하기 위해 URI로 요청을 보내는 것으로 Get, Post 방식의 method를 사용하여 요청을 보내며, 요청을 위한 자원은 특정한 형태(ex. JSON)로 표현된다. 이러한 REST 기반의 API를 웹으로 구현한것이 REST API이다.

REST API에는 대표적으로 4가지의 HTTP 메서드를 행위의 수단으로 사용한다.

GET : 데이터 조회
POST : 데이터 등록 및 전송
PUT : 데이터 수정
DELETE : 데이터 삭제

Axios 사용

GET

입력한 url에 존재하는 자원에 요청을 할 때 사용한다.

axios.get(url[, config])

get 메서드를 사용하는 상황은 크게 2가지 경우가 있다.

단순 데이터(페이지 요청, 지정된 요청) 요청을 수행하는 경우
파라미터 데이터를 포함하는 경우 (ex. 사용자 번호에 따른 조회)

POST

새로운 리소스를 생성할 때 사용한다.

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

post 메서드는 일반적으로 데이터를 Message Body에 포함시켜 보내며,
get 메서드에서 params를 사용한 경우와 비슷하게 수행된다.

params : 메소드에서 배열형태의 매개변수를 받을때 사용하는 키워드

PUT

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신하는 목적으로 사용한다.

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

PUT 메서드는 서버 내부적으로 GET -> POST 의 과정을 거치기 때문에
POST 메서드와 비슷한 형태이다.

DELETE

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용한다.

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

출처
https://dsc-sookmyung.tistory.com/200
https://koras02.tistory.com/48
https://studiodebbbie.tistory.com/entry/vuejs-%EC%97%91%EC%8B%9C%EC%98%A4%EC%8A%A4-Axios-%ED%98%B8%EC%B6%9C-%EB%B9%9B-%EB%AC%B8%EB%B2%95-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0
https://kyun2da.dev/%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/axios-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC/
https://cocoon1787.tistory.com/756

productuidev

필요한 내용을 공부하고 저장합니다.

이전 포스트

[Study] CLI란? (명령어 정리)

다음 포스트