🧭 RouteReact Router를 사용해 페이지들의 라우트를 작성해주려 한다. 설치`npm install react-router-dom @types/react-router-dom --save` 사용// App.tsximport { createBrowserRouter, RouterProvider } from "react-router-dom";const router = createBrowserRouter([ { path: "/", element: , }, { path: "/books", element: 도서 목록 }])function App() { return ( );}주소에 맞는 화면이 잘..

🫟 기본 컴포넌트 작성1️⃣ Title 컴포넌트// theme.tsexport type HeadingSize = `large` | `medium` | `small`;interface Theme { name: ThemeName; color: Record; heading : { [key in HeadingSize]: { fonstSize: string; }; }}export const light: Theme = { name: `light`, color: { primary: `brown`, background: `lightgray`, secondary: `blue`, third: `..

🎡 레이아웃 구성필요성프로젝트의 기본적인 화면 구조 잡기반복적으로 들어가야하는 헤더, 푸터 등을 매 화면마다 제공상황과 필요에 따라 레이아웃이 변경될 수 있도록 대비싱글페이지앱은 주로 컴포넌트의 조합으로 이루어진다.화면마다 공통된 컴포넌트도 있고 페이지마다 있거나 없는 컴포넌트도 존재한다.이런 전체적인 틀을 잡아주기 위해 필요하다. 생성import Footer from "../common/Footer";import Header from "../common/Header";interface LayoutProps { children: React.ReactNode;}function Layout({ children }: LayoutProps) { return ( ..

⚡️ 생성종류CRA (Create React App)Vite특징• 초기 설정과 구성 자동화로 빠르게 생성 가능• 웹팩, 바벨을 사용해 개발 서버 실행• 개발 시 개발 코드를 변경하면 화면에 바로 적용하는 핫모듈 리로딩• 빠른 속도와 효율• 모듈 단위로 빌드해 웹팩모다 속도 빠른 롤업으로 빌드• 빠른 핫모듈 리로딩과 빌드 시간 최소화를 위해 ES모듈 사용설치`npx create-react-app 프로젝트명 --template typescript``npm create vite@latest 프로젝트명 -- --template react-ts`node_modules설치를 생략하므로 생성 이후 `npm install` 실시실행`npm run start``npm run dev` 두 방식의 `package.jso..

👆🏻 Drag And Drop 기능 구현🚨 강사님께서는 `react-beautiful-dnd`를 사용하셨지만 해당 라이브러리는 유지보수 중단된 라이브러리로 현재 리액트 버전과 맞지 않아 에러가 발생해 같은 기능을 제공하는 `@hello-pangea/dnd`를 사용했다. GitHub - hello-pangea/dnd: 💅 Beautiful and accessible drag and drop for lists with React. ⭐️ Star to support our work!💅 Beautiful and accessible drag and drop for lists with React. ⭐️ Star to support our work! - hello-pangea/dndgithub.com설치 `..

✏️ 할 일 수정하기const modalActive = useTypedSelector(state => state.boards.modalActive);return ( // ... {modalActive ? : null} // ...)할 일을 클릭하면 수정 또는 삭제할 수 있는 모달이 나오도록 하였다. const handleNameChange = (e: ChangeEvent) => { setData({ ...data, task: { ...data.task, taskName: e.target.value } })}const handleDescriptionChange = (e: ChangeEvent) => { setData({ ...data, task:..

📌 clsx()조건부로 className을 결합하고 관리하는 데 사용하는 라이브러리 GitHub - lukeed/clsx: A tiny (239B) utility for constructing `className` strings conditionally.A tiny (239B) utility for constructing `className` strings conditionally. - lukeed/clsxgithub.com  b.boardId === activeBoardId) === index, }, { [boardItem]: boardArray.findIndex(b => b.boardId === activeBoardId) !== index } ..

⚙️ 패키지 설치`npm` : 패키지를 가져와 `node_modules`에 설치해서 사용`npx` : 패키지를 가져오는 것은 동일하지만 `node_modules`에 설치하진 않음1. `npm init vite` : vite로 리액트 프로젝트 생성2. `npm i` : 필요한 라이브러리 설치 3. `npm run dev` : 리액트 실행 추가 설치 패키지더보기npm install @reduxjs/toolkit redux clsx @vanilla-extract/css @vanilla-extract/css-utils @vanilla-extract/vite-plugin react-icons uuid react-beautiful-dnd react-redux• `clsx` : 클래스 이름을 동적으로 만들기 위해 사..