Fetch와 Ajax, axios 이해하기

저는 오늘 서버와 통신하는 방법들 중 몇가지를 소개하겠습니다 제가 오늘 소개하는 방법들은 모두 비동기 통신 방법입니다 일단 알아두면 좋은 지식이니 먼저 비동기와 그 반대인 동기가 무엇인지 먼저 살펴보겠습니다!

그림을 보면 동기 처리의 예시는 주문을 하고 음료를 받는 것까지 한명이 모두 끝날 때까지 기다려야 하지만 동기는 진동벨을 받고 여러 사람을 동시에 처리할 수 있습니다 요약하자면 동기는 순차적으로 작업을 수행하고 해당 작업이 수행중이라다음 작업은 대기하여야 합니다 반면에 비동기식은 요청이 들어오면 해당 작업이 끝나지 않았더라도 계속 요청을 받습니다

Fetch

• JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드입니다
• 기본 응답 결과를 따로 json으로 바꾸거나 text로 바꾸는 별도의 처리가 요구 되는 번거로움이 있습니다
• 내장되어 있으므로 별로도 import 해주지 않아도 됩니다
• 네트워크 에러 발생 시 계속 기다려야 합니다
• 구형 브라우저에서는 지원 하지 않습니다
• API 요청을 취소할 수 없습니다
• XMLHttpRequest와 비슷하지만 Fetch는 Promise를 기반으로 구성되어 있어 더 간편하다는 차이점이자 장점이 있습니다
  • XMLHttpRequest란 웹 브라우저에서 서버와 비동기적으로 데이터를 주고받기 위해 사용되는 객체입니다
  • Ajax의 가장 핵심적인 구성요소 입니다
  • XMLHttpRequest객체를 이용하여 전체 페이지가 아닌 필요한 데이터만 불러오는 것이 가능합니다.

여기서 잠깐 일단 Promise란 무엇인지 간단하게 설명드리겠습니다

비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기로 다음 중 하나의 상태를 가집니다

• 대기(pending): 이행하지도, 거부하지도 않은 초기 상태
• 이행(fulfilled): 연산이 성공적으로 완료됨
• 거부(rejected): 연산이 실패함

Promise 연결

then

• 목적: Promise가 성공적으로 해결되었을 때 실행할 콜백 함수를 지정합니다
• 용도: 비동기 작업이 완료된 후 처리할 작업을 정의합니다
• 설명: then 메서드는 Promise 객체가 해결되면(즉, 성공적으로 결과를 반환하면) 해당 콜백을 실행합니다 then은 새로운 Promise를 반환하므로 체이닝을 통해 여러 비동기 작업을 순차적으로 처리할 수 있습니다

try

• 목적: 예외가 발생할 수 있는 코드를 실행하기 위해 사용됩니다
• 용도: 예외가 발생할 가능성이 있는 코드를 try 블록 안에 작성합니다
• 설명: 코드 블록 내에서 예외가 발생하면, 즉시 실행이 중단되고 catch 블록으로 제어가 이동합니다

catch

• 목적: try 블록에서 발생한 예외를 처리하기 위해 사용됩니다
• 용도: 예외 발생 시 이를 잡아서 적절한 처리를 수행하는 코드 블록입니다
• 설명: try 블록에서 예외가 발생하면 해당 예외를 처리하기 위한 catch 블록이 실행됩니다 여러 개의 catch 블록을 사용할 수도 있으며 각 catch 블록은 특정 예외 타입을 처리할 수 있습니다

finally

• 목적: 예외 발생 여부와 상관없이 항상 실행되어야 하는 코드를 작성하기 위해 사용됩니다
• 용도: 예외가 발생하든 발생하지 않든 실행되어야 하는 정리 작업을 수행하는 코드 블록입니다
• 설명: finally 블록은 try와 catch 블록의 실행 결과에 관계없이 항상 실행됩니다 주로 자원 정리나 파일 닫기, 데이터베이스 연결 종료 등과 같은 작업에 사용됩니다

사용법

일단 Fetch는 두개의 인자를 필요시 합니다

1. URL (필수): 요청할 URL을 입력해줍니다
2. 선택 매개변수 ex) method, headers, body 등등

코드 예시

fetch (URL, 
    method: 'POST', // HTTP 메서드 (GET, POST, PUT, DELETE 등)
    header: {
        'Content-Type': 'application/json', // 요청 헤더
        },
    body: JSON.stringify(), // 요청 본문 (POST, PUT 등에 사용)
    credentials: 'include' // 자격 증명 포함 여부
    })
       .then(response => {
    if (!response.ok) {
      throw new Error('오류!!');
    }
    return response.json();
  })
  .then(data => {
    console.log(data); // 서버로부터 받은 데이터를 처리합니다.
  })
  .catch(error => {
    console.error(error);
  });

axios

• 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. (Promise 기반)
• 크로스 브라우징 기반( 다양한 웹브라우저에서 깨지지 않게 보이는 웹페이지 제작 기술을 얘기하는 것)
  으로 브라우저 호환성이 뛰어납니다
• fetch에 존재하지 않는 기능이 많습니다. (자동으로 JSON 데이터 형식으로 변환, 요청 취소 및 타임아웃 설정 가능 등..)
• 따로 라이브러리를 설치 해야합니다

사용법

/* axios 라이브러리 설치 */

// npm 사용
npm i axios

// yarn 사용
yarn add axios

대표 메서드들

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

코드 예시

axios.post(URL)
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

Ajax

• 자바스크립트를 사용한 비동기 통신, 클라이언트와 서버 간 데이터를 주고받는 기술입니다
• 전체 웹페이지를 다시 불러오는 동기 방식과는 다르게 점진적으로 해당 부분의 사용자 인터페이스를 갱신할 수 있습니다
• XMLHttpRequest객체를 이용하여 전체 페이지가 아닌 필요한 데이터만 불러오는 것이 가능합니다
• XMLHttpRequest가 사용되다가 불편함과 호환성을 이유로 jQuery 내에서 Ajax를 사용하는 것이 대세가 되었습니다
  • jQuery는 자바스크립트를 간결하고 효율적으로 사용할 수 있게 해주는 라이브러리로, DOM 조작과 이벤트 처리 등을 쉽게 구현할 수 있습니다.

🎯 정리

간단한 HTTP 요청 처리, Vanilla JS로 통신, react-native에서는 Fetch가 좋다고 합니다 왜냐하면 빠른 업데이트 때문입니다 그리고 좀 더 많은 기능과 장점, 사용자 편의가 필요할 때 또는 react 환경에서는 axios가 훨씬 편리하다고 합니다 이 방법들을 확실히 숙지하여 적절히 잘 사용하셨으면 좋겠습니다