끄적끄적 개발 블로그입니다.

2 분 소요

AJAX(Asychronous JavaScript and XML)Permalink

웹 페이지에서 데이터를 주고 받는 방법 중 하나이다. AJAX는 웹페이지를 새로 고침하지 않아도 서버와 데이터를 주고받을 수 있게 해준다.

AJAX의 기본 개념Permalink

  1. 비동기 서버 통신이다.

    웹 페이지가 서버에 요청을 보내고 응답을 받을 때까지 기다리지 않고, 다른 작업을 계속할 수 있다는 것

    ➡️ 순차적이지 않은 병렬적인 방식으로 실행을 하는 것이다.

  2. 전체 페이지를 다시 로드하지 않고도 필요한 부분만 업데이트 할 수 있다.

    예를 들면 댓글을 작성할 때, 전체 페이지를 새로고침하지 않고 댓글 부분만 업데이트 할 수 있다.

  3. 서버와 데이터를 주고 받을 때 XML, JSON, HTML 등을 사용할 수 있다.

    예전엔 XML이 많이 사용되었지만, JSON이 요즘엔 많이 사용된다.

AJAX의 동작 원리Permalink

자바스크립트를 사용해 서버에 요청을 보내고, 서버에서 응답을 받아 그 데이터를 웹 페이지의 특정 부분에 표시하는 방식으로 동작한다.

  1. 사용자가 페이지에서 어떠한 동작을함

    사용자가 댓글을 작성하고 확인 버튼을 누름

  2. 브라우저가 자바스크립트를 사용해 서버에 요청을 보냄

    자바스크립트가 사용자가 입력한 댓글을 서버로 전송

  3. 서버가 요청을 처리하고 데이터를 응답함

    서버가 댓글을 데이터베이스에 저장하고, 성공적으로 저장되었다는 응답을 보냄

  4. 자바스크립트가 서버의 응답을 받아 웹 페이지의 특정 부분을 업데이트한다.

    새로운 댓글을 웹 페이지 댓글 목록에 추가함

AJAX의 장점Permalink

  • 빠른 응답

    서버에서 필요한 데이터만 주고 받기 때문에 전체 페이지를 새로고침하는 것보다 훨씬 빠르게 응답 가능

  • 사용자 경험 향상

    페이지의 일부분만 업데이트하기 때문에 사용자는 웹 애플리케이션을 더 부드럽고 빠르게 느낄 수 있다.

  • 대역폭 절약

    필요한 데이터만 주고받기 때문에 네트워크 자원을 절약할 수 있다.

AJAX의 단점Permalink

  • 복잡성 증가

    전통적인 요청-응답 방식보다 더 많은 코드가 필요하고, 관리하기가 복잡하다.

  • 브라우저 호환성

    예전에는 모든 브라우저가 AJAX를 지원하지 않았지만 지금은 대부분 브라우저가 지원한다.

  • 보안 이슈

    서버와의 통신이 많아지면, 보안에 더 신경써야 한다.

AxiosPermalink

JavaScript로 작성된 HTTP 클라이언트 라이브러리이다. 웹 브라우저에서 서버와 데이터를 주고받을 수 있도록 도와주는 도구이다. Axios는 특히 Promise 기반으로 동작하며, 비동기적 요청을 간편하게 처리해준다.

Axios의 주요 기능Permalink

  1. HTTP 요청을 쉽게 보낼 수 있다.

    GET, POST, PUT, DELETE 등의 HTTP 요청을 쉽게 작성할 수 있다.

  2. 응답 데이터를 자동으로 JSON 형태로 파싱해준다.

    서버에서 JSON으로 데이터를 받으면, 자동으로 JavaScript 객체로 변환해준다.

  3. 브라우저 호환성

    Axios는 오래된 브라우저도 잘 지원한다.

  4. Promise 기반

    비동기 코드를 더 간결하게 작성할 수 있게 해준다.

    async/await와 함께 쓰면 더 편리하다.

  5. 인터셉터

    요청이나 응답 전에 작업을 가로채고 처리할 수 있는 기능을 제공한다.

Request Method 종류Permalink

  • GET : axios.get(url[,config])
  • POST: axios.post(url, data[, config])
  • PUT: axios.put(url, data[, config])
  • DELETE: axios.delete(url[,config])

기본 사용법Permalink

기본 예제

import axios from 'axios';

function fetchData(){
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('에러', error);
    });
}
fetchData();

이 예제는 서버에 간단한 GET 요청을 보내서 데이터를 받아오고, 그 데이터를 화면에 출력하는 예제이다. 코드를 실행하면, https://jsonplaceholder.typicode.com/post/1라는 주소로 GET 요청을 보내고, 그 결과를 콘솔에 출력하게된다.

Axios 이해하기 : 음식 배달 서비스Permalink

Axios를 음식 배달 서비스에 비유해보겠다.

  • Axios 라이브러리

    배달앱이라고 생각하면된다. 이 앱을 통해 우리가 음식을 주문(요청)하고 음식(데이터)를 받아볼 수 있다.

  • HTTP 요청

    배달 앱에서 음식을 주문하는 것과 같다. 우리는 음식점(서버)에게 특정 음식을 요청(GET)하거나 우리의 취향대로 주문(POST)할 수 있다.

  • Promise

    음식점에서 배달 음식이 오기를 기다리는 것이다. 음식이 준비되면, 배달원이 음식을 가져다 주는데(Promise 이행) 만약 주문이 잘못 되었다면 배달원이 음식을 잘못 가져다주는 것 처럼 오류가 발생할 수 있다.(Promise 거부)

  • 인터셉터

    배달 도중에 앱에서 상태를 확인하는 것이다. 음식이 잘 오고 있는지, 문제가 없는지 확인하고 처리한다.

업데이트:

댓글남기기

참고