[TIL + DevLog] 각종 오류 수정..! 2021/12/10

오늘은 각종 오류들을 수정했다.

토큰 만료시 로그아웃을 못하는 문제

  const logoutHandler = () => {
    // axios 요청
    instance
      .get('/users/logout')
      .then((res) => {
        console.log(res);
        localStorage.removeItem('lumiereUserInfo');
        setIsLogin(false);
        history('/');
      })
      .catch((err) => {
        console.log(err);
      });
  };

이 문제는 catch부분에서 예외처리를 안해줘서 일어나는 문제였다.

.catch((err) => {
        console.log(err);
        localStorage.removeItem('lumiereUserInfo');
        setIsLogin(false);
        history('/');
      });

그래서 위와 같이 catch문에 예외처리를 해줬다. 근데, 로그아웃으로 해결할 게 아니라, 각 페이지에 들어갔을때 토큰이 유효한지 확인하고 유효하지 않다면 강제로 로그아웃을 시켜야 한다.

페이지네이션에 따른 type변경

export interface Order {
  orderItems: [
    {
      image: string;
      title: string;
      artist: string;
      size: string;
      price: number;
    },
  ];
  result: {
    id: string;
    paidAt: Date;
    status: number;
    updatedAt: Date;
  };
  deliver: {
    address: string;
    receiver: string;
    request: string;
  };
  ordererInfo: {
    name: string;
    phoneNum: string;
    email: string;
    refundTerms: string;
  };
  shippingPrice: number;
  totalPrice: number;
  // deliveredAt: Date;
  user: {
    name: string;
    _id: string;
  };
  _id: string;
}

타입이 이렇게 되어 있었는데 page와 pages를 넣어서

export interface Order {
orders: [
  {
    orderItems: [
      {
        artist: string;
        image: string;
        price: number;
        product: string;
        size: string;
        title: string;
      },
    ];
    result: {
      id: string;
      paidAt: string;
      status: number;
      updatedAt: string;
    };
    totalPrice: number;
    user: {
      general: {
        email: string;
      };
      kakao?: string;
      naver?: string;
      google?: string;
      name: string;
      _id: string;
    };
    _id: string;
  },
];
page: number;
pages: number;
}

이렇게 바꼇다.. 타입이 바뀌다보니 안에 있던 내용들도 싹 바꿔줘야 했는데, 처음엔 이전에 했던대로

const [orderList, setOrderList] = useState<Array<Order>>([]);

이렇게 초기값을 설정했었는데 배열안의 요소들을 맵핑할때 자꾸 undefined가 떠서 결국엔 아래처럼 모든 초기값을 써줬다.

 const [orderList, setOrderList] = useState<Order>({
    orders: [
      {
        orderItems: [
          {
            artist: '',
            image: '',
            price: 0,
            product: '',
            size: '',
            title: '',
          },
        ],
        result: {
          id: '',
          paidAt: '',
          status: 0,
          updatedAt: '',
        },
        totalPrice: 0,
        user: {
          general: {
            email: '',
          },
          kakao: '',
          naver: '',
          google: '',
          name: '',
          _id: '',
        },
        _id: '',
      },
    ],
    page: 0,
    pages: 0,
  });

작품/작가 목록 어드민목록들에 모두 페이지네이션이 들어가서 구조를 다 바꿔야만 했는데, 자바스크립트였다면 일도 아니었겠지만 타입스크립트을 쓰니 이게 엄청나게 힘들더라!! 분명 다른방법도 있을텐데 알아내지 못한점이 조금 아쉽다.