JavaScript로 API 데이터 받아오는 방법

JavaScript에서 API를 통해 데이터를 가져오는 방법은 크게 3가지로 나눌 수 있다

1. Fetch API (가장 기본적인 방법)
2. Axios (라이브러리 활용)
3. Async/Await (비동기 처리 가독성 개선)

---

 

1️⃣ Fetch API 사용 (기본적인 방법)

fetch()는 JavaScript에서 가장 기본적으로 API 요청을 보내는 방법입니다.

📌 예제: JSONPlaceholder에서 데이터 가져오기

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())  // JSON 형식으로 변환
  .then(data => console.log(data))  // 데이터 출력
  .catch(error => console.error("Error:", error)); // 오류 처리

✅ 설명

• fetch(url) → API 요청을 보냄
• response.json() → 응답을 JSON 형식으로 변환
• .then(data => console.log(data)) → 변환된 데이터를 출력

🛑 단점

• then() 체인이 길어지면 가독성이 떨어질 수 있음

 

2️⃣ Async/Await 사용 (가독성 개선)

async/await을 사용하면 코드가 깔끔해지고 가독성이 좋아집니다.

📌 예제: 비동기 함수로 API 요청하기

async function fetchData() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

fetchData();

✅ 설명

• async function fetchData() → 비동기 함수 선언
• await fetch(url) → API 응답을 기다림
• await response.json() → JSON 변환도 기다림
• try...catch → 오류 발생 시 예외 처리

🛑 단점

• fetch()는 기본적으로 오류가 발생해도 HTTP 상태 코드(404, 500 등)를 자동으로 감지하지 않음
• response.ok를 사용해 수동으로 체크해야 함

✔ 예제: HTTP 상태 코드 확인 추가

async function fetchData() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    if (!response.ok) throw new Error("서버 오류 발생!");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error.message);
  }
}

fetchData();

 

 

 

3️⃣ Axios 라이브러리 사용 (더 간단한 방법)

Axios는 Fetch API보다 더 간결한 코드와 자동 에러 핸들링을 제공하는 라이브러리입니다.
→ 사용하려면 CDN 포함 또는 npm install axios로 설치해야 합니다.

📌 예제: Axios 사용

import axios from "axios";

async function fetchData() {
  try {
    const response = await axios.get("https://jsonplaceholder.typicode.com/posts/1");
    console.log(response.data);
  } catch (error) {
    console.error("Error:", error);
  }
}

fetchData();

✅ 장점

• response.data를 바로 사용할 수 있음 (JSON 변환 필요 없음)
• HTTP 오류(404, 500 등)를 자동으로 감지하고 처리
• POST, PUT, DELETE 요청도 쉽게 가능

✔ 예제: POST 요청 보내기

async function postData() {
  try {
    const response = await axios.post("https://jsonplaceholder.typicode.com/posts", {
      title: "새로운 게시글",
      body: "이것은 내용입니다.",
      userId: 1
    });
    console.log("생성된 데이터:", response.data);
  } catch (error) {
    console.error("Error:", error);
  }
}

postData();

 

 

 

🎯 정리: 언제 어떤 방법을 사용할까?

방법	특징	장점	단점
Fetch API	기본 API 요청	브라우저 내장 기능, 추가 설치 불필요	에러 처리가 번거로움
Async/Await	Fetch API 개선	코드 가독성이 높아짐	fetch()의 기본적인 한계는 여전함
Axios	외부 라이브러리 사용	코드가 간결하고 기능이 강력함	라이브러리 설치 필요

🔥 빠르게 API 요청할 땐 → Fetch API
🔥 가독성이 좋은 코드가 필요할 땐 → Async/Await
🔥 강력한 기능 + 간결한 코드가 필요할 땐 → Axios

💡 실제 프로젝트에서는 보통 Axios를 사용하지만, 라이브러리 추가 없이 기본 기능을 원한다면 fetch()를 사용.