#React
← View all tags-
React 감정 일기장 CRA 설치부터 index.js까지: 앱 구동 원리 완전 이해
React 초보자를 위한 감정 일기장 앱 만들기 시리즈 1편. Create React App으로 프로젝트를 생성하고, index.html부터 index.js까지 React 앱이 브라우저에서 어떻게 시작되는지 처음부터 차근차근 배워봅니다.
-
React Router로 감정 일기장 SPA 구현: 동적 라우팅·useParams·Link 실습 가이드
React Router로 Home, New, Diary, Edit 페이지를 만들고 URL에 따라 다른 화면을 보여주는 SPA를 직접 구현합니다. 동적 라우팅, useParams, Link 컴포넌트 사용법까지 실습 코드로 배워봅니다.
-
React useState로 감정 일기 데이터 관리하기: Editor 컴포넌트와 이벤트 핸들러 완벽 정리
React useState로 감정 일기 데이터를 관리하는 방법을 실습합니다. Editor 컴포넌트 구축과 날짜·감정·내용 입력 처리, 이벤트 핸들러 작성과 데이터 불변성 원칙까지 리액트 초보자를 위한 단계별 가이드입니다.
-
React 재사용 컴포넌트 설계: Props 통신 EmotionItem·Button·Header 실전
React 컴포넌트를 작은 부품으로 분리해 재사용성을 높이는 방법을 실습합니다. EmotionItem, Button, Header 컴포넌트를 직접 만들고 Props를 활용한 컴포넌트 간 데이터 통신 패턴까지 완벽히 마스터합니다.
-
React 쇼핑몰 index.js·App.js 분석: 프로젝트 구조와 라우팅 흐름 완벽 정리
React 쇼핑몰 코드 분석 1편 — index.js 진입점부터 App.js까지 컴포넌트 연결 흐름을 추적합니다. 프로젝트 폴더 구조 설계와 React Router를 활용한 라우팅 방식 등 실전 서비스 개발 기초를 완벽 정리합니다.
-
React 쇼핑몰 상품 목록 컴포넌트 분석: 검색·정렬·필터 구현 완전 해부
React 쇼핑몰 코드 분석 2편 — map으로 상품 목록 렌더링, filter로 실시간 검색, sort로 정렬하는 핵심 로직을 useState와 연계하여 분석합니다. 실전 쇼핑몰 기능 구현의 핵심을 코드로 배웁니다.
-
React 감정 일기장 CRUD 완성: App.js onCreate·onUpdate·onDelete
React 감정일기장 시리즈 최종편! App.js에서 일기 데이터를 관리하고, CRUD 기능을 구현하여 완벽하게 작동하는 감정일기장 앱을 완성합니다. onCreate, onUpdate, onDelete까지 모든 기능을 통합합니다.
-
React 상품 상세 페이지와 장바구니 흐름: useParams·Redux dispatch 실전 분석
React 쇼핑몰 코드 분석 3편 — useParams 동적 라우팅과 상품 상세 페이지 구현 방식을 분석합니다. Redux dispatch로 장바구니에 추가되는 데이터 흐름을 추적하고 useSelector 상태 관리 패턴을 해부합니다.
-
Redux Toolkit createSlice·configureStore: 전역 상태 관리 실전
React 쇼핑몰 코드 분석 4편. Redux Toolkit의 createSlice로 액션과 리듀서를 한 번에 정의하는 방법과 configureStore로 전역 상태 관리 구조를 설계하는 방식을 코드로 완벽 이해합니다.
-
React 게시판 CRUD 구조 분석: 컴포넌트 간 데이터 전달과 상태 관리 실전 패턴
React 쇼핑몰 코드 분석 완결편 — 고객센터 게시판 CRUD 기능을 정밀 해부합니다. 컴포넌트 간 데이터 전달과 상태 관리로 Create·Read·Update·Delete가 유기적으로 동작하는 실전 패턴을 분석합니다.
-
Solid.js + Astro 조합, 정말 React를 대체할 수 있을까? (2026 실전 비교)
React 대안으로 떠오른 Solid.js와 Astro 조합의 실제 성능을 벤치마크로 검증했습니다. 가상 DOM 없는 Fine-grained Reactivity와 Islands Architecture로 번들 사이즈 60% 감소, TTI 30% 개선이 가능한지 실전 데이터로 분석합니다.
-
Solid.js + Astro가 2026년에 React를 위협하는 이유 (성능 벤치마크 포함)
Solid.js + Astro 조합이 2026년 Core Web Vitals 기준에서 React를 대체할 수 있는지 번들 크기·TTI 실전 벤치마크로 비교합니다. Virtual DOM 없는 반응형 시스템과 Islands Architecture의 성능 이점을 분석합니다.
-
vercel-react-best-practices 완전 정복: Vercel이 직접 만든 React·Next.js 성능 최적화 가이드 스킬
Vercel Labs가 배포한 vercel-react-best-practices 스킬로 React와 Next.js 앱의 성능을 체계적으로 최적화하는 방법을 소개합니다. 워터폴 제거·번들 최적화 등 69개 규칙을 AI 에이전트에 자동 주입합니다.