[ Fetch와 Axios 기초 강좌 ①] API 요청과 Fetch의 기본 이해

API 요청이란?

웹 애플리케이션에서 API 요청이란, 브라우저(프론트엔드)가 서버(백엔드)에게 데이터를 요청하거나 전달하는 행위입니다.
예를 들어, 게시글 목록을 가져오거나 로그인 정보를 전송하는 것 모두 API 요청입니다.
API 요청은 **HTTP 통신 방식(GET, POST, PUT, DELETE 등)**을 따릅니다.

Fetch API란?

Fetch API는 자바스크립트에서 서버와 통신할 수 있도록 제공되는 내장 기능입니다.
즉, 별도 라이브러리 설치 없이 fetch() 함수를 통해 바로 사용할 수 있습니다.
주로 데이터 조회(GET), 데이터 등록(POST) 등에서 사용됩니다.

사용 구조

fetch("요청할_주소", {
  method: "HTTP 메서드",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(전송할_데이터) // GET 요청에는 body 없음
})
  .then(응답 => 응답.json())
  .then(결과 => {
    // 처리할 작업
  });

실전 예시

예제 1: 게시글 목록 가져오기 (GET 요청)

// 예제: 게시글 목록을 가져오는 GET 요청
fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(data => {
    console.log("받은 데이터:", data);
  });

예제 2: 새 글 등록하기 (POST 요청)

// 예제: 새 글을 서버에 등록하는 POST 요청
fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    title: "새 글 제목",
    body: "글 내용입니다",
    userId: 1
  })
})
  .then(response => response.json())
  .then(result => {
    console.log("작성 결과:", result);
  });

용어 설명

method

서버에 어떤 동작을 요청할지 정하는 HTTP 방식
예: "GET" (조회), "POST" (등록), "PUT" (수정), "DELETE" (삭제)

headers

요청에 대한 부가 정보
예: "Content-Type": "application/json" → 전송 데이터가 JSON 형식임을 알림

body

서버로 보내는 실제 데이터 내용 (GET 요청에서는 사용하지 않음)

단계 요약

• API 요청은 서버에 데이터를 주고받는 것
• Fetch API는 자바스크립트 내장 함수로 API 요청 가능
• .then()을 통해 비동기 응답 처리
• POST 요청 시 headers와 body를 함께 설정해야 함

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.