[우아한 타입스크립트] 7장

📍 API 요청

fetch로 API 요청하기

useEffect(() => {
fetch ("https://api.baemin.corn/cart")
.then((response) => response.json())
.then(({ cartltem }) => {
setCartCount(cartitem.length);
})；
}, [])；

위 코드처럼 구현한 상태에서 새로운 API 요청 정책이 추가되면 계속해서 비동기 호출 코드를 수정해야 하는 번거로움이 발생한다.

 

서비스 레이어로 분리하기

여러 API 요청 정책이 추가되어 코드가 변경될 수 있다면 비동기 호출 코드는 컴포넌트 영역에서 분리되어 다른 영역(서비스 레이어)에서 처리되어야 한다.

위 코드 기준 fetch 함수 호출 부분은 서비스 레이어로 이동하고 컴포넌트는 서비스 레이어의 비동기 함수를 호출해 그 결과를 받아와 렌더링 하는 흐름이 된다.

하지만 단순히 함수를 분리한다고 해서 API 요청 정책이 추가되는 것을 해결하기는 어렵다.

 

Axios 활용하기

fetch는 내장 라이브러리라 따로 임포트나 설치할 필요가 없지만 많은 기능을 사용하려면 직접 구현해서 사용해야 한다.

이런 번거로움 때문에 Axios 라이브러리를 사용하고 있다.

const apiRequester： Axioslnstance = axios.create (defaultConfig);
const orderApiRequester： Axioslnstance = axios.create({
baseURL： "https：//api.baemin.or/’,
  ...defaultConfig,
});

const orderCartApiRequester： Axioslnstance = axios.create({
baseURL: "https：//cart.baemin.order/",
  ...defaultConfig,
});

 

Axios 인터셉터 사용하기

위 코드처럼 각 requester가 서로 다른 역할을 담당하는 서버일 때 각각 다른 헤더를 설정해줘야 하는 로직이 필요할 수도 있다.

인터셉터 기능을 사용해 requesterdp에 따라 비동기 호출 내용을 추가해 처리할 수 있다.

또한 API 에러를 처리할 때 하나의 에러 객체로 묶어 처리도 가능하다.

apiRequester.interceptors, request .use(setRequestDefaul.tHeader);
const orderApiRequester: Axioslnstance = axios.create({
baseURL: orderApiBasellrl,
  ...defaultConfig,
});

요청 옵션에 따라 다른 인터셉터를 만들기 위해 빌더 패턴을 추가해 APIBuilder 같은 클래스 형태로 구성하기도 한다.

빌더 패턴
객체 생성을 더 편리하고 가독성 있게 만들기 위한 디자인 패턴
주로 복잡한 객체의 생성을 단순화하고 객체 생성 과정을 분리해 객체를 조립하는 방법을 제공한다.

 

APIBuilder 클래스는 보일러플레이트 코드가 많다는 단점이 있지만 옵션이 다양한 경우에 인터셉터를 설정값에 따라 적용하고 필요 없는 인터셉터를 선택적으로 사용할 수 있다는 장점도 있다.

 

👉🏻 보일러플레이트 코드

어떤 기능을 사용할 때 반복적으로 사용되는 기본적인 코드

 

API 응답 타입 지정하기

interface Response<T> {
data： T;
status: string;
serverDateTime： string;
errorCode?: string; // FAIL, ERROR
errorMessage?： string; // FAIL, ERROR
}

같은 서버에서 오는 응답 형태는 대체로 통일되어 있어 하나의 Response 타이으로 묶일 수 있다.

 

뷰 모델 사용하기

API 응답은 변할 가능성이 크다.

새 프로젝트는 서버 스펙이 자주 바뀌기 때문에 뷰 모델을 사용해 API 변경에 따른 범위를 한정해줘야 한다.

뷰 모델을 만들면 API 응답이 바뀌어도 UI가 깨지지 않게 개발할 수 있다.

 

Superstruct 사용해 런타임에서 응답 타입 검증

런타임 응답 타입 검증을 위해 사용하는 Superstruct 라이브러리는

