🌳7월12일 TIL🎶

HTTP status에 따른 에러 핸들링하기

fetchState에 errorMessage status를 추가해준다.

export interface FetchState<T> {
  isLoading: boolean;
  isError: boolean;
  isDataNull: boolean;
  data: T | null;
  errorMessage: string | null;
}

데이터를 불러오는 fetchData 함수에 status가 200인 경우에는 ok로 반환하도록 수정했다.

import apiClient from '.';

export const fetchData = async <T>(
  apiEndpoint: string,
  params?: object,
): Promise<{ data: T; ok: boolean }> => {
  const res = await apiClient.get<T>(apiEndpoint, { params });
  const ok = res.status === 200;
  return { data: res.data, ok };
};

이제 ok 인 경우와 그렇지 않은 경우에 따라 fetchState를 업데이트 해주자.

if (res.ok) {
  const fetchedData = res.data.themes;
  setFetchState({
    isLoading: false,
    isError: false,
    isDataNull: fetchedData.length === 0,
    data: fetchedData,
    errorMessage: null,
  });
}

HTTP status에 따라 에러 핸들링을 위해 에러 메세지를 반환하는 getErrorMessage 함수를 생성해주었다.

export const getErrorMessage = (error: unknown) => {
  if (error instanceof Error) return error.message;
  return String(error);
};

instaceof 는 객체의 프로토타입 체인에서 생성자의 prototype 프로퍼티가 존재하는지 확인한다. (반환 값은 boolean이다.)

즉, error instanceof Error는 발생한 error가 ErrorConstructor에 속하는지 확인하는 것이다.

이제 에러 발생시 log를 보면 발생한 에러의 status에 따라 message를 뱉어내는 것을 볼 수 있다.

---

typeof vs instanceof

🔸 typeof

typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환한다. 항상 string을 반환한다.

typeof operand;
typeof (operand);

여기서 operand는 자료형을 가져올 객체 또는 원시값이다.

 

원시값?

자바스크립트에서 원시값(primitive)이란 객체가 아니면서 메서도 또는 속성도 가지지 않는 데이터이다.

종류: string, number, bigint, boolean, undefined, symbol, null

//예시
typeof 37 === "number";
// Objects
typeof { a: 1 } === "object";

 

type of null?

javascript의 객체의 타입 태그는 0이다. null은 타입 태그로 0x00 로 표시되기 때문에 typeof는 object를 반환한다.

typeof null === "object";

🔸 instanceof

instanceof 연산자를 사용하면 객체가 특정 클래스에 속하는지 아닌지를 확인할 수 있다.

한마디로 해당하는 변수의 클래스와 비교해서 포함이 되면(자식이면) `true`를, 그렇지 않다면 `false` 를 반환해준다.

//ex
obj instanceof Class
obj instanceof Constructor

error의 경우도 ErrorConstuctor에 포함되는지 확인하기 위해서 instanceof를 사용한 것이다.

 

📝참고자료
Get a catch block error message with TypeScript

instanceof - JavaScript | MDN

원시 값 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

The history of “typeof null”