개인프로젝트 중 db연동 전 자바스크립트의 비동기 처리에 대해 공부할 필요를 느껴 간단한 이론을 정리해보았다.
자바스크립트의 비동기 처리
특정 코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행시키는 자바스크립트의 특성
홈페이지에서 비동기 처리가 없다면 하나의 작업이 완료되기 전 까지는 다른 작업을 진행할 수 없다. 하지만 비동기 처리에도 문제점이 있다.
비동기 처리의 문제점
데이터를 다 받아오기도 전에 비동기적 코드 처리 때문에 다른 함수를 실행하여 원치 않은 결과가 나올 수 있다. 이런 문제점을 해결하기 위해 Callback 함수를 이용한다.
Callback 함수
어떤 이벤트가 발생했거나, 특정 시점에 도달했을 때 시스템에서 호출하는 함수
콜백함수 실행으로 요청한 작업이 끝났음을 알리고, 작업의 결과물은 콜백함수를 통해 사용이 가능하다. 이를 통해 비동기 처리가 끝난 후에 해야 할 작업에 대해 순서를 보장해줄 수 있다.
하지만 이것도 순서대로 처리해야 할 작업이 많아지면 가독성이 떨어지고, 코드 복잡성이 증가하여 디버깅 또한 어려워지는 문제가 발생한다. 이런 문제점을 개선하여 나온 것이 promise와 async/await이다.
Promise
비동기 처리를 간편하게 처리할 수 있도록 도와주는 객체
promise는 정해진 기능을 수행한 후, 성공 메세지와 함께 결과값을 전달하고 문제가 있다면 에러를 전달한다.
async, await
async, await
- 비동기 처리 패턴으로 promise를 편하게 사용 가능하게 한다.
async
함수의 앞에 붙어 사용하며 항상 promise를 반환한다.
await
- async 함수 안에서만 사용할 수 있다.
- 함수 안에서 await를 만나면 promise가 처리될때까지 대기한다.
- 콜백함수 처리 없이 비동기 처리가 가능하다.
Axios vs Fetch
결론 부터 말하자면 간단한 작업에는
Fetch, 확장성을 생각한다면Axios를 택할 수 있다.
Axios
- node.js와 브라우저를 위한 Promise 기반 HTTP 통신 라이브러리
Fetch
- 서버로 요청을 보내고 응답을 받을 수 있도록 해주는 메서드
둘을 비교하는 리뷰는 차고 넘치므로 간단히 axios만 지원하는 기능을 정리했다.
- HTTP 요청을 가로챌 수 있음
- download 진행에 대해 기본적인 지원을 함
- 크로스 브라우징으로 브라우저 호환성이 뛰어나다.
Axios 단축 메서드
GET
데이터를 요청한다.
axios.get(url[, config])
POST
데이터를 Message Body에 포함시켜 전송한다.
axios.post(url[, config])
DELETE
데이터베이스에 저장된 내용을 삭제한다.
axios.delete(url[, config])
PUT
데이터베이스에 저장된 내용을 갱신한다.
axios.put(url[, config])
