[JS] 프론트에서 서버로 데이터를 전달하는 방법

오늘은 프론트측에서 서버측으로 데이터를 전달하는 방법에 대해서 알아본것을 정리해보려고 합니다.

 

비동기 통신 개요

웹 애플리케이션에서 클라이언트(브라우저)가 서버로 데이터를 요청하는 방식에는 동기(Synchronous)와 비동기(Asynchronous)가 있습니다. 기본적으로 웹 페이지는 동기 방식으로 동작하지만, 서버로부터 데이터를 받아오는 동안 페이지가 멈추는 문제를 해결하기 위해 비동기 방식이 사용됩니다.

비동기 방식은 다음과 같은 사례에서 활용됩니다

• 검색 자동완성 기능
• 무한 스크롤
• 댓글 작성 후 즉시 반영
• 실시간 알림 시스템

주요 비동기 통신 방식

1. AJAX (Asynchronous JavaScript and XML)

AJAX는 비동기 통신을 가능하게 하는 대표적인 기술로, 원래 XML을 기반으로 데이터를 주고받았지만, 현재는 JSON을 주로 사용합니다.

장점

• 비동기 방식으로 데이터를 가져와 페이지가 멈추지 않음
• 특정 부분만 갱신할 수 있어 전체 페이지를 다시 로드할 필요 없음
• 다양한 HTTP 요청 방식(GET, POST, PUT, DELETE 등) 지원

단점

• XML 데이터 형식이 비효율적(현재는 JSON 사용으로 개선됨)
• 코드가 다소 복잡하고 가독성이 떨어질 수 있음
• 콜백 함수 중첩(Callback Hell)로 인해 유지보수가 어려움

사용 예시 (XMLHttpRequest 객체 활용)

const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true); // 비동기 요청 설정
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText)); // JSON 데이터를 파싱해서 출력
  }
};
xhr.send();

---

2. Fetch API

Fetch API는 최신 비동기 통신 방식으로, Promise를 기반으로 설계되어 콜백 지옥을 방지합니다.

장점

• 코드가 간결하고 가독성이 높음
• JSON 데이터 처리가 간편함
• Promise 기반으로 then()과 catch() 사용 가능
• 최신 브라우저에서 기본적으로 지원됨

단점

• 네트워크 오류 발생 시 자동으로 실패 처리되지 않음 (응답 코드가 404/500이어도 catch에서 감지되지 않음)
• 일부 구형 브라우저(IE)에서는 지원되지 않음

 fetch()의 동작 과정

1. fetch() 호출 → Promise<Response> 반환 (즉시 실행, 네트워크 요청이 완료될 때까지 pending)
2. 요청 성공 시 → Promise가 Response 객체를 resolve
3. 요청 실패 시 → Promise가 reject (예: 네트워크 장애)

3. fetch()가 반환하는 Promise를 처리하는 방법

fetch() 자체는 Promise<Response>를 반환하므로, 두 가지 방법으로 처리할 수 있습니다.

방법 1: .then()을 사용

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    console.log(response); // Response 객체
    return response.json(); // JSON 변환 (또 다른 Promise 반환)
  })
  .then(data => console.log(data)) // JSON 데이터 출력
  .catch(error => console.error("에러 발생:", error));

방법 2: await을 사용

 

async function fetchData() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json(); // Response 객체에서 JSON 변환
    console.log(data);
  } catch (error) {
    console.error("데이터 로드 실패:", error);
  }
}

fetchData();

 

await fetch()를 사용하면 .then() 없이 동기적인 코드처럼 작성할 수 있어 가독성이 좋아집니다.

3. Promise

Promise는 비동기 작업을 처리하는 객체로, 비동기 요청을 더 체계적으로 다룰 수 있도록 합니다.

장점

• 가독성이 좋고 유지보수성이 높음
• 여러 개의 비동기 요청을 쉽게 체인으로 연결 가능
• resolve, reject을 활용하여 명확한 에러 핸들링 가능

단점

• 기본적으로 AJAX나 Fetch와 같은 HTTP 요청 기능을 제공하지 않음 (비동기 작업을 관리하는 개념)

사용 예시

const getData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: "Sim", age: 99 };
      resolve(data);
    }, 2000);
  });
};

getData().then(result => console.log(result)).catch(error => console.error(error));

---

4. Axios

Axios는 Fetch API보다 강력한 기능을 제공하는 비동기 HTTP 클라이언트 라이브러리입니다.

장점

• JSON 데이터 자동 변환
• 요청과 응답을 쉽게 인터셉트(intercept) 가능
• 기본적으로 HTTP 요청을 취소할 수 있는 기능 제공
• 응답 상태 코드에 따라 오류 처리가 가능

단점

• Fetch보다 파일 크기가 크고 추가적인 라이브러리 설치 필요
• 브라우저 기본 제공 기능이 아니므로 설치 필요 (npm, CDN 등 활용)

사용 예시

axios.get("https://jsonplaceholder.typicode.com/posts")
  .then(response => console.log(response.data))
  .catch(error => console.error("Error fetching data:", error));

---

비교 요약

방식장점단점

AJAX	다양한 HTTP 요청 지원, 특정 부분만 갱신 가능	코드 복잡, 콜백 지옥 발생 가능
Fetch API	코드 간결, Promise 기반으로 체인 구성 가능	오류 처리 직접 해야 함, IE 미지원
Promise	가독성 좋고 유지보수 용이	단독으로 HTTP 요청 불가능
Axios	JSON 자동 변환, 요청 인터셉트 기능 제공	추가 라이브러리 설치 필요

---

결론 및 선택 기준

• AJAX: 레거시 시스템과 호환이 필요하거나 기존 코드가 많을 때
• Fetch API: 최신 브라우저를 대상으로 하고 간결한 코드가 필요할 때
• Promise: 비동기 로직을 관리해야 하지만 HTTP 요청이 아닌 다른 비동기 작업에도 적용할 때
• Axios: HTTP 요청을 다루는 기능이 많고, JSON 변환 및 에러 처리를 자동화하고 싶을 때

프로젝트에 맞는 비동기 통신 방식을 선택하여 적용하는 것이 중요합니다!