안녕하세요! 오늘은 React와 TypeScript를 활용하여 간단한 투두(To-Do) 앱을 개발한 경험을 공유하고자 합니다. 이 앱은 기본적인 투두 리스트 기능을 제공하며, 사용자가 할 일을 추가하고, 체크하고, 삭제하고, 완료 여부에 따라 필터링 할 수 있는 기능을 포함하고 있습니다. 그럼 시작해보겠습니다!투두 앱 개발 개요투두 앱은 사용자가 할 일을 관리할 수 있도록 도와주는 유용한 도구입니다. React의 동작 원리를 이해하기 위해 언급되는 프로젝트이기도 하죠. 저 또한 이번에 React의 동작 원리를 이해하기 위해 투두 앱을 개발하게 되었습니다.처음 React를 접했을 때 만든 투두 앱과 시간이 흘러 지금 다시 만드는 투두 앱은 어떨까 기대가 되고 감회가 새로웠습니다. 이번 프로젝트에서는 Rea..

구현 기능 Router 설정 Global Style 적용 레이아웃 설정 헤더 유저 메뉴 로고 이미지 사이드바 반응형 이벤트 반응형 레이아웃 푸터 1. Router 설정 App 컴포넌트 내에 react-router-dom RouteProvider 추가 코드 스플리팅을 위한 라이브러리 Loadable Component react-router-dom에서 제공하는 createBrowserRouter로 router 객체를 생성 path, element, (children) 속성 작성 기본 element는 컴포넌트로 설정하고 해당 컴포넌트 내에 헤더, 사이드바, 푸터를 넣었다. 그리고 react-router 에서 제공하는 을 넣어주면 끝 은 부모 라우트에서 자식 라우트 엘리먼트를 렌더할 때 사용되는데, 중첩 UI를..

💡 CRA 아닌 Vite 사용한 이유리액트 프로젝트를 시작하는 가장 간결한 방법은 `CRA(Creat-React-App)`일 것이다.기존에 번들러(여러 파일을 하나로 묶어주는 도구) 기반 개발은 소스 코드 업데이트 시 번들링 과정을 다시 거쳐야 한다. 때문에 소스 코드 갱신 시간이 오래 걸린다.CRA의 webpack 기반이고, react 이외의 webpack, babel, eslint 등 복잡한 패키지를 알 필요가 없이 사용할 수 있어 간편하다.CRA는 각 설정 파일들이 숨겨져 있어, eject 하지 않고 overriding 하려면 `craco`라는 패키지가 필요하다.`Vite`는 ESbuild라는 자바스크립트 빌드 툴을 사용하는데, 이것이 webpack을 대체한다.브라우저에서 제공하는 ES Modul..