[프리온보딩챌린지] 첫번째 리팩토링

프리온보딩 챌린지 첫번째 강의를 듣고, 지금까지 스스로 했던 부분을 리팩토링 해보려고 한다.

 

1. 관심사의 분리

2. api 로직의 추상화

3. 사용자 피드백 UI 추가

 

1. 관심사의 분리

코드가 하나의 문제, 관심사에 대해서만 충실하게 동작해야 한다. 하나의 코드 안에 여러 가지 동작이 함께 들어있으면 코드가 어떤 기능을 하는지 흐름을 파악하기 힘들고, 코드의 길이도 길어 읽기에도 힘들다.

 

1.1 Route 분리

지금까지는 Route 로직을 따로 분리하지 않고 App.tsx내부에 나열하듯이 코드를 작성하였다.

지금은 프로젝트의 크기가 작아서 Route 분기가 적어 크게 문제가 없어 보이지만

프로젝트 페이지 수가 많아지면 App.tsx 내부 Route 로직이 길어질 수 있기 때문에 

Route로직을 따로 분리하여 관리해주도록 하였다.

 

그리고  '/todo' 를 공통 경로를 가지고 하위 경로에 따라 다른 화면이 보여지게 되는데 무작정 나열만 해놓은 부분도 

 

<Before>

// App.tsx
import React from "react";
import { Routes, Route } from "react-router-dom";
import styled from "styled-components";

import GlobalStyle from "./components/GlobalStyle";
import Main from "./pages/Main";
import Auth from "./pages/Auth";
import Todo from "./pages/Todo";
import TodoForm from "./components/TodoForm";
import TodoDetail from "./pages/TodoDetail";

const ContentWrapper = styled.div`
  position: relative;
  height: 100vh;
`;

function App() {
  return (
    <ContentWrapper>
      <GlobalStyle />
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/auth" element={<Auth />} />
        <Route path="/todo" element={<Todo />} />
        <Route path="/todo/new" element={<TodoForm />} />
        <Route path="/todo/edit" element={<TodoForm />} />
        <Route path="/todo/:id" element={<TodoDetail />} />
      </Routes>
    </ContentWrapper>
  );
}

export default App;

<After>

// Router/index.tsx

...

function TodoRoute() {
  return (
    <Routes>
      <Route path="/" element={<Main />} />
      <Route path="/auth" element={<Auth />} />
      <Route path="/todo" element={<Todo />}>
        <Route path="new" element={<TodoForm />} />
        <Route path="edit" element={<TodoForm />} />
        <Route path=":id" element={<TodoDetail />} />
      </Route>
    </Routes>
  );
}

export default TodoRoute;

// App.tsx
...

import TodoRoute from "./routes";

...

function App() {
  return (
    <ContentWrapper>
      <GlobalStyle />
      <TodoRoute />
    </ContentWrapper>
  );
}

export default App;

 

1.2 로그인 / 회원가입시 폼 검증 로직

로그인 / 회원가입시 각 input에 들어가는 값을 검증하는 로직을 컴포넌트 내부에 직접 구현했던 것을 모듈로 분리하여 import해서 사용할 수 있게끔 해주었다.

 

 

2. api 추상화

그 동안 api 로직을 짜면서 별다른 추상화하여 효율적으로 사용해보지 못했다.

이번 리팩토링에서 api 로직을 추상화해서 이전보다 효율적인 코드를 작성해보려고 한다.

 

axios.create로 apiClient를 만들어 api 요청 공통사항 모듈화

import axios from "axios";

export const apiClient = axios.create({
  baseURL: "http://localhost:8080",
});

여기서 auth 요청 관련 로직은 Header가 필요없었지만, todo 관련 로직은 auth 값을 Header에 포함하여 사용해야한다. 여기서 client를 todo와 auth 두 개를 만들어야할까도 잠시 고민했었지만, 동일한 역할을 하는 client가 두 개가 생기는 것이라고 생각해서, todo에 필요한 auth Header 값은 각 요청에서 전달하는 방향으로 리팩토링하였다.

 

위에서 만든 Client에서 baseURL이 선언되어 있기 때문에 기존에 URL 전체를 통해 요청하던 코드를 아래와 같이 수정했다.

const login = async (email: string, password: string) => {
  try {
    const response = await apiClient.post<Data>("/users/login", {
      email,
      password,
    });

  ...
};