처음 React를 배울때 만들어봤던 To Do 앱을 다시 한번 만들어보고 싶은 마음이 생겼습니다. 본 글에서는 React로 만든 To Do 앱에 대한 내용을 설명합니다. 기술 스택 정의이전에는 CRA(Create React App)을 사용해서 프로젝트를 생성했으나, 이번에는 TypeScript와 Vite 기반의 프로젝트를 생성하여 진행했습니다. 언어: TypeScript번들러: Vite트랜스파일러: SWC기타 사용 라이브러리tailwindcsszustandreact-hook-formyupclassnamesdayjsprettierhusky vite 프로젝트 생성하는 방법에 대해 궁금하신 분은 아래 글을 참고해주세요 Bun 설치 및 React 프로젝트 생성하기Bun은 JavaScript 및 TypeScrip..

프로젝트를 시작하다보면 어떤 프로젝트 구조로 개발을 할지 고민을 하게 됩니다. 정해진 규칙은 없기 때문에 정답은 없지만, 본 글에서는 제가 개발하면서 유지보수하기 편했던 디렉토리 구조를 설명합니다. 소규모 & 중간규모 프로젝트 작은 규모의 프로젝트일 수록 디렉토리 구조는 단순하게 가져가는 것이 좋았습니다. 그래서 depth는 최대한으로 줄이고 컴포넌트, api, hook, 유틸리티 함수 등으로 디렉토리를 구분하였습니다. my-app/ │ ├── src/ │ ├── components/ # 재사용 가능한 컴포넌트 │ │ ├── common/ # 전역적으로 사용되는 컴포넌트 (버튼, 헤더, 푸터 등) │ │ └── BlogContainer # 블로그 컨테이너 컴포넌트 │ │ ├── index.tsx │ │ ..