자바스크립트 30 중 AJAX type ahead가 있었다.
이 외에도 종종 AJAX라는 말을 접할 때가 있었는데,이게 무엇인지 정확히 모르고 있었고 찾아봐도 단순한 정의만으로는 이해하기가 어려웠다.
앞으로 지하철로 이동하는 시간 등등 자투리 시간동안 새로 나온 기술이나 개발 트렌드, 몰랐던 개념에 대해 간단하게 나마 알아보고 틈틈히 정리하고 싶어서,그 첫 주제를 AJAX로 정했다.
🕹 AJAX란?
Asynchronous
Javascript
And
XML비동기적으로 서버에 데이터를 주고받는 자바스크립트 기술을 말한다.
서버
서버는 요청하는 곳에 데이터를 전달하는 역할을 한다.
비동기적으로 데이터를 주고 받는다?
모든 웹페이지의 데이터는 서버에 요청해서 받아온다.
이 때 일반적으로 새로고침이 발생하게 된다.
//예시
<form action="urlhere.com" method="get">
<button type="submit">새로고침 없이 부드러운 화면전환 및 데이터 표시를 위해서 Ajax를 사용한다.
즉, 새로고침없이 서버에 GET요청을 하는 자바스크립트 코드가 AJAX라고 볼수있다.
🕹 AJAX를 구현하는 방법
fetch
대표적인 aJAX가 바로 fetch를 사용한 구문이다.
//예시
fetch('https://urlhere.com')
.then(() => {
이전부터 사용은 했지만 이게 AJAX인지 AJAX가 뭔지 잘 몰랐는데 이제야 이해가된다.
axios
다른방법으로는 외부라이브러리인 axios를 사용하는것이다.
axios.get을 fetch대신 사용해주면된다.
//예시
axios.get('https://urlhere.com')
.then((result) => {
.catch(()=> {
fetch가 훨씬 간단해보이는데 종종 axios를 사용하는 분들의 글이 보였어서, axios의 장점은 무엇인지도 알아봐야겠다.
Reference
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.