[ Fetch와 Axios 기초 강좌 ] 구성안

다음은 Fetch와 Axios 기초 강좌를 위한 회차 구성 및 각 회차별 티스토리용 강의안입니다. 초보자 기준으로 개념부터 코드 실습까지 자연스럽게 익힐 수 있도록 설계했습니다.

Fetch와 Axios 기초 강좌 구성안

전체 구성 개요

총 4회차
Fetch API → Axios 기초 → 공통점과 차이점 → 실전 비교 및 axiosInstance 구성까지 단계별 구성

1강: API 요청의 기본 개념과 Fetch 소개

용어 설명

API

Application Programming Interface. 다른 프로그램과 통신하기 위한 약속. 예: 서버에 데이터 요청, 저장, 삭제 등을 수행.

Fetch API

브라우저 내장 함수. fetch()를 사용해 서버에 HTTP 요청을 보낼 수 있음.

핵심 개념

• HTTP 요청이란 클라이언트가 서버에 데이터를 보내거나 받아오는 행위
• Fetch는 JavaScript 표준으로써 별도 설치 없이 사용 가능

코드 예시

// GET 방식 예시
fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(data => console.log("데이터:", data));

// POST 방식 예시
fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    title: "새 글",
    body: "내용입니다",
    userId: 1
  })
})
  .then(res => res.json())
  .then(data => console.log("작성 결과:", data));

단계 요약

• API란 무엇인가
• Fetch API로 GET/POST 요청하는 법
• .then() 체인 구조 이해

 

2강: Axios란? 설치부터 사용까지

용어 설명

Axios

Promise 기반의 HTTP 클라이언트 라이브러리. 브라우저 및 Node.js 환경에서 사용 가능.

설치

npm이나 CDN으로 설치 후 사용 가능

설치 및 기본 사용 예시

npm install axios

// GET 요청
import axios from "axios";

axios.get("https://jsonplaceholder.typicode.com/posts")
  .then(res => console.log("데이터:", res.data));

// POST 요청
axios.post("https://jsonplaceholder.typicode.com/posts", {
  title: "제목",
  body: "내용",
  userId: 1
}).then(res => console.log("결과:", res.data));

단계 요약

• Axios란 무엇인가
• 설치 방법과 import 방식
• GET, POST 요청 기본 구조

 

3강: Fetch vs Axios 기능 비교

비교 항목

항목 Fetch Axios

기본 내장	브라우저 내장	외부 라이브러리 설치 필요
응답 처리	res.json() 필요	자동 JSON 파싱
에러 처리	복잡한 구조	간단한 .catch() 처리
요청 취소	복잡한 AbortController 필요	CancelToken 지원
인터셉터	미지원	요청/응답 인터셉터 지원

코드 비교 예시

// Fetch 에러 처리
fetch("url")
  .then(res => {
    if (!res.ok) throw new Error("에러 발생");
    return res.json();
  })
  .catch(err => console.error(err));

// Axios 에러 처리
axios.get("url")
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

단계 요약

• 공통 구조와 차이점 정리
• 실제 코드 비교
• Axios의 장점과 Fetch의 가벼운 장점 구분

 

4강: 실전 Axios 활용과 axiosInstance 설정

핵심 기능

• axios.create()를 사용해 인스턴스를 만들어 재사용
• 공통 baseURL, headers 설정
• 인증 토큰 자동 삽입

코드 예시

// src/services/axiosInstance.js
import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com",
  headers: {
    "Content-Type": "application/json"
  }
});

export default axiosInstance;

// 사용 예시
import axiosInstance from "./services/axiosInstance";

axiosInstance.get("/posts")
  .then(res => console.log(res.data));

단계 요약

• axiosInstance란?
• 공통 설정 구성 방법
• 프로젝트 내 재사용 방법

 

총정리

• Fetch는 브라우저 내장, Axios는 라이브러리
• 실무에서는 Axios + 인스턴스 구성으로 공통 설정을 관리
• 학습 순서는 Fetch → Axios → 비교 → 실전 활용 흐름이 자연스럽고 효율적

 

💬 댓글

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