- Superstruct를 사용해 인터페이스 정의와 자바스크립트 데이터의 유효성 검사를 쉽게 할 수 있다.

- Superstruct는 런타임에서의 데이터 유효성 검사를 통해 개발자와 사용자에게 자세한 런타임 에러를 보여주기 위해 고안되었다.

import { assert, is, validate, object, number, string, array } from "superstruct";

const Article = object({
id: number(),
title: stringO,
tags: array(stringO),
author: object({
id: number(),
}),
});

const data = {
id: 34,
title: "Hello World",
tags: ["news", "features"],
author: {
id: 1,
},
};

assert(data, Article);
is(data, Article);
validate(data, Article);

Article 변수는 Superstruct의 object() 모듈의 반환 결과다.

Article의 id는 숫자, title은 문자열 등 이런 속성을 가진 객체 형태의 object이다.

assert: 유효하지 않을 경우 에러 던진다.

is: 유효성 검사 결과에 따라 true나 false값 반환

validate: [error, data] 형식의 튜플 반환, 유효하지 않을 때는 에러 값 반환, 유효하면 첫 번째 요소로 undefined, 두 번째 요소로 data value 반환

 

 

🎈 API 상태 관리하기

상태 관리 라이브러리에서 호출하기

상태 관리 라이브러리의 비동기 함수들은 서비스 코드를 사용해 비동기 상태를 변화시킬 수 있는 함수를 제공한다.

컴포넌트는 이런 함수를 사용해 상태를 구독하며 상태가 바뀔 때 컴포넌트를 다시 렌더링하는 방식으로 동작한다.

 

Redux는 비동기 상태가 아닌 전역 상태를 위해 만들어진 라이브러리라 미들웨어로 불리는 여러 도구를 도입해 비동기 상태를 관리한다.

그래서 보일러플레이트 코드가 많아지는 등 간편하게 비동기 상태를 관리하기 어렵다.

 

MobX 같은 라이브러리에서는 이런 불편함을 개선하기 위해 비동기 콜백 함수를 분리해 액션으로 만들거나 runInAction 같은 메서드를 사용해 상태 변경을 처리한다.

 

훅으로 호출하기

훅을 사용한 방법은 상태 변경 라이브러리를 사용한 방식보다 훨씬 간단하다.

훅은 캐시를 사용해 비동기 함수를 호출하고 상태 관리 라이브러리에서 발생한 의도치 않은 상태 변경을 방지하는 데 도움이 된다.

 

 

🔫  API 에러 핸들링

타입 가드 활용하기

Axios 라이브러리에서는 Axios 에러에 대한 isAxiosError 타입 가드를 제공하고 있다.

interface ErrorResponse {
  status: string;
  serverDateTime: string;
  errorCode: string;
  errorMessage: string;
}

*사용자 정의 타입 가드 작성 시 타입 가드 함수의 반환 타입으로 parameterName is Type 형태의 타입 명제를 정의해 주는 게 좋다.

 

에러 서브클래싱하기

실제 요청을 처리할 때 단순 서버 에러만이 아니라 인증 정보 에러, 네트워크 에러 등 다양한 에러가 발생한다.

이를 명시적으로 표시하기 위해 서브클래싱을 활용할 수 있다.

 

👉🏻 서브클래싱

기존 클래스를 확장해 새로운 클래스를 만드는 과정

 

서브클래싱을 활용하면 에러가 발생했을 때 코드사에서 어떤 에러인지 바로 확인 가능하다.

또한 에러 인스턴스가 무엇인지에 따라 에러 처리 방식을 다르게 구현할 수 있다.

 

인터셉터를 활용한 에러 처리

Axios 같은 페칭 라이브러리는 인터셉터 기능을 제공한다. 이걸 사용하면 HTTP 에러에 일관된 로직을 적용할 수 있다.

 

에러 바운더리를 활용한 에러 처리

에러 바운더리는 에러 발생할 때 공통으로 에러를 처리하는 리액트 컴포넌트다.

에러 바운더리를 사용하면 리액트 컴포넌트 트리 하위에 있는 컴포넌트에서 발생한 에러를 캐치하고 해당 에러를 가장 가까운 부모 에러 바운더리에서 처리할 수 있게 한다.

