API Handling: Fetch, CRUD, Auth, AbortController
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

API 처리 기술: Fetch, CRUD, 인증, AbortController

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, 특히 React 애플리케이션 개발에 관심 있는 중급자 이상

핵심 요약

  • HTTP 메서드(GET, POST, PUT, PATCH, DELETE)를 통해 API 요청을 구분하고 데이터를 조작
  • Async/await 방식이 비동기 데이터 처리에 추천되며, fetchscrib.show를 활용한 예제 제공
  • 인증(Authentication)은 사용자 인증, 인가(Authorization)은 Bearer Token을 통해 권한 검증
  • AbortController로 중복 요청 취소 가능, signal 옵션을 통해 요청 중단 처리

섹션별 세부 요약

1. HTTP 메서드

  • GET: 서버에서 데이터 불러오기
  • POST: 새로운 리소스 생성(예: 제품 추가)
  • PUT: 기존 리소스 전체 업데이트
  • PATCH: 기존 리소스 부분 업데이트
  • DELETE: 리소스 삭제

2. 데이터 fetching 기법

  • Promises: .then()을 사용한 비동기 처리
  • Async/await: 코드 가독성 향상, 추천 방식
  • const fetchData = async () => {
      const result = await fetch('https://api.example.com/data');
      const data = await result.json();
      return data;
    }

3. Query Params 및 필터링

  • ?key=value 형식으로 URL에 파라미터 추가
  • 예: /products?limit=10&skip=5 (10개 데이터 불러오기, 5개 건너뛰기)
  • sort 파라미터로 오름차순/내림차순 정렬 가능

4. 인증 및 인가

  • 인증: 사용자 정보(예: username, password)를 POST로 전송
  • fetch('https://api.example.com/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username: 'emilys', password: 'emilyspass' })
    })
  • 인가: Bearer Token을 Authorization 헤더에 포함
  • fetch('https://api.example.com/data', {
      headers: { 'Authorization': 'Bearer YOUR_ACCESS_TOKEN' }
    })

5. CRUD 연산

  • 추가(POST): body에 새 데이터 포함
  • 수정(PUT/PATCH): PUT은 전체 업데이트, PATCH는 부분 수정
  • 삭제(DELETE): 특정 ID의 리소스 삭제

6. AbortController 사용 예제

  • 두 요청 중 하나를 중단하여 병렬 처리 제어
  • const controller1 = new AbortController();
    fetch('https://api.example.com/data', { signal: controller1.signal })
    setTimeout(() => controller1.abort(), 100); // 100ms 후 요청 중단

결론

  • Async/await 방식이 코드 가독성 향상에 유리하며, AbortController는 요청 중단 시 유용
  • Dummy JSON API(https://dummyjson.com/) 활용해 실습 가능
  • scrib.showconsole.log 대체로 사용 가능, 실제 프로젝트에 적용 시 fetchAbortController를 사용해야 함