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

React 프로젝트에서 Path Aliasing을 설정하면, 복잡하고 긴 상대 경로 대신 짧고 명확한 경로로 모듈을 import할 수 있습니다. 본 글에서는 Path Aliasing을 설정하는 방법에 대해 설명합니다. Path Aliasing이란?Path Aliasing은 프로젝트 내에서 특정 경로를 별칭(alias)으로 정의하여 import 할 수 있도록 하는 기능입니다. 예를 들어, 아래 코드와 같이 길고 복잡한 경로 대신에import MyComponent from '../../../components/MyComponent';  다음과 같이 짧고 명확하게 코드를 작성할 수 있습니다.import MyComponent from '@components/MyComponent'; Vite에서 Path Alia..

Tailwind CSS는 유틸리티 기반의 CSS 프레임워크로, 개발을 빠르고 쉽게 만들 수 있습니다. 정말 빠르게 개발할 수 있다는 점에서 개인적으로 tailwindcss를 선호하는 편입니다. 본 글에서는 Vite 기반의 React 프로젝트에서 Tailwind CSS를 적용하는 방법에 대해 설명합니다. Vite 프로젝트 생성 및 기본 설정먼저 Vite기반의 React 프로젝트를 생성해야하는데, 아래 글을 참고하시면 좋습니다. Bun 설치 및 React 프로젝트 생성하기Bun은 JavaScript 및 TypeScript 프로젝트를 위한 번들러(bundler)입니다. 본 글에서는 Bun을 이용하여 React 프로젝트를 생성하는 방법에 대해 설명합니다. Bun 설치하기먼저, React 프로젝트를 생성하기 전b..