폴더 구조src/├── components/ 라우터 세팅npm i react-router-domrouter.jsximport { createBrowserRouter } from 'react-router-dom'import Default from './layout/Default'import MainPage from './pages/MainPage'import AboutPage from './pages/AboutPage'import NotFound from './pages/NotFound'import ShopPage from './pages/ShopPage'import BlogPage from './pages/BlogPage'import CartPage from './pages/CartPage'const ..

React Router란?React에서 라우팅을 구현하기 위한 표준 라이브러리웹 애플리케이션에서 여러 페이지를 쉽게 관리하고 내비게이션을 구현할 수 있게 해줌 🛠️ 설치npm i react-router-dom ✏️ 구현 방식1️⃣ createBrowserRouter + import { createBrowserRouter, RouterProvider } from "react-router-dom";const router = createBrowserRouter([ { path: "/", element: , },]);export default function Router() { return ;}React Router v6.4 이상부터 지원하는 새로운 방식라우팅 설정을 자바스크립트 객체 배열로 ..

✍🏻 개발 시작 전, 약식 기획서 작성해두면 훨씬 수월 !프로젝트 개요이 프로젝트는 어떤 용도로 만드는지 간단히 설명(예: "가위바위보 게임 웹앱")전체 와이프레임화면 흐름이 어떻게 되는지 대략적으로 그림으로 정리확정된 디자인이 있으면 첨부없다면 색상, 폰트, 버튼 스타일 정도라도 간단히비즈니스 로직 설명웹/앱이 어떤 규칙으로 동작하는 지 설명(예: 가위바위보 게임 → 유저 선택 → 컴퓨터 랜덤 선택 → 승패 판정)주요 기능 리스트프로젝트에 들어갈 핵심 기능 나열(예: 사용자 선택 , 컴퓨터 랜덤 선택, 승패 결과 표시, 리셋 기능) 📚 어디에 정리하면 좋을까?Figma→ 와이어프레임, 시안 정리하기 최고GitHub README→ 개발 전에 간단한 기획서 내용을 정리해두면→ 팀원이랑 공유하거나 기록용..

useState- 컴포넌트에 상태를 추가하는 Hook- 화면에 보여주는 데이터를 저장하고 변경할 수 있게 해주는 기능기본 사용법const [상태, 상태변경함수] = useState(초기값);const [state, setState] = useState(초기값);state: 현재 상태 값setState: 상태를 업데이트하는 함수초기값: 처음 렌더링 시 사용할 값 📍 특징1️⃣ 상태 업데이트상태를 업데이트하면 컴포넌트가 리렌더링 됨2️⃣ 중요한 규칙Hook은 컴포넌트 최상위 레벨에서만 호출조건문이나 반복문 안에서 사용 불가이벤트 핸들러나 생명주기 내에서 호출 가능3️⃣ 여러 상태 변수하나의 컴포넌트에 여러 상태 변수 사용 가능function 상품목록페이지() { const [검색어, 검색어변경] = us..

React 설치(feat. Vite)npm create viteProject name: my-react-appSelect a framework: ReactSelect a variant: JavaScriptnpm installnpm run dev✨ Vite를 사용하는 이유더보기1. 빠른 개발 서버Vite는 번들링 없이 네이티브 ES 모듈을 활용하여 매우 빠른 개발 서버를 제공기존의 webpack 기반 도구(create-react-app)보다 훨씬 빠르게 시작2. 빠른 핫 모듈 교체(HMR)코드를 변경할 때 페이지가 거의 즉시 업데이트되어 개발 경험이 크게 향상3. 최적화된 빌드프로덕션 빌드 시 Rollup(JavaScript 파일들을 번들링해주는 툴)을 사용하여 최적화된 결과물을 생성> 번들링: 여러 개의..

CSS 작성 방법론🔹 BEM (Block, Element, Modifier)이름뜻예시Block독립적인 하나의 컴포넌트menu, button, cardElementBlock의 하위 구성 요소menu__item, button__iconModifierBlock이나 Element의 변형/상태menu__item--active, button--large 제목 설명 텍스트 버튼.card { padding: 20px; border: 1px solid #ccc;}.card__title { font-size: 24px;}.card__description { color: #666;}.card__button { background: white; border: 1px solid #000;}.card__butt..

AnimaAutoHTML

컴포넌트- 특정 기능을 수행하는 독립적인 단위- 재사용 가능한 단위함수형 컴포넌트 ⬅️ 현재 많이 사용클래스형 컴포넌트 화살표 함수ES6에서 도입된 함수 표현식으로, 기존 function 키워드 대신 간결한 문법을 제공⚠️ this 바인딩이 다름기존 함수는 this가 호출된 객체를 가리킴화살표 함수의 this는 선언된 환경(렉시컬 컨텍스트)을 따름// 일반 함수const obj = { name: "Alice", sayHello: function () { console.log(this.name); },};obj.sayHello(); // "Alice"// 화살표 함수const obj = { name: "Alice", sayHello: () => { console.log(this.nam..