🛠️ 프론트엔드와 백엔드 사이에서 주로 협의하는 내용

들어가며

프론트엔드 개발자로 전향하면서 백단과 프론트단 사이에서 소통은 어떤게 필요할까궁금해서 정리해보았다.

---

1️⃣ API 설계 및 데이터 구조 관련

✅ 1-1. API 요청/응답 데이터 구조

📌 프론트 & 백엔드 협의 포인트

• 필요한 데이터 및 형식 결정
• 필드명 통일 (userId vs user_id vs id)
• 불필요한 데이터 제거

💡 예제: 주문 정보 API 협의

항목	프론트 요청	백엔드 응답
주문 번호	order_id	orderId
주문 상태	status	status
사용자 정보	user	{ userId, name, email }

---

✅ 1-2. API 응답 상태 코드 & 에러 핸들링

📌 프론트 & 백엔드 협의 포인트

• 상태 코드 정의 (200, 400, 500 등)
• 에러 메시지 통일 ("USER_NOT_FOUND", "INVALID_INPUT" 등)
• UI에서 처리할 수 있도록 에러 코드 설계

💡 예제: 로그인 API 응답 협의

HTTP 상태 코드	메시지	프론트 처리 방식
200 OK	{ "message": "success", "userId": 123 }	로그인 성공
400 Bad Request	{ "error": "INVALID_CREDENTIALS" }	"아이디 또는 비밀번호가 올바르지 않습니다."
500 Internal Server Error	{ "error": "SERVER_ERROR" }	"서버 오류 발생, 다시 시도해주세요."

---

✅ 1-3. 페이징 & 데이터 로딩 방식

📌 프론트 & 백엔드 협의 포인트

• 한 번에 불러올 데이터 개수 (page=1&size=20)
• 무한 스크롤 vs 페이지네이션 vs 더보기 버튼 방식
• 정렬 & 필터링 방식 (sort=desc, filter=status:active)

💡 예제: 주문 목록 조회 API 협의

GET /api/orders?page=1&size=20&sort=createdAt,desc

---

2️⃣ 성능 & 최적화 관련

✅ 2-1. 데이터 전송 최적화 (필요한 데이터만 받기)

📌 프론트 & 백엔드 협의 포인트

• 불필요한 필드 제거
• 대용량 데이터 (이미지 등) URL 방식으로 전달
• 캐싱 가능한 데이터 처리 방식 결정

💡 예제: 필요 없는 필드 제거 요청

{
  "orderId": 123,
  "user": {
    "name": "홍길동",
    "email": "hong@example.com"
  },
  "items": [
    {
      "name": "노트북",
      "price": 1500000
    }
  ]
}

---

✅ 2-2. 요청 개수 최소화 (API 호출 최적화)

📌 프론트 & 백엔드 협의 포인트

• 여러 개의 API 요청을 합쳐서 최소화
• 필요한 데이터만 포함하는 API 설계

💡 예제: 여러 개의 API를 하나로 합치기

{
  "orderId": 123,
  "user": { "name": "홍길동", "email": "hong@example.com" },
  "items": [
    { "name": "노트북", "price": 1500000 },
    { "name": "마우스", "price": 30000 }
  ]
}

---

✅ 2-3. 프론트 vs 백엔드에서 처리할 로직 분배

📌 프론트 & 백엔드 협의 포인트

• 데이터 필터링을 프론트에서 할지, 백엔드에서 할지 결정
• 계산 로직 처리 위치 협의

💡 예제: 주문 상태 변환 (프론트 vs 백엔드 협의)

// 백엔드 응답 예제
{ "status": "PENDING_PAYMENT" }

// 프론트에서 변환 예제
const statusText = {
  "PENDING_PAYMENT": "결제 대기중",
  "SHIPPED": "배송 중",
  "DELIVERED": "배송 완료"
};
console.log(statusText["PENDING_PAYMENT"]); // "결제 대기중"

---

3️⃣ 인증 & 보안 관련

✅ 3-1. 인증 방식 협의 (JWT vs 세션 vs OAuth 등)

📌 프론트 & 백엔드 협의 포인트

• 로그인 인증 방식 결정 (JWT, 세션, OAuth 등)
• API 호출 시 인증 토큰 전달 방식 (Authorization 헤더 사용)

💡 예제: JWT 인증 방식

GET /api/user
Authorization: Bearer eyJhbGciOiJIUzI1...

---

✅ 3-2. API 권한 및 보안 체크

📌 프론트 & 백엔드 협의 포인트

• 인증이 필요한 API vs 공개 API 구분
• 권한이 없을 때 응답 코드 (403 Forbidden vs 401 Unauthorized)

💡 예제: 관리자 권한 체크 API

GET /api/admin/orders
403 Forbidden // 관리자가 아니라면 이 응답을 보내기

---

🔹 결론 (주요 협의 내용 요약)

✅ API 데이터 구조 & 필드명 맞추기
✅ 페이징, 정렬, 필터링 방식 정하기
✅ 에러 코드 및 응답 메시지 통일
✅ 프론트 vs 백엔드에서 처리할 로직 나누기
✅ API 요청 개수 최소화 & 최적화
✅ 인증 및 권한 체크 방식 협의