#React
← View all tags-
React 감정 일기장 만들기 1편 - 프로젝트 시작하기와 기본 구조 이해
React 초보자를 위한 감정 일기장 앱 만들기 시리즈 1편. Create React App으로 프로젝트를 생성하고, index.html부터 index.js까지 React 앱이 브라우저에서 어떻게 시작되는지 처음부터 차근차근 배워봅니다.
-
React 감정 일기장 만들기 2편 - React Router로 페이지 만들기
React Router를 사용해서 Home, New, Diary, Edit 페이지를 만들고 URL에 따라 다른 화면을 보여주는 SPA를 구현합니다. 동적 라우팅과 Link 컴포넌트 사용법까지 실습으로 배워봅니다.
-
React 감정 일기장 만들기 3편 - State로 데이터 관리하기
React의 핵심 개념인 useState로 일기 데이터를 관리하는 방법을 배웁니다. Editor 컴포넌트를 만들면서 날짜, 감정, 내용 입력을 처리하고 이벤트 핸들러와 불변성 유지까지 실습합니다.
-
React 감정 일기장 만들기 4편 - 재사용 가능한 컴포넌트 만들기
React 컴포넌트를 작은 부품으로 나눠서 재사용성을 높이는 방법을 배웁니다. EmotionItem, Button, Header 컴포넌트를 만들고 Props를 활용한 컴포넌트 간 통신까지 완벽 마스터!
-
React 감정 일기장 만들기 5편 - 전체 앱 연결 및 데이터 관리
React 감정일기장 시리즈 최종편! App.js에서 일기 데이터를 관리하고, CRUD 기능을 구현하여 완벽하게 작동하는 감정일기장 앱을 완성합니다. onCreate, onUpdate, onDelete까지 모든 기능을 통합합니다.
-
React 쇼핑몰 구조 이해하기 1편 - 프로젝트 구조와 앱의 시작점
이미 완성된 React 쇼핑몰 코드를 분석하며 구조를 이해합니다. 1편에서는 index.js에서 App.js까지 데이터가 어떻게 흘러가는지 전체 구조를 파악합니다.
-
React 쇼핑몰 구조 이해하기 2편 - 상품 목록과 검색/정렬 분석
React 쇼핑몰 코드 분석 2편. 상품 데이터가 화면에 어떻게 표시되는지, 검색과 정렬은 어떻게 동작하는지 map, filter, sort 메서드를 통해 알아봅니다.
-
React 쇼핑몰 구조 이해하기 4편 - Redux Toolkit 상태 관리 분석
React 쇼핑몰 코드 분석 4편. Redux Toolkit의 createSlice와 configureStore를 분석하며 전역 상태 관리 구조를 이해합니다.
-
React 쇼핑몰 구조 이해하기 5편 - 게시판 CRUD 구조 분석
React 쇼핑몰 코드 분석 마지막 편! 게시판의 Create, Read, Update, Delete 기능이 어떻게 구현되어 있는지 분석합니다.
-
개발자를 위한 타자 연습기: 코드로 연습하자!
지루한 타자 연습은 그만. 실제 코드 스니펫으로 연습하는 개발자 전용 타자 게임을 만들어보았습니다.
-
React 쇼핑몰 구조 이해하기 3편 - 상품 상세와 장바구니 흐름
React 쇼핑몰 코드 분석 3편. useParams로 동적 라우팅을 이해하고, Redux로 장바구니에 상품이 추가되는 흐름을 분석합니다.