[58일차]개발 효율성 및 협업 프로세스 개선 방법들

1. KPT 회고 방법

KPT 회고는 프로젝트나 스프린트가 끝난 후 팀이 성장하기 위해 진행하는 회고 방식 중 하나이다.
단순히 무엇을 잘했고 못했는지를 나열하는 것에 그치지 않고, "다음 액션 아이템(Try)"을 도출하여 실질적인 개선을 이끌어내는 데 목적이 있다.

KPT는 다음 세 가지 요소로 구성된다:

1. Keep (유지할 점): 프로젝트 진행 중 좋았던 점, 성과가 있었던 부분이다. 다음에도 계속 유지해야 할 긍정적인 요소들을 기록한다.
2. Problem (문제점): 진행 중 겪었던 어려움이나 아쉬웠던 점이다. 비난이 아닌 현상 자체에 집중하여 문제의 원인을 찾는다.
3. Try (시도할 점): Problem에서 도출된 문제를 해결하기 위해 구체적으로 시도할 액션 아이템이다. 당장 실행 가능한 해결책이어야 한다.

---

2. 절대경로로 변경 (CRACO)

React 프로젝트(CRA)를 진행하다 보면 컴포넌트 구조가 깊어질수록 파일을 import 할 때 ../../../components/Button과 같은 상대 경로 지옥(Relative Path Hell)을 마주하게 된다.
이러한 상대 경로는 가독성을 해치고, 파일 위치를 이동시킬 때마다 경로를 수정해야 하는 번거로움이 있다.

절대 경로(Absolute Path)를 사용하면 src 폴더를 기준으로 @/components/Button처럼 직관적인 경로 설정이 가능하다. 하지만 CRA(Create React App)는 기본적으로 Webpack 설정을 숨겨두고 있어 이를 수정하려면 eject를 해야 한다. CRACO(Create React App Configuration Override)는 eject를 하지 않고도 Webpack 설정을 덮어씌워(Override) 안전하고 쉽게 절대 경로를 설정할 수 있게 도와준다.

사용 방법 (설정 순서)

1. 패키지 설치:

   npm install @craco/craco
   npm install -D craco-alias # 필요시 별칭 플러그인 설치

2. 프로젝트 루트에 craco.config.js 파일 생성 및 작성:

   const path = require('path');
   
   module.exports = {
     webpack: {
       alias: {
         '@': path.resolve(__dirname, 'src/'), // '@'를 src 폴더로 매핑
       },
     },
   };

3. jsconfig.json (또는 TypeScript 사용 시 tsconfig.json) 설정:

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

4. package.json 스크립트 수정:
   기존 react-scripts로 되어 있는 부분을 craco로 변경한다.

   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
     "eject": "react-scripts eject"
   }

---

3. 스니펫 (Snippet)

스니펫은 자주 사용하는 코드 패턴이나 상용구(Boilerplate)를 단축어 입력만으로 자동 완성해 주는 기능이다.
개발자는 반복적인 코드 작성을 줄여 타이핑 시간을 단축하고, 오타를 방지하여 개발 생산성을 극대화하기 위해 스니펫을 사용한다.

예를 들어, React 컴포넌트를 생성할 때 매번 import React... const Component ... export default ...를 치는 대신, rafce라는 단축어만 입력하면 전체 구조가 자동으로 생성되는 원리이다. VS Code와 같은 에디터에서 기본 제공하거나 확장을 통해 커스터마이징할 수 있다.

---

4. TanStack Query (React Query)

TanStack Query는 React 애플리케이션에서 서버 상태(Server State)를 효율적으로 관리하기 위해 사용하는 라이브러리이다.
기존에는 서버 데이터를 관리하기 위해 useEffect와 useState를 사용하여 로딩(Loading), 에러(Error), 데이터(Data) 상태를 일일이 구현해야 했다. 또한, 데이터가 최신인지 확인하고(Synchronizing), 중복 요청을 방지하며(Caching), 백그라운드에서 업데이트(Fetching/Updating)하는 로직을 직접 짜는 것은 매우 복잡하다.

이 라이브러리는 이러한 Fetching(가져오기), Caching(캐싱), Synchronizing(동기화), Updating Server State(서버 상태 업데이트) 작업을 자동화하여, 개발자가 비즈니스 로직에만 집중할 수 있게 도와준다.

코드 비교

1. 라이브러리 사용 전 (Standard useEffect & useState)

서버 상태를 관리하기 위해 로딩, 에러, 데이터를 모두 수동으로 관리해야 한다. 코드가 길어지고 중복 로직이 발생하기 쉽다.

import React, { useState, useEffect } from 'react';

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        setIsLoading(true);
        const response = await fetch('https://api.example.com/users');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setUsers(data);
      } catch (error) {
        setIsError(true);
      } finally {
        setIsLoading(false);
      }
    };

    fetchUsers();
  }, []);

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error occurred!</div>;

  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
};

2. 라이브러리 사용 후 (TanStack Query)

useQuery 훅 하나로 로딩, 에러, 데이터 상태를 모두 처리한다. 또한 자동으로 데이터를 캐싱하고 필요시 재요청(Refetch)하는 기능이 내장되어 있다.

import React from 'react';
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

// Fetcher 함수 분리
const fetchUsers = async () => {
  const { data } = await axios.get('https://api.example.com/users');
  return data;
};

const UserList = () => {
  // useQuery(고유 키, Fetcher 함수)
  const { data: users, isLoading, isError } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  });

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error occurred!</div>;

  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
};