[Inner Circle] 프로젝트 기획

이번에 하는 프로젝트는 전형적인 쇼핑몰 프로젝트인데, 특이한 점이라고 하면 SEO를 위해 SSR을 써야 한다.
또한 실시간 채팅 기능이 있어서 웹소켓을 통해 이를 구현하는 필수기능이 있다.

아래와 같이 개발 스택을 정했다.

프레임워크

• Next.js 15

언어

• TypeScript

툴

개발 생산성

• biome.js : 코드 포맷팅과 Linting을 같이 설정할 수 있음. 속도가 빠르다고 함.

기획 + 디자인

• creatie : AI를 활용한 디자인 툴이라고 함. UI는 figma와 매우 흡사함.
• figma

CSS

• tailwindCSS : 현재 회사에서 사용하고 있고, 팀원들도 대부분 써봤으며 요즘 css-in-js보다 tailwind가 많이 쓰인다고 함. 특히 나는 요소의 클래스명을 고민하지 않아도 돼서 상당히 편했음.
• ShadCN : 복붙해서 쓰는 UI 템플릿. tailwind 기반이라서 편함.

상태 관리 라이브러리

• Zustand : 나는 Redux만 사용해봤는데 개념이 비슷해서 쉬울 것 같았음. Zustand는 조금 더 가볍고 빠르며 보일러플레이트가 적어서 선택함.
• TanStack Query : 데이터 신선도를 관리하고 리페칭을 할 수 있게 함. 로딩, 성공, 에러 화면을 구현하기 쉬움.

// 예제 (TanStack Query + Error Boundary)

// API 요청 함수
const fetchProducts = async () => {
  const response = await fetch('/api/products');
  if (!response.ok) {
    throw new Error('상품을 불러오는데 실패했습니다.');    // 에러 발생시 throw
  }
  return response.json();
};

function ProductList() {
  const { data, isLoading } = useQuery({
    queryKey: ['products'],
    queryFn: fetchProducts,    // API 요청 함수
  });

  if (isLoading) return <div>로딩 중...</div>;

  return (
    <ul>
      {data.map((product: any) => (
        <li key={product.id}>
          {product.name} - {product.price}원
        </li>
      ))}
    </ul>
  );
}

// 에러 핸들러 컴포넌트
function ErrorFallback({ error, resetErrorBoundary }: any) {
  return (
    <div role="alert">
      <p>문제가 발생했습니다:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>다시 시도</button>
    </div>
  );
}

export default function ProductsPage() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}    // 에러 핸들러 컴포넌트. 자동으로 error, resetErrorBoundary props로 넘겨줌
      onReset={() => {
        // 여기에 쿼리 리프레시 로직을 넣을 수도 있음
        window.location.reload();
      }}
    >
      <ProductList />
    </ErrorBoundary>
  );
}

테스팅 라이브러리

• React Testing Library
• Vitest

번들링 툴

• TurboFan - Next.js 기본 번들링 툴. Rust 기반으로 파일들 병렬처리해서 빠름