ruriruriya

Vite는 빠르고 가벼운 프론트엔드 빌드 도구로, 기존의 create-react-app보다 훨씬 빠르게 React 프로젝트를 설정할 수 있다. 1️⃣ Vite로 React 프로젝트 생성하기📌Vite 설치 및 프로젝트 생성Vite를 사용하려면 아래 명령어를 실행- my-project 는 프로젝트 폴더명이다. 원하는 이름으로 변경npm create vite@latest my-project --template react 설치가 완료되면 아래 명령어로 프로젝트 폴더로 이동한다.cd my-project 📌 의존성 설치설치가 끝나면 Vite 개발 서버를 실행할 준비가 완료된다.npm install 2️⃣ 개발 서버 실행하기Vite의 가장 큰 장점 중 하나는 빠른 개발 서버 실행 속도이다.(추천 이유)npm ru..

React를 사용하다 보면 DOM(Document Object Model)이라는 개념이 자주 등장한다.React는 일반 DOM과 다르게 가상 DOM(Virtual DOM)을 사용한다.그렇다면 일반 DOM과 가상 DOM의 차이점, 그리고 React에서 DOM이 어떻게 동작하는지 정리해보자. 1️⃣ DOM이란? ✅ DOM (문서 객체 모델, Document Object Model)HTML 문서를 브라우저가 이해할 수 있도록 객체 트리 구조로 변환한 것이다.즉, 웹페이지의 구조를 나타내는 프로그래밍 인터페이스라고 할 수 있다.📌 DOM의 예시HTML이 다음과 같다고 가정하자. 안녕, React! 클릭➡️ 브라우저는 이 HTML을 DOM 트리 구조로 변환한다.Document ├── ├── ..

react에서는 네비게이션 바를 어떻게 만들까?react-router 라이브러리로 모듈화 시키고 간편하게 라우팅 설정을 할 수 있다. react-router 주요 기능동적 라우팅( Dynamic Routing) : 사용자가 특정  URL에 접근할 때 해당 URL에 필요한 컴포넌트를 렌더링라우트 가드(Route Guards) : 사용자 인증 상태 등에 따라 특정 라우트를 제한할 수 있음.레이아웃 관리 : 'Outlet'과 같은 기능을 통해 페이지 레이아웃을 쉽게 관리데이터 로딩 전략 : 로딩과 페칭을 효율적으로 처리하기 위한 'Loader' 기능이 제공코드 스플리팅(Code Splitting) :  'React.lazy'와 'Suspense'를 이용하여 필요한 라우트만 로드하고, 다른 페이지로 이동할 때 ..

src/index.js입구 파일전형적인 설정이 들어감은 App.js에서 태그를 불러와서 ui를 보여준다.App.jsfunction App(){} 이 안에서 ui를 제작함이 것에 대한 CSS는 App.css가 반영 됌.(index.js에도 index.css가 적용되어 있음.)id = rootroot id의 렌더링의 root는 public/index.html에 있음.