api 사용 방법 정리

[Bhanjo]

API 사용 방법

• 모든 API 관련 처리는 src/util에서 작성합니다
• root 디렉터리에 .env 설정이 필요합니다. 값은 문의 혹은 노션 참고 부탁드립니다

axios 폴더

axios에 관련된 함수를 작성합니다.
baseURL 세팅이 여기에 포함됩니다.

api 폴더

실제 api 관련 함수를 작성할 때 사용합니다.
모든 동작마다 파일을 만드는 것이 아니라 room, sign과 같이 분류에 따라 파일을 생성합니다.
해당 파일 내에 각 요청에 맞는 함수를 작성합니다.

api 작성 방법

import { Axios } from '@/util/axios';

interface CreateRoomRequest {
  dates: string; // "2023-07-07,2023-07-08"
  dateOnly: boolean; // true: 날짜, false: 날짜+시간
  startTime?: string; // '09:00'
  endTime?: string; // '17:00'
}

interface CreateRoomResponse {
  dates: string;
  dateOnly: boolean | undefined;
  startTime: string | undefined;
  endTime: string | undefined;
}

export const createRoom = async (
  params: CreateRoomRequest
): Promise<CreateRoomResponse | undefined> => {
  try {
    const res = (await Axios.post('/api/rooms', params)) as CreateRoomResponse;
    return res;
  } catch (e) {
    if (e instanceof Error) {
      throw new Error('createRoom Error', e);
    }
  }
};

api 설명 디테일

모든 axios 처리는 util/axios에 정의한 설정만 사용합니다

import { Axios } from '@/util/axios';

각 요청 및 응답에 맟는 타입을 지정합니다. 이름은 I<동작이름>Request, <동작이름>Response로 정의합니다 만약, response가 없는 경우 void를 지정합니다.

interface CreateRoomRequest {
  dates: string; // "2023-07-07,2023-07-08"
  dateOnly: boolean; // true: 날짜, false: 날짜+시간
  startTime?: string; // '09:00'
  endTime?: string; // '17:00'
}

interface CreateRoomResponse {
  dates: string;
  dateOnly: boolean | undefined;
  startTime: string | undefined;
  endTime: string | undefined;
}

실제 코드는 다음과 같이 작성합니다. 반드시 try-catch 핸들링을 합니다.

export const createRoom = async (
  params: CreateRoomRequest
): Promise<CreateRoomResponse | undefined> /*reponse가 없는 경우 Promise<void>*/ => {
  try {
    const res = (await Axios.post('/api/rooms', params)) as CreateRoomResponse;
    return res;
  } catch (e) {
    if (e instanceof Error) {
      throw new Error('createRoom Error', e);
    }
  }
};

[ndaemy]

TypeScript 작성 시 헝가리안 표기법 사용은 지양해주세요 (I Prefix)
TypeScript 공식 가이드
관련 stack overflow 질문

[Bhanjo]

interface에 null 타입 제거, I 머릿말 제거