[Todo MVC] 1주차 : 프로젝트 setting⚙️을 해보자 !!

ujinsim·2025년 5월 4일

프로젝트 목적 및 목표

동아리에서 "우아한 리액트 타입스크립트" 책을 읽으며 TodoMVC 프로젝트를 진행하기로하였습니다 !

프로젝트를 시작하기 전, 이 프로젝트를 통해 어떤 걸 얻고 싶은지 먼저 정리해봤습니다.
크게 네 가지 목표 정했는데

리액트 훅을 효율적으로 활용하기
- 이전에는 훅을 단순히 "이럴 때 쓰는 거구나" 정도로만 이해하고 무조건 사용했던 경향이 있었습니다.
- 이번에는 "왜 이 훅을 써야 하는지", "지금 이 구조에서 최선인지" 등을 고민하며 제대로 활용해보고 싶습니다.
작고 명확한 컴포넌트 설계
- 예전에는 컴포넌트를 크고 뭉뚱그려 짰고, “어차피 나 혼자 볼 거니까” 라는 생각도 있었습니다.
- 하지만 이제는 하나의 책임만 가지는 컴포넌트 단위로 분리해, 재사용성과 유지보수성을 고려한 구조를 만들고자 합니다.
명확한 함수/변수 네이밍과 가독성 있는 코드 작성
- 함수명이 모호하거나 중복된 역할을 하는 경우가 많았습니다. 예를 들어, handlePrintSomething처럼 명확하지 않은 경우요.
- 이번엔 기능을 정확히 설명하는 네이밍, 그리고 꼭 필요한 주석만을 추가해 직관적인 코드 를 지향합니다.
상태 관리 최적화: useReducer + Context 적용
- props drilling으로 인한 렌더링 이슈를 줄이고, 상태를 더 깔끔하게 관리하기 위해 useReducer와 Context API를 적극 활용해보려 합니다.

추가적으로 프로젝트가 어느 정도 안정화되면
Jest와 React Testing Library를 도입해 테스트 코드를 작성하고,
변경에 강한 구조를 만들어보고 싶습니다.

1. 프로젝트 구성 선택: 왜 Vite + Tailwind인가?

요즘 많이 쓰이는 Next.js / Vite / Vanilla 중 고민이 있었지만, 최종적으로는 Vite + Tailwind 조합으로 결정했습니다.

왜 Vite?
SSR보다는 컴포넌트 구조와 훅 사용에 초점을 두고 있어, 빠르고 가벼운 환경의 Vite를 선택했습니다.
왜 Tailwind?
스타일링보다는 기능과 구조 설계에 집중하고 싶었기 때문에, 빠르게 UI를 구성할 수 있는 Tailwind를 도입했습니다

초기 설정 작업

프로젝트 생성: npm create vite@latest
Tailwind 설치 및 설정: npm install -D tailwindcss postcss autoprefixer

2. 코드 스타일 및 품질 도구 설정

Eslint + Prettier 설정

혼자 하는 프로젝트라고 해도 코드 가독성은 결국 미래의 나를 위한 투자라고 생각합니다.
나중에 다시 보았을 때 "이게 뭐였지?" 싶은 코드를 줄이기 위해,
초반부터 코딩 스타일을 통일하고 일관된 룰을 적용하기 위해 ESLint와 Prettier를 설정했습니다.

코드가 자동으로 정돈되어 시간도 절약되고
협업 시 스타일 충돌 없이 코드 리뷰에 집중할 수 있는 기반도 다질 수 있다고 생각합니다.

Husky 설정

혼자 하는 프로젝트라도 무심코 규칙을 어기면 프로젝트가 내부적으로 무너질 수 있다고 생각합니다.
그래서 Git hook을 통해 규칙을 강제하기 위해 husky를 설정했습니다.

3. 컴포넌트 설계 및 구조화

예전에는 ‘일단 기능부터 만들자’는 생각으로 코드를 짜왔지만,
이번 프로젝트에서는 개발에 들어가기 전에 컴포넌트의 역할을 먼저 설계하고 구조를 정리해보았습니다.

고민했던 포인트는 다음과 같아요:

어떻게 하면 각 컴포넌트가 하나의 책임만 가지도록 나눌 수 있을까?
추후에 재사용하거나 유지보수할 때 코드의 의도가 쉽게 드러날까?
props 전달이 너무 깊어지지 않게 설계할 수 있을까?

예상되는 컴포넌트 목록:

Button.tsx: 기본 버튼 UI 컴포넌트
Icon.tsx: 아이콘 처리 컴포넌트
TodoInput.tsx: 할 일 추가 입력창
TodoList.tsx: 투두 목록 전체를 보여주는 컴포넌트
TodoItem.tsx: 각각의 투두 항목
TodoFilter.tsx: 전체/완료/미완료 필터링 기능

필요한 훅 구성

useTodoController:
- 투두 추가/삭제/수정 같은 핵심 로직을 담는 훅
- 상태 조작은 이 훅에서만 일어나게 분리하는 것이 목표입니다.
useTodoFilter:
- 필터에 따라 보여줄 투두를 처리하는 훅
- 렌더링을 최소화하고, 조건별 필터링을 깔끔하게 분리하고 싶어요.
useEnterClick:
- 키보드에서 Enter를 눌렀을 때 동작을 감지하는 재사용 가능한 유틸성 훅

이렇게 미리 컴포넌트와 훅을 나눠 생각해두면,
구현을 시작할 때 불필요한 혼란을 줄일 수 있고 코드의 방향성도 명확해진다고 느꼈습니다.

4. 폴더 구조 설계

처음에는 FSD 패턴 도입을 고민했지만, 현재 다른 프로젝트에서 적용 중이므로 이번 프로젝트에서는 간단한 기능 중심 구조를 선택했습니다.

├── components
│   └── ... (UI 컴포넌트)
├── hooks
│   └── useTodoController.ts
├── contents
│   └── ... (상수, config 등)
├── assets
│   └── ... (아이콘, 이미지)
├── App.tsx
├── main.tsx