Skip to content

service 생성 규칙

Eunseop Lim edited this page Aug 24, 2022 · 2 revisions

백엔드 명세 픽스 전에 해야할 것

핵심

핵심은 api와 통신하는 service 파일에 모든 더티코드를 짱박고 나머지 코드에서는 프론트엔드의 명세대로 깔끔하게 진행하는 것이다.

최초작업

  • 파일 생성: {도메인명}Service.ts. camelCase로

GET

  1. 프론트엔드에서 관리할 해당 엔티티의 타입을 만들어 놓기: @/types/{도메인명}Types(camelCase).ts 파일.
  2. service 파일에서 {메소드명}ResponseBody(PascalCase) 타입 만들기. 명세 픽스 되기 전까진 엔티티 타입을 그대로 냅다 꼬라박기.
  3. API URL 상수 만들기: 일단 아무렇게나 만들어놓고 MSW로 그 상수 연결시켜서 엔티티 타입대로 데이터 뱉게 하기
  4. api 호출 결과데이터를 엔티티에 넣고 그걸 반환하기. Response 를 반환하지 않는것이 핵심임.
  5. 잘 뱉는것 확인했으면 이제 Query 만들고 나서 프론트엔드 작업 ㄱㄱ

POST, PUT, DELETE

  1. Props 타입 만들기: {메소드명}Props. PascalCase로 하기, 파라미터가 2~3개 밖에 없으면 타입 만들지 말고 객체로 받지 말고 그냥 파라미터에 짱박기
  2. RequestBody 타입 만들기: {메소드명}RequestBody. Props
  3. Props를 RequestBody 객체에 할당하기: 그냥 코드 틀 구색 갖추는 용. 나중에 RequestBody API 명세에 맞게 새로 수정할것.

여기까지 최대한 끌고와서 백엔드 대응할 준비 하기 ^.^

백엔드 명세 픽스 후에 해야할 것

  1. Request body 타입 만들기: {메소드명}RequestBody. PascalCase
  2. 옵셔널 체크: API 명세에 따라 필수, 옵셔널을 RequestBody에 명세했다면 분명 타입에러 날것임. 그걸바탕으로 이제 윗줄에서 옵셔널체크하여 에러 throw하면 됨.
  3. Props를 request body로 변환작업 하기
  4. Response body 타입 만들기:

으악.. 안해보고 쓰려니 막막해. 직접 해보고 다시 작성하자

Clone this wiki locally