Frontend14 Vite + React + Tailwind 설치 가이드 1. 새 프로젝트 만들기터미널을 열고, 원하는 폴더에서 실행:npm create vite@latest my-app 프로젝트 이름: my-app (원하면 바꿔도 됨)프레임워크 선택: React언어 선택: JavaScript 또는 TypeScript (원하는 거)그다음:cd my-app npm install 2. TailwindCSS 설치Tailwind, PostCSS, Autoprefixer를 개발용 패키지로 설치:npm install -D tailwindcss@3 postcss autoprefixer @3을 붙인 이유: 최신 v4는 아직 npx tailwindcss init이 안 먹히는 경우가 많아서, v3가 안정적임. 3. Tailwind 초기화 파일 생성 npx tailwindcss init -p 자.. 2025. 8. 22. React Todo App 만들기 (Vite + useState + 데이터 흐름 이해) React Todo App 만들기 (Vite + useState + 데이터 흐름 이해)1. 프로젝트 목표할 일 등록 / 완료 체크 / 삭제 기능이 있는 간단한 Todo 앱 구현React의 상태 관리(State)와 데이터 흐름 원리 이해차후 클린코드 리팩토링 준비2. 개발 환경 세팅Vite로 프로젝트 생성cd "D:\react-toy\todo"npm create vite@latest . -- --template reactnpm installnpm run devnpm run dev 실행 후 표시된 로컬 주소로 접속하면 React 기본 페이지 확인 가능VS Code로 열어서 개발 진행3. React 기본 구조 이해src/ ├─ main.jsx // 앱 진입점, ReactDOM이 App 컴포넌트를 HT.. 2025. 8. 12. Vite와 Create React App(CRA) 비교 Vite와 Create React App(CRA) 비교1. 개요React 프로젝트를 시작할 때 대표적으로 사용되는 도구가 두 가지 있다.Vite: 빠른 개발 서버와 빌드 속도를 제공하는 차세대 빌드 도구Create React App(CRA): Webpack 기반의 초기 세팅 자동화 도구(오래된 표준)2. 비교 표항목ViteCreate React App(CRA)빌드 도구ESBuild(Go 언어 기반) + RollupWebpack개발 서버 시작 속도매우 빠름 (필요한 파일만 로드)느림 (전체 번들 후 시작)HMR(Hot Module Replacement)즉시 반영, 지연 거의 없음반영 속도 느림설정 변경설정 파일(vite.config.js)로 쉽게 수정 가능숨겨진 설정, 변경하려면 eject 필요최초 로딩 .. 2025. 8. 11. 생활코딩 React useReducer 실습 정리 1. 핵심 개념 먼저 이해하기 개념 설명state컴포넌트의 상태, 예: 숫자, 문자열, 객체 등action어떤 일이 일어났는지 설명하는 객체 (예: { type: 'UP' })dispatch액션을 reducer에 보내는 함수reducer현재 상태(state)와 액션(action)을 받아서 새로운 상태를 반환하는 함수비교 비유방식 비유useState손님이 직접 장부에 기록useReducer손님이 창구에 주문 → 회계 담당자가 장부를 처리2. 실습 단계별 요약[A] useState로 카운터 만들기목표: 버튼 3개 (-, 0, +)로 숫자 상태 변경순서:useState로 count 상태 만들기버튼 3개 만들기버튼 클릭 시 count 변경 (setCount 호출){count}으로 현재 값 출력코드 요약:cons.. 2025. 7. 27. React useReducer Reduecer1. useState, useReducer 개념 정리useState는?단순한 상태 하나를 다루기 쉬운 Hook값 변경 시 setState로 바로 수정예: 숫자 1개, 문자열 1개 상태 관리에 적합useReducer는?상태(state)를 관리하는 로직을 reducer 함수로 분리해서 처리액션(action)을 보내면, reducer가 판단해서 상태를 변경상태가 여러 개이거나 변경 로직이 복잡할 때 적합2. 실습 예제로 비교예제 시나리오: 숫자 카운터 (+, , 초기화)A. useState로 만들었을 경우import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return.. 2025. 7. 27. React State State란컴포넌트의 상태 데이터를 저장하는 공간컴포넌트에서 값이 바뀔 때마다 자동으로 **리렌더링(다시 실행)**하게 만듦React의 데이터 흐름, 화면 업데이트의 핵심예제로 보는 State 특징const [name. setName] = useState('data'); // name, setName 은 개발자가 지정 가능 state는 array를 리턴함indexvalue설명0현재 상태 name현재의 value를 읽는 데이터1바뀐 namesetName - 현재의 상태를 변경하는 함수 Props와의 차이구분PropsState역할부모 → 자식 데이터 전달컴포넌트 내부의 데이터변경자식에서 수정 불가컴포넌트 내부에서 변경 가능목적컴포넌트 재사용, 전달컴포넌트의 동적 변화 관리 State를 써야 하는 이유.. 2025. 7. 19. 이전 1 2 3 다음
