chLog

React 기본 정리📌 React 란?✅ 사용자 인터페이스(User Interface, UI)를 구축하기 위한 자바스크립트 라이브러리📌 프레임워크 VS 라이브러리프레임워크 (frame 틀 + work 일하다)✅ 전체적인 시스템 제공✅ 프레임워크가 개발자를 제어✅ 기반 구조: 뷰 레이어 + 모델 + 컨트롤러📌 라이브러리✅ 특정 기능을 수행하는 코드의 집합✅ 개발자가 라이브러리를 제어✅ 단순 도구의 모음 (필요한 기능만 사용)✅ React는 라이브러리이며, 뷰 레이어에만 집중✅ 모델, 컨트롤러는 외부 라이브러리와 함께 조합📌 React 특징🔷 선언적 뷰상태(state)를 기반으로 명시적이고 직관적인 UI 정의상태가 변할 때 React가 자동으로 화면 갱신🔷 컴포넌트 기반UI를 독립적이고 재사용 가..

📌 Zustand를 활용한 React 전역 상태 관리🔹 Zustand란?독일어로 '상태(state)'를 뜻하는 단어React Hooks 기반의 경량 전역 상태 관리 라이브러리최소한의 API로 간단하게 전역 상태를 생성하고 사용할 수 있음📦 설치 방법:npm install zustand🔹 Zustand의 장점🧩 간결성최소한의 코드로 상태 관리🔄 유연성여러 상태 조각을 하나의 저장소에서 결합🔹 Zustand 기본 사용법1️⃣ 전역 상태 저장소(store) 생성// store/count.store.tsimport { create } from "zustand";interface CountState { count: number; increment: () => void; decrement: () ..

📌 VSCode에서React 개발 환경 설정✅ 1) npm create vite@latestVite를 사용해 react를 사용하는 프로젝트를 생성합니다.1️⃣ 프로젝트를 생성할 폴더의 통합터미널 열기2️⃣ npm create vite@latest 명령어 입력Project name: 프로젝트 폴더명 Package name: package.json의 "name": 속성값 으로 지정 Select a framework: React Select a variant: TypeScript프로젝트가 생성 완료된 모습✅ 2) npm installpackage.json 에 의존성을 설치합니다✅ 3) npm run dev개발 서버를 실행하는 명령어 입니다.정상적으로 설정이 완료되면 해당 화면이 출력됩니다.💡 핫 리로..