잘가 Axios

어서와 Fetch

1fetch("/api/posts", {
2  cache: "force-cache",
3  next: {
4    revalidate: 3600,
5    tags: ["posts"],
6  },
7});
8
9{
10  cache: "force-cache", // Data Cache에 저장하고 재사용
11  cache: "no-store" // 캐시 사용 x
12  next: {
13    tags: ["posts"], // 태그를 통해 연결
14    revalidate: false, // 장기간 캐시
15    revalidate: 0,     // 캐시하지 않음
16    revalidate: 3600,  // 3,600초마다 재검증
17  }
18}
19
20// 게시글 수정 시 posts 태그와 연결된 데이터만 갱신
21import { revalidateTag } from "next/cache";
22
23revalidateTag("posts");

• cache: "force-cache": 응답을 Next.js Data Cache에 저장하고 재사용
• cache: "no-store": 캐시를 사용하지 않고 요청할 때마다 새로운 데이터 조회
  • "no-store" 사용 시 revalidate와 서로 충돌
• next.revalidate: 캐시된 데이터를 다시 검증할 주기를 초 단위로 설정
• next.tags: 캐시에 태그를 지정해 필요한 데이터만 무효화

공통 request 구성하기

1const api = axios.create({
2  baseURL,
3  headers: {
4    "Content-Type": "application/json",
5  },
6});

1const request = async <T = unknown>(
2  path: string,
3  { responseType = "json", ...options }: RequestOptions = {},
4) => {
5  const url = getUrl(path);
6
7  const headers = await createRequestHeaders(options.headers);
8
9  if (options.body instanceof FormData) {
10    headers.delete("Content-Type");
11  }
12
13  const response = await fetch(url, {
14    ...options,
15    headers,
16  });
17
18  if (!response.ok) {
19    const data = await response.json();
20
21    throw new ApiError(data.message ?? response.statusText, response.status);
22  }
23
24  return getResponseBody<T>(response, responseType);
25};

1const getPost = async (nid: number) => {
2  return request<IPost>(`/posts/${nid}`, {
3    method: "GET",
4  });
5};
6
7const createPost = async (data: ICreatePostInput) => {
8  return request<IPost>("/posts", {
9    method: "POST",
10    body: JSON.stringify(data),
11  });
12};

토큰 재발급은요..?

authRequest를 통한 토큰 재발급

1const authRequest = async <T = unknown>(
2  path: string,
3  options: RequestOptions = {},
4  retry = true,
5  accessToken?: string,
6) => {
7  const token = accessToken ?? (await getToken("access-token"));
8
9  const headers = new Headers(options.headers);
10
11  if (token) {
12    headers.set("Authorization", `Bearer ${token}`);
13  }
14
15  try {
16    return await request<T>(path, {
17      ...options,
18      headers,
19    });
20  } catch (error) {
21    // 토큰 만료 처리
22  }
23};

토큰 만료 확인

1const isExpiredToken =
2  error instanceof ApiError && error.status === 401 && error.message === AUTH_ERROR.EXPIRED_TOKEN;
3
4if (!retry || !isExpiredToken) {
5  throw error;
6}

서버와 클라이언트의 토큰 재발급

1const getServerToken = async (name: TokenName) => {
2  const cookies = await import("next/headers").then((module) => module.cookies());
3
4  return cookies.get(name)?.value;
5};
6
7const getToken = (name: TokenName) => {
8  ...
9
10  return Promise.resolve(getServerToken(name));
11};
12
13// 서버 사이드라면
14if (IS_SERVER) {
15  const refreshToken = await getToken("refresh-token");
16
17  if (!refreshToken) {
18    return;
19  }
20
21  // 가져온 refresh token을 헤더에 직접 저장
22  headers.set("Cookie", `refresh-token=${refreshToken}`);
23}

재귀 호출을 이용한 요청 재시도

1const refreshedToken = await refreshAccessToken();
2
3if (!refreshedToken) {
4  throw error;
5}
6
7return authRequest<T>(path, options, false, refreshedToken);

한눈에 보기

테스트

• request
  • 기본 헤더와 요청 옵션 전달
  • JSON과 text 응답 변환
  • FormData 요청의 Content-Type 처리
  • 실패 응답의 상태 코드와 메시지 처리
• authRequest
  • access token을 Authorization 헤더에 추가
  • 토큰 만료 감지와 재발급 요청
  • 갱신된 토큰을 사용한 기존 요청 재시도
  • 재발급 실패 시 추가 재시도 방지
  • 서버와 클라이언트 환경에 따른 쿠키 처리

마치며