🎯 KPT 회고를 통해 현재 문제점과 해야할 일을 파악하여 코드를 리팩토링합니다.

📗 Today I Learned

KPT 회고 (Keep, Problem, Try)

KPT는 소프트웨어 개발팀에서 주로 사용하는 회고 방법 중 하나로, 프로젝트나 작업을 돌아보며 어떤 점이 좋았는지(KEEP), 어떤 문제점이 있었는지(PROBLEM), 그리고 앞으로 무엇을 시도(KRY)해볼지 정리하는 방법론입니다.
출처: neuromagic

KEEP

앞으로도 유지하고 싶은 긍정적인 요소입니다.

• 회원가입 ~ 주문까지 경험

• 생산성 고려

• 데이터 흐름 맞추기

PROBLEM

문제점이나 개선이 필요한 부분입니다.

• 테마스위처 미적용

• import alias가 아쉽다.

• 중복코드가 있다.

• css 스타일링 정리

• 다양한 ui 패턴을 다루지 못함

TRY

시도해볼 개선 아이디어입니다.

• alias 적용

• 중복코드 제거

• useAuth 훅

• react-query 적용

• 테마스위처 재배치

• 다양한 ui 패턴

---

Alias 설정하기

Alias는 '별명', '통칭'이라는 뜻으로 복잡한 상대경로(../../../components/Example) 대신에 프로젝트 루트를 기준으로 짧고 의미 있는 경로(@/components/Example)를 사용할 수 있게 해주는 설정입니다.

CRACO

CRACO(Create React App Configuration Override)는 Create React App(CRA) 프로젝트에서 기본 제공되는 설정들을 eject 하지 않고도 커스터마이징할 수 있도록 도와주는 도구입니다.

🤔 왜 craco를 사용할끼?

CRA(Create React App)는 Webpack 설정을 직접 수정할 수 없기 때문에, react-scripts를 그대로 사용할 경우 alias 설정이 제한됩니다. 이를 해결하기 위해 CRACO를 사용하면 webpack, babel, eslint 등의 설정을 직접 수정하지 않고도 쉽게 오버라이드할 수 있습니다.

설치 방법

npm i -D @craco/craco craco-alias

• @craco/craco : CRA의 숨겨진 설정을 직접 수정할 수 있게 해주는 도구

• craco-alias : 경로 alias 설정을 쉽게 해주는 craco용 플러그인

🤔 craco-alias는 어떤 일을 도와줄까?

craco-alias 없이 alias 설정을 하려고 하면 webpack과 tsconfig 양쪽 다 수동 설정해야 하고, 실수나 오류가 나기 쉽습니다. craco-alias가 있으면, tsconfig.paths.json에 한 번만 설정하면 webpack과 tsconfig가 자동으로 동기화되기 때문에 편리해집니다.

tsconfig.path.json

파일을 만들어서 해당 내용을 넣어줍니다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

• baseUrl: "." : 프로젝트 루트를 기준으로 설정합니다.

