주니어 프론트엔드가 꼭 이해해야 할 API호출의 흐름에 대해...

 

📌 주니어 프론트엔드가 꼭 이해해야 하는 API 호출 흐름 5가지

1) 어떤 시점에 API를 호출하는지

• 페이지 로딩되자마자?
• 버튼 클릭 시?
• 스크롤 시?
• 모달 열릴 때?

 

2) 어떤 엔드포인트를 부르는지

• /users/1인지
• /login인지
• /products?category=flowers인지

 

3) 어떤 방식으로 부르는지 (GET/POST/PUT/PATCH/DELETE)

 

4) 프론트에서 서버로 어떤 데이터를 보내는지

• 바디(JSON)
• URL 파라미터
• 쿼리스트링
• 헤더(Authorization 포함)

 

5) 서버로부터 어떤 응답을 받는지

• 성공 응답 (200, 201 등)
• 실패 응습 (400, 401, 403, 404, 500 등)
• 응답 데이터 구조(JSON 형태)

 

📌 예시

" 로그인 버튼 클릭 "

→ POST /auth/login
→ body: { email: "abc@test.com", password: "1234" }
→ 성공하면 서버가 200 + token 반환
→ 프론트는 그 token을 저장
→ 로그인 후 마이페이지로 이동

 

 

" 상품 리스트 페이지 접속 "

→ 페이지 로딩될 때 자동으로 GET /products 호출
→ 서버가 200 + 상품 목록 JSON 반환
→ 프론트는 이 데이터를 화면에 렌더링

 

" 상품 클릭 "

→ GET /products/10
→ 서버가 200 + 상품 상세 정보
→ 프론트는 상세 페이지에 뿌림

 

 

" 상품을 못 찾았다면? "

→ 서버가 404 반환
→ “상품을 찾을 수 없습니다” 메시지를 표시
→ 프론트는 404를 보고 적절한 화면을 띄운다