[FE] issue387: 서버 응답 런타임에 타입 확인

[nan-noo]

요약

서버 응답이 타입대로 오지 않을 때 런타임 에러가 발생해서 화면이 하얗게 변하는 문제
-> axios api 응답값 반환 전에 타입을 체크해서 응답값이 제대로 오지 않을 시 처리를 통해 하얗게 변하는 것을 방지했습니다.

세부사항

api 폴더의 각 도메인마다 typeChecker.ts 파일을 추가했습니다.

예시

// api 파일 - index.ts
export const postLogin = async ({ code }: ApiLogin['post']['variables']) => {
  const response = await axiosInstance.post<
    ApiLogin['post']['responseData'],
    AxiosResponse<ApiLogin['post']['responseData']>,
    ApiLogin['post']['variables']
  >(`/api/auth/login?code=${code}`);

// type check 추가
  return checkLogin(response.data);
};

// type checker 파일 - typeChecker.ts
type LoginKeys = keyof ApiLogin['post']['responseData'];

export const checkLogin = (data: unknown): ApiRefreshToken['get']['responseData'] => {
  if (!isObject(data)) throw new AxiosError(`Token does not have correct type: object`);

  const keys: Array<LoginKeys> = ['accessToken', 'expiredTime'];
  if (!hasOwnProperties(data, keys)) throw new AxiosError('StudyReviews does not have some properties');

  return {
    accessToken: checkType(data.accessToken, isString),
    expiredTime: checkType(data.expiredTime, isNumber),
  };
};

// utils/typeChecker.ts
export const isNull = (value: unknown): value is null => value === null;

export const isNullOrUndefined = (value: unknown): value is null | undefined => value === undefined || value === null;

export const isBoolean = (value: unknown): value is boolean => typeof value === 'boolean';

...

// isNull, isNumber등의 조건 함수 참/거짓 반환값에 따라 value를 return하는 함수
const checkType = <T>(value: unknown, isTypeFn: (value: unknown) => value is T): T => {
  if (!isTypeFn(value)) {
    console.error(`${isTypeFn} ${value} does not have correct type`);
    throw new AxiosError(`${value} does not have correct type`);
  }

  return value;
};

export default checkType;

close #387

[airman5573]

태태 코드 짜느라 수고하셨어요.
리뷰 확인해주세요 :D