프리온보딩 타입스크립트 + 리액트쿼리 과제 refactoring 일지

1. 맥락 이해하기 쉬운 변수명으로 통일

참고

• 타입별 변수명
  • boolean : is-, has-, can-, ...
  • function : get-, handle-, submit-, …
  • array : -s (ex. users.map(user ⇒ user.id)), …
• 피해야 할 변수명
  • data, info, foo, user1, mdhms, …

이벤트 함수나 api 함수명을 ~ handler로 통일했습니다.

 

onSubmit => submitHandler
changeButton => changeButtonHandler
handleEdit => editHandler
handleDelete => deleteHandler

 

---

2. typescript에서 'any' 없애기

Axios의 interceptors 라는 기능을 사용해서 서버에 요청을 보내기 직전에 가로채서 공통적으로 필요한 헤더와 토큰을 넣어주었다. 

이때 config를 any로 설정하였다. 

 

any를 없애고자 구글링을 한 결과, header가 AxiosRequestConfig를 갖는다는 것을 알게 되었다. 

 

 

axios.create로 인스턴스를 생성하고, AxiosRequestConfig 타입을 가지는 config 객체를 인자로 넘겨주었다.

 

🫠수정 전 코드

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "http://localhost:8080",
  headers: {
    "Content-Type": "application/json; charset=utf-8",
  },
});

