-
Notifications
You must be signed in to change notification settings - Fork 0
service 생성 규칙
Eunseop Lim edited this page Aug 24, 2022
·
2 revisions
핵심은 api와 통신하는 service 파일에 모든 더티코드를 짱박고 나머지 코드에서는 프론트엔드의 명세대로 깔끔하게 진행하는 것이다.
- 파일 생성: {도메인명}Service.ts. camelCase로
- 프론트엔드에서 관리할 해당 엔티티의 타입을 만들어 놓기: @/types/{도메인명}Types(camelCase).ts 파일.
- service 파일에서 {메소드명}ResponseBody(PascalCase) 타입 만들기. 명세 픽스 되기 전까진 엔티티 타입을 그대로 냅다 꼬라박기.
- API URL 상수 만들기: 일단 아무렇게나 만들어놓고 MSW로 그 상수 연결시켜서 엔티티 타입대로 데이터 뱉게 하기
- api 호출 결과데이터를 엔티티에 넣고 그걸 반환하기. Response 를 반환하지 않는것이 핵심임.
- 잘 뱉는것 확인했으면 이제 Query 만들고 나서 프론트엔드 작업 ㄱㄱ
- Props 타입 만들기: {메소드명}Props. PascalCase로 하기, 파라미터가 2~3개 밖에 없으면 타입 만들지 말고 객체로 받지 말고 그냥 파라미터에 짱박기
- RequestBody 타입 만들기: {메소드명}RequestBody. Props
- Props를 RequestBody 객체에 할당하기: 그냥 코드 틀 구색 갖추는 용. 나중에 RequestBody API 명세에 맞게 새로 수정할것.
여기까지 최대한 끌고와서 백엔드 대응할 준비 하기 ^.^
- Request body 타입 만들기: {메소드명}RequestBody. PascalCase
- 옵셔널 체크: API 명세에 따라 필수, 옵셔널을 RequestBody에 명세했다면 분명 타입에러 날것임. 그걸바탕으로 이제 윗줄에서 옵셔널체크하여 에러 throw하면 됨.
- Props를 request body로 변환작업 하기
- Response body 타입 만들기:
으악.. 안해보고 쓰려니 막막해. 직접 해보고 다시 작성하자