09009

1. 페이지 컴포넌트 생성src/pages/todo-list-page.tsxtailwind css로 인해 기본 스타일이 모두 초기화되었으므로 classname으로 직접 스타일 지정export default function TodoListPage() { return ( TodoList );} 2. 페이지 라우팅 설정App.tsx} />import { Outlet, Route, Routes } from "react-router";import "./App.css";import IndexPage from "./pages/index-page";import SignInPage from "./pages/sign-in-page";import SignUpPage from "./pages/si..

카운트 기능을 각각의 컴포넌트로 분리src/components/counter/viewer.tsximport { useCountStore } from "@/store/count";export default function Viewer() { const { count } = useCountStore(); return {count};} src/components/counter/controller.tsximport { Button } from "@/components/ui/button";import { useCountStore } from "@/store/count";export default function Controller() { const { increase, decrease } = useCount..

Terminal - Zustand 설치npm i zustand 카운터 페이지 생성src/pages/counter-page.tsxexport default function CounterPage() { return ( Counter );} App.tsximport CounterPage from "./pages/counter-page";} />import { Outlet, Route, Routes } from "react-router";import "./App.css";import IndexPage from "./pages/index-page";import SignInPage from "./pages/sign-in-page";import SignUpPage from "./pages..

터미널에 리액트 라우터 설치npm i react-router@7 설치 후 npm run dev 실행npm run dev main.tsxBrowerRouter : 브라우저의 주소를 리액트 앱이 감지할 수 있도록 하여 UI와 동기화브라우저 라우터가 앱 컴포넌트를 감싸도록 반드시 설정해주어야 한다.import { createRoot } from "react-dom/client";import "./index.css";import App from "./App.tsx";import { BrowserRouter } from "react-router";createRoot(document.getElementById("root")!).render( ,); App.tsx라우팅은 간단하게 아래와 같이 설정impo..

https://ui.shadcn.com/docs/components/base/input컴포넌트 다운 링크 InputA text input component for forms and user data entry with built-in styling and accessibility features.ui.shadcn.com App.tsximport "./App.css";import { Button } from "./components/ui/button";function App() { return ( 버튼 버튼 ! 버튼 ! 버튼 ! 버튼 ! 버튼 ! );}export default App; npx..

공식 문서https://ui.shadcn.com/ The Foundation for your Design System - shadcn/uiA set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.ui.shadcn.com 설치 가이드 문서https://ui.shadcn.com/docs/installation InstallationHow to install dependencies and structure your app.ui.shadcn.comhttps://ui.shadcn.com/docs/installatio..

https://tailwindcss.com/docs/font-family font-family - TypographyUtilities for controlling the font family of an element.tailwindcss.com App.tsximport "./App.css";function App() { return ( {/* 1. 타이포그래프 : 텍스트 스타일 설정 */} text-xs text-sm text-lg text-xl text-2xl text-13px {/* 2. 바탕 색상 */} amber-500 {/* 3. 사이즈 */} ..

TailWind css 설치https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.tailwindcss.com Get Started 버튼 클릭 설치 설명 페이지 : https://tailwindcss.com/docs/installation/using-vite Installing with Vite - InstallationIntegrate Tailwind CSS with framew..

가장 최신 버전의 create vite 도구를 이용하여 onebite-exam이라는 새로운 리액트 앱 생성npm create vite@latest onebite-exam vscode에서 "폴더 열기" 클릭 후 리액트를 설치한 폴더 접속 eslint.config.jsrules 추가import js from "@eslint/js";import globals from "globals";import reactHooks from "eslint-plugin-react-hooks";import reactRefresh from "eslint-plugin-react-refresh";import tseslint from "typescript-eslint";import { defineConfig, globalIgnores..

전역 상태 : 글로벌한 state 값을 새롭게 생성, 수정할 수 있도록 관리하는 것- React App의 모든 컴포넌트에서 접근할 수 있어야 하는 데이터들을 전역 상태로 관리하는 것- ex) 사용자의 인증 정보, 테마 정보, 장바구니 정보 전역 상태 관리 없이는 props만을 이용해서 한 단계 아래의 자식 컴포넌트에게만 데이터를 전달할 수 있다. Context API : 전역 상태 관리를 위한 기능이라기보다, Props Drilling 문제를 해결하기 위해 제공하는 기능범용적인 전역 상태 관리보다는 국소적인 데이터 공유를 위해 더 자주 사용됨. 전역 상태 관리를 돕는 도구 - Redux, Zustand, MobX 등 Zustand- 많은 사람들이 사용함- 용량이 매우 가벼움- 매우 직관적이어서 배우기..

사전 렌더링브라우저의 요청에 사전에 렌더링이 완료된 html을 응답하는 렌더링 방식 클라이언트 사이드 렌더링 (CSR)React.js 앱의 기본적인 렌더링 방식클라이언트(브라우저)에서 직접 화면을 렌더링하는 방식페이지 이동이 매우 빠르고 쾌적한 장점이 있다. 하지만, 초기 접속 속도가 느리다.FCP : 요청 시작 시점으로부터 컨텐츠가 화면에 처음 나타나는데 거리는 시간 장점 : 초기 접속 이후의 페이지 이동이 빠르다.단점 : FCP (초기 접속 속도)가 느림 Next.js : 기존 리액트 앱의 이러한 문제점을 해결하기 위해 사전 렌더링 프로세스를 제공함.서버 측에서 사전에 렌더링이 완료된 html을 보내준다. 사전 렌더링 방식은 기존에 느린 클라이언트 사이드 렌더링의 초기 접속 속도를 빠르게 개선함.그..

useReucer- 컴포넌트 내부에 새로운 state를 생성하는 리액트 훅- 모든 useState는 useReducer로 대체 가능상태 관리 코드를 컴포넌트 외부로 분리 가능 Exam.jsxconst Exam = () => { return exam;};export default Exam; App.jsximport { useState, useRef } from "react";import "./App.css";import Header from "./components/Header";import Editor from "./components/Editor";import List from "./components/List";import Exam from "./components/Exam";// 임시 데이터 생성..