• @/* → @를 src 폴더의 별칭으로 지정합니다. (ex: @/components/Box → src/components/Box)

tsconfig.json

설정한 tsconfig.paths.json 파일을 넣어줍니다.

...
  "extends": "./tsconfig.paths.json",

craco.config.js

const cracoAlias = require('craco-alias');

module.exports = {
  plugins: [
    {
      plugin: cracoAlias,
      option: {
        source: 'tsconfig',
        baseUrl: '.',
        tsConfigPath: 'tsconfig.paths.json',
        debug: false,
      },
    },
  ],
};

package.json

scripts를 craco 기반으로 수정합니다.

...
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    ...
  }

---

중복 제거

Layout과 Error를 각 페이지마다 중복하지 않기 위해 route 배열을 map()으로 순회하며 wrapping 처리합니다.

const routeList = [
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/books',
    element: <Books />,
  },
  {
    path: '/books/:bookId',
    element: <BookDetail />,
  },
  {
    path: '/cart',
    element: <Cart />,
  },
  {
    path: '/order',
    element: <Order />,
  },
  {
    path: '/orderlist',
    element: <OrderList />,
  },
  {
    path: '/signup',
    element: <Signup />,
  },
  {
    path: '/reset',
    element: <ResetPassword />,
  },
  {
    path: '/login',
    element: <Login />,
  },
];

const newRouteList = routeList.map((item) => {
  return {
    ...item,
    element: <Layout>{item.element}</Layout>,
    errorElement: <Error />,
  };
});

const router = createBrowserRouter(newRouteList);

HTTP Request Handler

반복되는 HTTP 요청 메서드를 하나의 함수로 묶어 method, url, payload만 넘기면 처리할 수 있도록 구성합니다.

// http.ts
type RequestMethod = 'get' | 'post' | 'put' | 'delete';

export const requestHandler = async <T>(
  method: RequestMethod,
  url: string,
  payload?: T
) => {
  let response;

  switch (method) {
    case 'post':
      response = await httpClient.post(url, payload);
      break;
    case 'get':
      response = await httpClient.get(url);
      break;
    case 'put':
      response = await httpClient.put(url, payload);
      break;
    case 'delete':
      response = await httpClient.delete(url);
      break;
  }

  return response.data;
};

사용 예시

/orders로 post 요청을 보냅니다.

import { requestHandler } from './http';

export const order = async (orderData: OrderSheet) => {
  return await requestHandler<OrderSheet>('post', '/orders', orderData);
};

---

snippet

자주 쓰는 코드 조각을 미리 저장해두고, 단축어로 빠르게 불러오는 기능입니다.

설치 및 사용방법

1️⃣Snippet Generator extension을 다운로드합니다.

import styled from 'styled-components';

export default function ${TM_FILENAME_BASE}() {
  return <Styled${TM_FILENAME_BASE}>${1:내용}</Styled${TM_FILENAME_BASE}>;
}

const Styled${TM_FILENAME_BASE} = styled.div`
  ${2:}
`;

• ${TM_FILENAME_BASE} → 지금 파일명(확장자 제외)을 자동으로 삽입해줍니다.

• ${1:내용} → 첫 번째 커서 포지션을 나타냅니다.

• ${2:} → 두 번째 커서 포지션을 나타냅니다.

2️⃣코드를 작성한 뒤에 전체 드래그를 하여 우클릭한 뒤 Generate Snippet을 눌러줍니다.

3️⃣코드에 해당되는 언어를 선택해줍니다.

4️⃣prefix(단축어)를 적어주면 적용됩니다.

생성된 snippet 템플릿을 확인할 수 있습니다.

{
  "Styled Component Template": {
    "prefix": "scomp",
    "body": [
      "import styled from 'styled-components';",
      "",
      "export default function ${TM_FILENAME_BASE}() {",
      "  return <Styled${TM_FILENAME_BASE}>${1:내용}</Styled${TM_FILENAME_BASE}>;",
      "}",
      "",
      "const Styled${TM_FILENAME_BASE} = styled.div`",
      "  ${2:}",
      "`;"
    ],
    "description": "Styled-component base template with file name"
  }
}

• prefix : 호출 키워드

• body : 실제 코드 템플릿

• description : 설명

---

useAuth.ts

로그인, 회원가입, 비밀번호 초기화 등 사용자 인증 관련 기능을 한 곳에 정리해 재사용성을 높이고 관심사를 분리합니다.

import { login, resetPassword, resetRequest, signup } from '@/api/auth.api';
import { LoginProps } from '@/pages/Login';
import { useAuthStore } from '@/store/authStore';
import { useNavigate } from 'react-router-dom';
import { useAlert } from './useAlert';
import { SignUpProps } from '@/pages/Signup';
import { useState } from 'react';

export const useAuth = () => {
  const { storeLogin, storeLogout, isLoggedIn } = useAuthStore();
  const navigate = useNavigate();
  const { showAlert } = useAlert();

  const userLogin = (data: LoginProps) => {
    login(data).then(
      (res) => {
        storeLogin(res.token);
        showAlert('로그인이 완료되었습니다.');
        navigate('/');
      },
      (error) => {
        showAlert('로그인에 실패하였습니다.');
      }
    );
  };

  const userSignup = (data: SignUpProps) => {
    signup(data).then((data) => {
      showAlert('회원가입이 완료되었습니다.');
      navigate('/login');
    });
  };

  const userResetPassword = (data: SignUpProps) => {
    resetPassword(data).then(() => {
      showAlert('비밀번호가 초기화되었습니다.');
      navigate('/login');
    });
  };

  const [resetRequested, setResetRequested] = useState(false);

  const userResetRequest = (data: SignUpProps) => {
    resetRequest(data).then(() => {
      setResetRequested(true);
    });
  };

  return {
    userLogin,
    userSignup,
    userResetPassword,
    userResetRequest,
    resetRequested,
  };
};

---

react-query

useEffect와 useState를 사용해 API 요청을 관리하던 기존 방식에서 react-query를 사용하면 캐싱, 상태관리, 리팩토링이 수월해집니다.

설치 방법

npm i @tanstack/react-query

App.ts 설정

QueryClientProvider로 감싸야 전역에서 사용할 수 있습니다.

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <BookStoreThemeProvider>
        <ThemeSwitcher />
        <RouterProvider router={router} />
      </BookStoreThemeProvider>
    </QueryClientProvider>
  );
}

기존 방식

기존에는 useState + useEffect로 데이터를 관리했습니다. 하지만 이 방식은 다음과 같은 단점이 있습니다.

• 로딩/에러 상태 직접 관리가 필요합니다.

• 캐싱이 없어 화면 이동 시마다 재요청을 해야합니다.

• 중복 코드가 많아집니다.

  const [books, setBooks] = useState<Book[]>([]);
  const [pagination, setPagination] = useState<Pagination>({
    totalCount: 0,
    currentPage: 1,
  });

  const [isEmpty, setIsEmpty] = useState(true);

  useEffect(() => {
    const params = new URLSearchParams(location.search);

    fetchBooks({
      category_id: params.get(QUERYSTRING.CATEGORY_ID)
        ? Number(params.get(QUERYSTRING.CATEGORY_ID))
        : undefined,
      news: params.get(QUERYSTRING.NEWS) ? true : undefined,
      currentPage: params.get(QUERYSTRING.PAGE)
        ? Number(params.get(QUERYSTRING.PAGE))
        : 1,
      limit: LIMIT,
    }).then((res) => {
      setBooks(res.books);
      setPagination(res.pagination);
      setIsEmpty(res.books.length === 0);
    });
  }, [location.search]);

🤔 캐싱(Caching)이 뭐지..?

한 번 가져온 데이터를 저장해뒀다가, 다음에 또 필요할 때 빠르게 꺼내 쓰는 기술입니다.
캐싱이 없으면 아무리 이미 본 페이지라도 다시 fetch를 하는 불필요한 작업을 하게 됩니다.

React Query는 한 번 가져온 데이터를 JavaScript 메모리(Heap)에 저장해두고 같은 queryKey로 요청을 하게 되면 서버에 안 보내고 바로 보여주게 됩니다.

React Query 방식

비동기 데이터를 더 쉽게 관리하고, isLoading, isError 등 상태도 함께 제공받을 수 있습니다.

  const { data: booksData, isLoading: isBooksLoading } = useQuery({
    queryKey: ['books', location.search],
    queryFn: () =>
      fetchBooks({
        category_id: params.get(QUERYSTRING.CATEGORY_ID)
          ? Number(params.get(QUERYSTRING.CATEGORY_ID))
          : undefined,
        news: params.get(QUERYSTRING.NEWS) ? true : undefined,
        currentPage: params.get(QUERYSTRING.PAGE)
          ? Number(params.get(QUERYSTRING.PAGE))
          : 1,
        limit: LIMIT,
      }),
  });

• queryKey : 쿼리 구분을 위한 식별자

• queryFn : 데이터를 가져오는 비동기 함수

---

✏️ 회고

캐싱에 대한 개념을 익히고 불필요한 fetch와 상태관리를 위해 생긴 react-query에 대해 익혔다. 항상 캐싱이 뭔지 궁금했는데 조금은 알게된 것 같아 기쁘다. ㅎㅎ