API 처리 기술: Fetch, CRUD, 인증, AbortController
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자, 특히 React 애플리케이션 개발에 관심 있는 중급자 이상
핵심 요약
- HTTP 메서드(GET, POST, PUT, PATCH, DELETE)를 통해 API 요청을 구분하고 데이터를 조작
- Async/await 방식이 비동기 데이터 처리에 추천되며,
fetch
와scrib.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' })
})
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.show
는console.log
대체로 사용 가능, 실제 프로젝트에 적용 시fetch
와AbortController
를 사용해야 함