2nd/01_Archive/2026-04-20/08_React-API_Communication-Patterns.md

📡 [LEVEL 8] API 통신의 품격: 서버와 대화하는 법

1. Axios Interceptor: 공항 입입국 심사

• 매번 API 쏠 때마다 토큰 넣고 에러 처리할 건가?
• interceptor를 써서 모든 요청에 자동으로 인증 토큰을 붙이고, 에러 응답은 한 곳에서 처리하라.

2. HTTP 에러 핸들링 (401, 404, 500)

• 401(미인증)이 뜨면 자동으로 로그인 페이지로 보내거나 토큰을 갱신하라.
• 사용자는 하얀 화면이 아니라 "잠시 후 다시 시도해 주세요"라는 친절한 메시지를 원한다.

3. API 추상화 (Service Layer)

• 컴포넌트 안에 axios.get('/api/users') 를 직접 쓰지 마라.
• userService.js 파일을 따로 만들어 함수화하라.
• 이점: API 주소가 바뀌어도 파일 하나만 고치면 된다.