api-testerlisted

# API Tester ��론트엔드 ↔ 백엔드 API 연동을 실제로 검증하는 테스트 스킬. ## 사용법 ``` "로그인 API 테스트해줘" "프론트-백엔드 연동 검증해줘" "/api-tester" ``` --- ## 워크플로우 ### 1. 환경 감지 서버 실행 상태 확인: ```bash # 백엔드 포트 확인 curl -s http://localhost:8000/health || curl -s http://localhost:3001/health # 프론트엔드 포트 확인 curl -s http://localhost:3000 || curl -s http://localhost:5173 ``` 프록시 설정 확인 (vite.config.ts, next.config.js, package.json proxy 등): ```bash # Vite 프록시 grep -r "proxy" vite.config.* 2>/dev/null # Next.js rewrites grep -r "rewrites\|destination" next.config.* 2>/dev/null # CRA proxy grep "proxy" package.json 2>/dev/null ``` ### 2. CORS 검증 ```bash # preflight OPTIONS 요청 curl -v -X OPTIONS http://localhost:8000/api/users \ -H "Origin: http://localhost:3000" \ -H "Access-Control-Request-Method: POST" \ -H "Access-Control-Request-Headers: Content-Type,Authorization" \ 2>&1 | grep -i "access-control" ``` **기대 결과:** - `Access-Control-Allow-Origin`: 프론트엔드 origin 포함 - `Access-Control-Allow-Methods`: 필요한 HTTP 메서드 포함 - `Access-Control-Allow-Headers`: Content-Type, Authorization 포함 - `Access-Control-Allow-Credentials`: true (쿠키 사용 시) ### 3. 인증 흐름 검증 ```bash # 로그인 → 토큰 발급 TOKEN=$(curl -s -X POST http://localhost:8000/api/auth/login \ -H "Content-Type: application/json" \ -d '{"email":"test@example.com","password":"test1234"}' \ | jq -r '.token // .access_token // .accessToken') echo "Token: ${TOKEN:0:20}..." # 보호된 API 호출 curl -s http://localhost:8000/api/users/me \ -H "Authorization: Bearer $TOKE