프론트엔드와 백엔드 분리 방법

역할 분리

• 프론트엔드와 백엔드는 비동기 API를 통해만 상호작용
• 각 팀이 독립적인 개발 프로세스, 빌드 도구, 테스트 스위트 보유
• 관심사 분리로 인해 두 팀이 상대적으로 독립적이고 느슨하게 결합됨

개발 프로세스

• 백엔드 개발자가 API 문서 작성 및 유지관리, API 변경 시 문서 업데이트
• 백엔드 팀이 API 문서 기반으로 인터페이스 개발
• 프론트엔드 팀이 API 문서 기반으로 개발 + 모킹 플랫폼 활용
• 개발 완료 후 통합 테스트 및 제출

모킹 서버는 API 문서를 기반으로 자동으로 모킹 데이터를 생성하며, 이는 API 문서가 곧 API가 되는 것을 의미합니다.

API 설계 규격

규격 원칙

• API 응답 데이터는 화면에 직접 표시될 수 있도록 구성: 프론트엔드는 렌더링 로직만 처리
• 렌더링 로직이 여러 API 호출에 걸쳐서는 안 됨
• 프론트엔드는 인터랙션과 렌더링 로직에 집중하며, 비즈니스 로직 처리는 최소화
• 요청-응답 데이터 형식: JSON, JSON 데이터는 간단하고 가볍게 유지, 다중 계층 JSON 방지

기본 형식 예시

아래는 프론트엔드와 백엔드 간 데이터 교환의 기본 예시입니다. 실제 구현 시 비즈니스 요구사항이나 코딩 습관에 따라 적절히 조정할 수 있으며, 아래 예시에 얽매이지 마십시오.

요청 기본 형식

모든 요청 데이터는 JSON 형식으로 포장됩니다.

GET 요청:

xxx/login?body={"userId":"admin","userPass":"123456","captchaCode":"scda","autoLogin":1}

POST 요청:

POST 요청 예시는 기본적으로 동일한 JSON 형식을 따릅니다.

응답 기본 형식

{
  status:200,
  response:{
  	message:"success"
  }
}

status: 요청 처리 상태를 나타내며, 예시 값은 다음과 같습니다:

• 200: 요청 처리 성공
• 500: 요청 처리 실패
• 401: 인증되지 않은 요청, 로그인 페이지로 이동
• 406: 인증되지 않은 권한, 권한 없음 페이지로 이동

response.message: 요청 처리 메시지:

• status=200 이고 response.message="success": 요청 처리 성공
• status=200 이고 response.message!="success": 요청 처리 성공, 일반 메시지 표시: message 내용
• status=500: 요청 처리 실패, 경고 메시지 표시: message 내용

응답 엔티티 형식

{
  status:200,
  response:{
  	message:"success",
    payload:{
    	userID:1,
      userName:"madder",
      "userAge":28,
      "userGender":2
    }
  }
}

response.payload: 응답으로 반환되는 엔티티 데이터

응답 목록 형식

{
  status:200,
  response:{
  	message:"success",
    items:[
      {
        "userID":1,
        "userName":"tony",
        "userAge":28,
        "userGender":1
      },
      {
        "userID":2,
        "userName":"Jerry",
        "userAge":30,
        "userGender":2
      }
    ]
  }
}

response.items: 응답으로 반환되는 목록 데이터

응답 페이징 형식

{
  status:200,
  response:{
    currentRecordCount:2,
  	message:"success",
    totalRecordCount:2,
    currentPageNo:1,
    pageSize:10,
    items:[
      {
        "userID":1,
        "userName":"tony",
        "userAge":28,
        "userGender":1
      },
      {
        "userID":2,
        "userName":"jerry",
        "userAge":30,
        "userGender":2
      },
     {
        "userID":3,
        "userName":"pines",
        "userAge":35,
        "userGender":1
      }
    ],
    totalPages:1
  }
}

response.currentRecordCount: 현재 페이지의 레코드 수

response.totalRecordCount: 전체 레코드 수

response.currentPageNo: 현재 페이지 번호

response.pageSize: 페이지 크기

response.totalPages: 전체 페이지 수

특수 콘텐츠 규격

드롭다운, 체크박스, 라디오 버튼

선택 여부는 백엔드 인터페이스에서 통합 로직으로 판단하고, isSelected로 선택 여부를 표시합니다. 예시는 다음과 같습니다:

{
  status:200,
  response:{
  	message:"success",
    items:[
      {
        "userID":1,
        "userName":"madder",
        "userAge":28,
        "userGender":2,
        "isSelected":1
      },
      {
        "userID":2,
        "userName":"pines",
        "userAge":30,
        "userGender":1,
         "isSelected":0
      }
    ]
  }
}

드롭다운, 체크박스, 라디오 버튼의 선택 로직은 프론트엔드에서 처리하지 않고, 백엔드 로직으로 통합하여 선택 여부를 판단한 후 프론트엔드에 표시하도록 전달해야 합니다.

Boolean 타입

Boolean 타입은 JSON 데이터 전송 시 1/0으로 표시하며, 1은 참(True)/예, 0은 거짓(False)/아니오를 의미합니다.

날짜 타입

날짜 타입은 JSON 데이터 전송 시 문자열로 통일하며, 구체적인 날짜 형식은 비즈니스 요구사항에 따라 결정됩니다.