axiosInstance.interceptors.request.use(
  async (config: any) => {
    const token = localStorage.getItem("token");
    if (token) {
      config.headers["Authorization"] = `Bearer ${token}`; //여기는 accessToken
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default axiosInstance;

 

⚡️수정 후 코드

import axios, { AxiosRequestConfig } from "axios";

const axiosInstance = axios.create({
  baseURL: "http://localhost:8080",
  headers: {
    "Content-Type": "application/json; charset=utf-8",
  },
});

axiosInstance.interceptors.request.use(
  async (config: AxiosRequestConfig) => {
    const token = localStorage.getItem("token");
    if (token) {
      config.headers = {};
      config.headers.Authorization = `Bearer ${token}`; //여기는 accessToken
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default axiosInstance;

 

3. typescript에서 'any' 없애기 (2)

react-query를 이번 시간을 통해서 처음 사용해보았는데 typescript와 함께 쓰니 오류를 더 많이 만났다. 

다른 분들의 코드를 참고해보다가 많은 분들이 useQuery나 useMutation으로 받아온 데이터를 hook으로 처리하는 것을 보았고 hook처리하는 것이 깔끔하다고 판단해서 내 코드에도 적용해보았다. 

 

useMutation으로 받아온 데이터를 onSuccess와, onError인 상태로 나누고 있는데 이때 데이터(loginData) 타입을

export interface AuthResponse { message: string; token: string; }

이렇게 설정해서 넣어주고 있는데 에러가 나고 있었다. 

참고로 onSuccess시 데이터를 콘솔에 찍어보면 아래와 같이 나와서 AuthResponse를 위와 같이 설정했습니다.
{message: '성공적으로 로그인 했습니다', token: 'eyJhbGciOiJIUzI1NiJ9.dGVzdEB0ZXN0LmNvbQ.ryq30DukSEV3o-wUkSBPVgBNQ8eBN0FO5Hog7vjsUiI'}

 

에러 코드

TS2769: No overload matches this call. Overload 1 of 4, '(mutationFn: MutationFunction<AuthResponse, UserInfo>, options?: Omit<UseMutationOptions<AuthResponse, any, UserInfo, unknown>, "mutationFn"> | undefined): UseMutationResult<...>', gave the following error.

 

문제 해결 방법

 

위 코드에서 useMutation은 내부 인자들을 보고 타입을 추론하게 되는데, 첫 번째 인자인 mutationFn의 타입을 보면 AuthAPI.login(userInfo)의 타입이 (data: UserInfo) => any로 추정되는 걸 볼 수 있었다.

 

그러면 onSuccess로 넘어가는 데이터의 타입은 any 타입이 넘어가는 걸 기대할텐데 AuthResponse 타입이라고 하니까 타입 에러를 내는것이었다!

 

즉, AuthAPI.login의 타입을 (data: UserInfo) => AuthResponse 타입으로 만들면 에러가 사라진다!

 

내부 인자의 타입을 확인해서 리턴하는 타입을 명시적으로 설정해주어야한다!

 

기존 코드

//AuthAPI

import axiosInstance from "./axiosInstance";
import { UserInfo } from "../types/model";

const AuthAPI = {
  signUp: (data: UserInfo) => {
    return axiosInstance.post("/users/create", data);
  },
  login: (data: UserInfo) => {
    return axiosInstance.post("/users/login", data);
  },
};

export default AuthAPI;

 

수정 코드

//AuthAPI

import axiosInstance from "./axiosInstance";
import { UserInfo, AuthResponse } from "../types/model";

const AuthAPI = {
  signUp: (data: UserInfo) => {
    return axiosInstance.post("/users/create", data);
  },
  login: (data: UserInfo): Promise<AuthResponse> => {
    return axiosInstance.post("/users/login", data);
  },
};

export default AuthAPI;

 

4. 리액트 쿼리 적용과 관심사 분리하기

axios의 interceptors를 사용해서 baseURL과 헤더에 들어갈 토큰을 세팅했다. 

 

그리고 auth파트와 todo파트를 나누어서 interceptors를 사용하는 api를 각각 만들었다. 

 

// AuthAPI
import axiosInstance from "./axiosInstance";
import { UserInfo, AuthResponse } from "../types/model";

const AuthAPI = {
  signUp: (data: UserInfo) => {
    return axiosInstance.post("/users/create", data);
  },
  login: (data: UserInfo): Promise<AuthResponse> => {
    return axiosInstance.post("/users/login", data);
  },
};

export default AuthAPI;

 

그리고 login, signup, get, post, put, delete hook을 만들어서 관심사 분리를 해보았다. 

여기서는 get 메서드에는 useQuery를, 그 외에는 useMutation를 사용했다. 

 

그리고 이 hook이 필요한 곳에서 호출만 하면 데이터가 짠!나온다. 

특히 데이터를 불러오는 useGetTodo hook에서는 로딩 상태 유무를 빠르게 판단해서 로딩 상태로 손쉽게 구현할 수 있었다!

 

refactoring 전

import React, { useEffect, useState } from "react";
import styled from "styled-components";
import { TodoMD } from "../types/model";
import SingleTodo from "./SingleTodo";
import axiosInstance from "../api/axiosInstance";

interface Prop {
  submitHandler: (e: React.FormEvent<HTMLFormElement>) => void;
}

const TodoList = ({ submitHandler }: Prop) => {
  const [getData, setGetData] = useState<TodoMD[]>([]);

  useEffect(() => {
    axiosInstance.get("/todos").then((res) => setGetData(res.data));
  }, [submitHandler]);

  return (
    <Container>
      {getData?.map((todo: TodoMD) => (
        <SingleTodo key={todo.id} {...todo} />
      ))}
    </Container>
  );
};

export default TodoList;

👉 useState를 사용해서 상태관리를 해주고 있다. 

 

 

refactoring 후

import React from "react";
import styled from "styled-components";
import { TodoMD } from "../types/model";
import SingleTodo from "./SingleTodo";
import useGetToDo from "../hooks/todos/useGetTodo";
import LoadingBar from "../components/LodingBar";

const TodoList = () => {
  const { data, isLoading } = useGetToDo();

  return (
    <Container>
      <LoadingBar isLoading={isLoading} />
      {data?.map((todo: TodoMD) => (
        <SingleTodo key={todo.id} {...todo} />
      ))}
    </Container>
  );
};

export default TodoList;

👉 useGetToDo hook을 사용해서 간단하게 데이터를 불러오고, 로딩상태인지 아닌지를 판단해서 로딩중이면 로딩 상태를 표시한다. 

 

 

5. 관심사 분리하기 (2)

auth 요구사항이 아래와 같았다. 

• 이메일 조건 : 최소 @, . 포함
•  비밀번호 조건 : 8자 이상 입력
•  이메일과 비밀번호가 모두 입력되어 있고, 조건을 만족해야 제출 버튼이 활성화 되도록 해주세요

refactoring 전

//Auth.tsx

const changeButtonHandler = () => {
    email.includes("@") && password.length >= 8
      ? setIsActive(true)
      : setIsActive(false);

👉 이메일과 비밀번호 input 에서 onKeyUp 이벤트를 활용하는 식으로 했다. (관심사 분리 X)

 

 

refactoring 후

//Auth.tsx

import { emailCheck, passwordCheck } from "../../utils/validator";

const validatorHandler = () => {
    if (emailCheck(email) && passwordCheck(password)) {
      setIsActive(true);
    } else {
      setIsActive(false);
    }
  };

// validator.ts

function emailCheck(email: string): boolean {
  if (email.includes("@") && email.includes(".")) {
    return true;
  } else {
    alert("올바른 이메일 형식이 아닙니다.");
    return false;
  }
}

function passwordCheck(password: string) {
  if (password.length >= 8) {
    return true;
  }
}

export { emailCheck, passwordCheck };

👉 auth의 요구사항을 확인하는 부분을 validator.ts 함수로 따로 분리하였다.

 

그래서 추가적인 요구사항이 생기거나 문제사항이 발생했을때 읽어야 하는 코드의 단위가 줄어들어서 코드에 대한 파악이 빨라지므로 문제를 효과적으로 해결할 수 있다!!