Qnrr 434 axios 분리

[aken-you]

🌱 연관된 이슈

Qnrr 434

☘️ 작업 내용

당장 이 코드를 develop에 머지할 건 아니고, 환경에 따라 axios 분리했는데 그 부분에 대해 조언을 얻고싶어 미리 올립니다.

toast 컴포넌트 추가

shadcn에서 toast는 sonner 라이브러리를 설치하라고 명시되어 있습니다. 저번 회의때 이야기 나눈 것처럼, 그 라이브러리를 설치하여 구현하였습니다.

ApiError 클래스 생성

에러 응답 바디에 statusCode, errorCode, errorName, message가 담겨서 옵니다.
그래서 에러 응답이 오면 ApiError를 throw하여 대처할 수 있도록, ApiError 클래스를 만들었습니다.
(근데, 서버에서 ApiError 객체를 throw해도 errorCode와 같은 세부적인 내용이 클라이언트로 전송되지 않을 수 있다고 하네요💦 맞다면, Error 객체를 상속받지 않는 방법으로 수정할 것 같아요.)

class ApiError extends Error {
  name = 'ApiError';
  statusCode: number;
  errorCode: string;
  errorName: string;
  message: string;

  constructor({
    statusCode,
    errorCode,
    errorName,
    message,
  }: {
    statusCode: number;
    errorCode: string;
    errorName: string;
    message: string;
  }) {
    super(message);
    this.statusCode = statusCode;
    this.errorCode = errorCode;
    this.errorName = errorName;
    this.message = message;
  }
}

axios 분리

axios instance를 분리하였습니다. 크게 3가지로 나뉩니다.

• axiosAllInstance: access token이 필요하지 않은 요청
• axiosClientInstance: RCC에서 쓸 access token이 필요한 요청
• axiosServerInstance: RSC에서 쓸 access token이 필요한 요청

분리한 이유는 RSC와 RCC에서 access token을 가져오는 방식이 달라서입니다. RSC에서는 cookies로, RCC에서는 document로 가져오고 있습니다. RSC에서도 refresh token으로 access token을 재발급 받는 로직이 필요하다고 생각하기에, 둘을 구분하였습니다.
그래서 RSC에서 access token이 필요한 api에 요청할 경우 axiosServerInstance를, RCC에서 access token이 필요한 요청일 경우 axiosClientInstance를 사용하면 됩니다.
access token이 필요하지 않다면, axiosAllInstance를 사용하면 됩니다.

axiosClientInstance와 axiosServerInstance에서 errorCode가 AUTH001인 경우, access token 재갱신 요청하는 로직이 들어가야 합니다. 이 부분은 연환님과 논의가 필요할 것 같아요.

[yeonhwan]

axios Instance 관련해서는 저도 비슷하지만 조금 다른 작업을 진행 하고 있었습니다.

저는 다음과 같이 구분해서 사용예정이었습니다.

기존 axiosInstance(토큰 없음) ->generalRequest[네이밍변경],
신규 protectedRequest(토큰 있음, client only),
기존 multipartRequest (유지)

서버컴포넌트 요청관련은 현재 동작 플로우 테스트가 성공하지를 못해 아직 로직이 불분명해서 따로 생성하거나 추상화작업을 하지 않았습니다.
저희 API테스트서버가 발급하는 refreshToken 의 domain 이 zeroone.it.kr 부분이라, 브라우저가 Next 웹서버로 향하는 RSC 요청에 포함시켜주지 않더라구요. 이 부분이 해결되고 방법이 확실해지면 그때 어떻게 묶는 게 좋을지 생각해보겠습니다.