[P-Reinforce] Substantial Body Content Added to 15-Level React Mastery Wiki
This commit is contained in:
@@ -5,15 +5,22 @@ tags: [API, Axios, Interceptor, Error Handling, Network]
|
||||
created: 2026-04-20
|
||||
---
|
||||
|
||||
# 효율적인 API 통신 패턴
|
||||
# [[API_Communication_Patterns]] (API 통신 패턴)
|
||||
|
||||
## 📡 인프라 설계
|
||||
- **Service Layer**: API 호출 로직을 컴포넌트와 분리하여 별도 모듈화.
|
||||
- **Interceptors**: 전역 요청 헤더 주입 및 전역 에러 핸들링.
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 서버와의 대화는 항상 '정중하되 의심하며' 처리하라. 모든 요청은 중앙 통제소(Interceptor)를 거치고 모든 에러는 시나리오가 준비되어 있어야 한다.
|
||||
|
||||
## 🚨 에러 대응
|
||||
401(토큰 만료), 500(서버 장애) 등 공통 에러에 대한 중앙 집중형 대응 시나리오 수립.
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
- **Service Layer (서비스 레이어) 추상화**:
|
||||
- 컴포넌트 내에 `axios` 코드를 기생시키지 마라. `userService.js`, `productApi.js` 처럼 API별로 모듈화하여 컴포넌트는 오직 '함수 호출'만 알게 하라.
|
||||
- **Axios Interceptors (심사 통로)**:
|
||||
- 모든 요청에 인증 토큰을 자동으로 붙이거나, 백엔드에서 내려오는 401 에러를 가로채서 자동으로 토큰을 갱신(Silent Refresh)하는 로직을 중앙 집권화한다.
|
||||
- **Error Scenario Planning**:
|
||||
- 400(잘못된 요청), 403(권한 없음), 500(서버 죽음) 등 각 에러 코드별로 사용자가 경험할 UI 처리 방침을 미리 약속하라.
|
||||
|
||||
## 🔗 연결된 지식
|
||||
- [[System_Protocol_Standard]]
|
||||
- [[React_State_Management_Strategy]]
|
||||
## ⚠️ 모순 및 업데이트 (RL Update)
|
||||
- 모든 통신에 Axios가 정답은 아니다. 브라우저 네이티브인 `fetch`로도 충분한 경우가 많으며, 라이브러리 의존성을 낮추는 것이 가벼운 앱을 만드는 첫걸음일 수 있다.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- Related: [[System_Protocol_Standard]] , [[React_State_Management_Strategy]]
|
||||
- Foundation: [[Reliability_Safety_First]]
|
||||
|
||||
Reference in New Issue
Block a user