Todos Project
개요
클론할 소스 없이 백지 상태에서 직접 설계하고 구현하는 방식을 통해
React / Next.js 기반의 모던 프론트엔드 스택이 실제로 어떻게 동작하는지를 이해하고
라이브러리 사용법이 아닌 구조와 흐름 중심의 개발 감각을 체화하는 것을 목표로 진행한 프로젝트입니다.
사용한 기술
- React
- Custom Hook
- Components
- Next.js
- TypeScript
- TailwindCSS
프로젝트 목적
클론할 소스 없이 백지 상태에서 직접 설계하고 구현하는 방식을 통해
React / Next.js 기반의 모던 프론트엔드 스택이 실제로 어떻게 동작하는지를 이해하고
라이브러리 사용법이 아닌 구조와 흐름 중심의 개발 감각을 체화하는 것을 목표로 진행한 프로젝트입니다.
설계 포인트
- 비즈니스 로직과 UI 로직을 분리하기 위해
Custom Hook(useTodos) 구조로 상태 관리 로직 분리 - 상태 변경 흐름을 명확히 하기 위해
*Reducer + Selector 패턴 도입 (상태 변경과 UI 계산 로직을 분리) - 새로고침 이후에도 상태를 유지할 수 있도록
쿠키 기반 저장 방식 적용 - 조건부 클래스 조합의 가독성을 높이기 위해
clsx를 활용한 스타일링 패턴 정리
구조를 선택한 이유
- 상태가 컴포넌트 전반에 흩어지는 것을 방지하여
상태 파편화를 최소화 - UI 표현과 비즈니스 로직을 분리해
유지보수성과 가독성 개선 - 이후 기능 추가(삭제, 무한 스크롤, UX 개선 등)를 고려한
확장 가능한 구조 설계
이 프로젝트를 통해 얻은 것
- Next.js와 Vue.js의 공통점과 차이점, 설계방식을 체득하여
새로운 프레임워크에서도 빠르게 구조를 이해하고 적응할 수 있게 됨 - React / Next.js의 컨벤션을 직접 적용하고 고민하는 과정을 통해
새로운 개발 환경에서도 부담 없이 개발을 이어갈 수 있는 자신감과
구조를 먼저 고민하는 개발 기준을 수립
프로젝트 완료를 위해 남은 과제
- UX coach mark를 통한 상태 설명 가이드 제공
- Todo 삭제 기능 추가
- 항목이 많아졌을 때를 고려한 Infinite Scroll 적용
- id 생성 방식 개선 (length 기반 → 고유값 전략)
- 모바일 중심 UI / UX 전면 개선
- Navigation에 적용한 입체적인 UI 스타일을
버튼, 탭, 카드 등 공통 컴포넌트 전반으로 확장