에러 바운더리는 에러가 발생한 컴포넌트 대신 에러 처리를 하거나 예상치 못한 에러를 공통 처리할 때 사용 가능하다.

 

 

⚒️  API 모킹

모킹은 가짜 모듈을 활용하는 것을 말한다.

서버가 불안정하거나 AWS 등에 문제 발생했을 때 서버의 영향을 받지 않고 프론트 개발을 할 수 있다.

 

JSON 파일 불러오기

간단한 조회만 필요하면 *.json 파일 만들거나 파일 안에 JSON 형식의 정보를 저장해 export 해주는 방식을 사용하면 된다.

이 방법은 별도로 설정도 필요 없어서 쉽게 구현 가능하다.

그러나 실제 API URL로 요청하는 게 아니라서 추후에 요청 경로를 바꿔야 한다.

 

NextApiHandler 활용하기

프로젝트에서 Next.js 를 사용하면 NextApiHandler를 활용할 수 있다.

NextApiHandler는 한 파일 안에 하나의 핸들러를 디폴트 익스포트로 구현해야 하며 파일 경로가 요청 경로가 된다.

응답하고자 하는 값 정의 후 핸들러 안에서 요청에 대한 응답을 정의하면 된다.

핸들러를 사용하는 경우 단순 파일을 불러오는 것과 다르게 중간 과정에 응답 처리 로직을 추가할 수 있다.

import { NextApiHandler } from "next";

const BRANDS： Brand[] = [
  {
    id： 1,
    label： "배민스토어’,,
  },
  {
    id： 2,
    label： ”비마트’,,
  },
];

const handler: NextApiHandler = (req, res) => {
  // request 유효성 검증
  
  res.json(BRANDS);
};

export default handler;

 

API 요청 핸들러에 분기 추가하기

API 요청을 훅이나 별도 함수로 선언하고 조건에 따라 목업 함수를 내보내거나 실제 요청 함수를 내보낼 수 있다.

이 방법을 사용하면 개발이 완료된 후에도 유지보수할 때 목업 함수를 사용할 수 있다.

필요한 경우에만 실제 API에 요청 보내고 평소에는 서버에 의존하지 않고 개발할 수 있다.

 

axios-mock-adapter로 모킹하기

axios-mock-adapter는 Axios 요청을 가로채서 요청에 대한 응답 값을 대신 반환한다.

단순 응답 바디만 모킹할 수 있지만 상태 코드, 응답 지연 시간 등을 추가로 설정 가능하다.

GET뿐만 아니라 POST, PUT 등 다른 요청에 대한 목업을 작성할 수 있다.

 

목업 사용 여부 제어하기

로컬에서는 목업을 사용하고 dev나 운영 환경에서는 사용하지 않으려면 플래그를 사용해 목업을 개발할 때와 개발하지 않을 때를 구분할 수 있다.

const useMock = Object.is(REACT_APP_MOCK, "true");

const mockFn = ({ status = 200, time = 100, use = true }： MockResult) => use &&
  mock.onGet(A/orderVlist/).reply (() =>
    new Promise((resolve) =>
      setTimeout(() => {
        resolve([
          status,
            status === 200 ? fetchOrderListSuccessResponse : undefined,
        ]);
      }, time)
    )
  );
  
if (useMock) {
  mockFn({ status: 200, time: 100, use: true });
}

플래그에 따라 mockFn을 제어할 수 있는데 매개변수를 넘겨 특정 mock 함수만 동작하게 할 수 있다.

 

axios-mock-adapter를 사용하는 경우에는 API 요청을 중간에 가로채는 거라 실제로 API 요청을 주고받지 않는다.

따라서 개발자 도구의 네트워크 탭에서는 확인하기 어렵다.

이 요청의 흐름을 파악하려면 react-query-devtools나 redux test tool 같은 별도 도구를 사용해야 한다.

목업을 사용할 때 네트워크 요청을 확인하고 싶을 때는 네트워크에 보낸 요청을 변경해 주는 Cypress 같은 도구의 웹훅을 사용하면 된다.