[React] Day_48 데일리 정리

 

오늘 하루 요약 정리

 

아니 눈떠보니 시간이 다 사라져있는거.. 나만 그런건가요?

아 근데 진짜 사람이 진짜 할일이 너무 많아지면 어디에 손댈지 몰라서 가만히 있는거..

이번에 너무 뼈져리게 느끼는중... 흑흑 ㅠㅡㅠ

오늘은 그래도 과제에 인스턴스 쓸거니까.. 이 친구라도 정리해서 올려볼게요

가보자..go

 

챌린지반 강의정리 - Fetch와 Axios

??? : 안돼, 뒤로 물러서 림졍 ..!

 

으아아아아아아아ㅏ아ㅏㅏㅏ

 

Fetch

브라우저에 내장된 네트워크 요청 전용 함수로 Promise 기반으로 동작

추가 설치 없이 바로 사용할 수 있어서 정말 간편, 벗-뜨 응답 처리에서 조금 신경 써야 할 부분 있움

 

특징

Promise를 반환 → .then, .catch, async/await 활용 가능.

요청 헤더, 메서드, 바디 설정도 쉽게 할 수 있음

응답 데이터 response.json() or response.text()로 변환해줘야 함.

 

응답 처리 흐름

네트워크 요청 성공 시,

HTTP 상태코드(404, 500 상관없이)를 기준으로 resolve 반환

but 네트워크 장애 같은 문제로 요청 자체가 실패하면 reject 됨

∴ 성공해도 response.ok가 false일 수 있으니까 상태 체크 필수!

cf. 요청 성공 ≠ HTTP 응답 성공

 

비동기 스트림

응답 데이터는 한 번에 처리하지 않고, 준비된 만큼 나눠서 처리하는 방식.

메모리도 절약 및 대용량 데이터를 다룰 때 효율적으로 활용 가능

 

Axios

Fetch의 응답 처리 단점을 보완한 HTTP 클라이언트 라이브러리

Promise 기반으로 작동하면서 브라우저와 Node.js 환경에서도 쓸 수 있어.

 

특징

• 자동 HTTP 상태 처리 :Fetch와 달리 HTTP 에러(404, 500)를 자동으로 처리 → .catch로 바로 이동
• 자동 JSON 변환 : 응답 데이터, 추가 처리 없이 바로 사용 가능
• 요청/응답 인터셉터 지원 : 요청이나 응답 전에 데이터를 수정 or 로직을 추가할 수 있음
• CancelToken 지원 : 네트워크 요청을 취소할 수 있는 기능 제공
• 반복 설정 관리 : baseURL, headers 같은 반복적인 설정, 한 번만 정의하면 끝-!

 

Fetch vs Axios

- Fetch 예제

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => {
    if (!response.ok) { 
      throw new Error('HTTP Error');
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.error('Error:', error));

 

- Axios 예제

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then((response) => console.log(response.data)) // 상태 확인 + 데이터 변환 한 방에 끝!
  .catch((error) => console.error('Error:', error));

 

 

AxiosInstance

자주 쓰는 설정(baseURL, headers)을 한 번에 정의해서 반복 작업을 없애는 Axios 커스터마이징 객체

 

필요성

공통 설정 반복 제거 → baseURL, headers 같은 설정 자동화!

유지보수성 향상 → 설정 변경도 쉽고 간단하게!

코드 가독성 개선 → API 호출 로직만 남기고 깔끔하게 관리

 

- 사용법

import axios from 'axios';

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

export default axiosInstance;

 

Interceptor

Axios의 요청(Request)이나 응답(Response)에 로직을 추가하는 기능!

반복 작업을 한 곳에서 처리할 수 있어서 아주 유용

 

Interceptor의 역할

 

- 요청 Interceptor

• 인증 토큰 추가
• 공통 파라미터 설정

- 응답 Interceptor

• 서버 데이터를 클라이언트 포맷으로 변환
• 상태 코드별 에러 처리

 

마무리 - 사람이 디데이가 가까워지면.. 정신을 놓나 봅니다..

 

바로 이렇게 메타버스 보이그룹을 만들어서 노는 것처럼 말이죠..🤷🏻‍♂️

 

분명 라우팅 지대로 한거 같은데...

왜 페이지에선 뜨질 않는 것인가... 🤦🏻‍♂️

발제 노션에서 그냥 그대로 긁어왔는데.. 그게 문제는 아닐테고...

여튼 하닥 멘탈 터져서 베이비들이랑 메타버스 보이그룹만들어서

컨셉도 정하고 공연도 함;;; (놀랍게도 할건 다하고 했습니다. 여튼 그렇다구요.)

하아.. 과제 내일 오후까지 내가 끝내본다 진짜;

해치워짐 당하고 오겠습니다.

그럼.

 

 

 

 

오늘의 KPT 회고

 

Keep: 오늘 그래도 리마인드로 과제 기능 구현 해볼 수 있을..듯?

Problem: 내일 실습이 무서워용 ㅠㅡㅠ

Try: 오늘 일단 밤새서 해볼게요(?)

 

THE_END