ajax란?
Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml) 의 약자.
- JavaScript의 라이브러리 중 하나.
- Javascript를 사용한 비동기 통신.
- 클라이언트와 서버간의 XML 데이터(브라우저가 가지고 있는 XMLHttpRequest 객체)를 주고받는 것.
한 마디로, 클라이언트에서 서버로 데이터를 요청하고 그에 대한 결과를 돌려받을 수 있는 것.
장점
여러 기술들들 AJAX 모델을 통해 결합하면
- 웹 응용 프로그램을 빠르게 만들 수 있다.
- 전체 웹 페이지를 다시 불러 오지 않은 채로 부분적으로 사용자 interface 와 페이지 내용을 갱신할 수 있다.
- 사용자가 취하는 동작이나 요구. 검색어 입력, 지도 스크롤, 새로운 위치 선택 등에 더 잘 응답하는 응용 프로그램을 만들 수 있다.
사용자 interface가 궁금하다면?
https://cmos00.tistory.com/1975 [cmos00]
비동기(async) 방식이란?
- 웹페이지를 reload하지 않고 data를 불러오는 방식.
- 전체 리소스를 다시 불러오는 reload를 하지 않고 필요한 부분만 불러와 사용하기 때문에 리소스를 낭비하지 않는다는 것이 큰 장점
AJAX를 사용 가능하게 만드는 것들
- HTML
- DOM
- JavaScript
- XMLHttpRequest
- ect
Axios
Axios란?
- node.js와 브라우저를 위한 http통신 javascript라이브러리
특징
- 브라우저에서는 XMLHttpRequest 들을, node.js에서는 http요청 생성
- Promise API 지원
- 요청과 응답을 중간
- JSON 데이터 자동 변환
- 요청 취소
- XSRF로부터 보호하기 위한 클라이언트 측 지원
get, then? async, await?
fetch 처럼 method가 get인지 post인지를 쓰면서 then을 써도 된다.
그리고, 쓰지 않아도 된다.
fetch를 쓰다가 axios를 와서 익숙한 fetch처럼 method와 then을 써도 되지만 async, await를 추천한다.
그렇다면 왜 async/await가 더 나을까?
-
간결함과 깔끔함
코드량이 확 줄어든다. then을 추가할 필요도, response를 해결하기 위한 비동기 함수도, data라는 이름의 변수 선언도, 코드의 nesting도 피할 수 있다.(Promise.all을 통해) -
error handling
async/await 는 동기와 비동기 에러 모두를 try/catch를 통해서 처리할 수 있게 한다. try/catch는 오래되었지만 좋은 접근 방식이다. -
디버깅이 쉬워진다.
promise를 디버깅 할 때 2가지 면에서 힘든데
첫 째로, return 되는 arrow function들에 breakpoint를 잡을 수 없고
둘 째로, then 블록 안에 breakpoint를 잡고 step-over 와 같은 debug shortcuts를 사용하게 되면 디버거는 then을 따라 움직이지 않는다. 디버그 도구는 동기화된 코드를 따라서만 움직이기 때문이다.
async/await를 사용하면 arrow function을 많이 사용할 필요가 없고, 디버그도구는 동기화된 코드를 실행하는 것과 다름없이 동작할 것이다.
나도 이제 사용하기 위해 갓 공부를 시작했으니 다음에 실제로 사용한 뒤 코드와 사용법을 들고 오겠다.
공부한 페이지들 중에 여러분이 참조하면 좋을 것 같아서 첨부한다.
클릭클릭
이걸 읽으러 들어온 모두 오늘도 화이팅!
