react-query5 [React] 쇼핑몰 개발 | STEP 4 : 장바구니 기능 구현 (Redux 적용) 🎯 목표 :Redux Toolkit을 사용하여 장바구니 상태 관리상품 추가 후 페이지 이동 없이 상태 업데이트 → 페이지 이동 없이 쇼핑을 계속할 수 있도록수량 조정 기능 추가 → 장바구니 내 상품 수량 변경Toast 알림 → 장바구니에 추가된 후 사용자에게 즉시 피드백 제공UI 개선 → 상품 썸네일, 개별 삭제 버튼 추가, 총 결제 금액 UI 개선, 빈 장바구니 개선1. Redux Toolkit을 활용한 상태 관리 설정Redux Toolkit을 사용하여 장바구니 상태를 관리하고, 상품 추가, 수량 변경, 삭제 등의 작업을 처리합니다. createSlice를 사용하여 장바구니 상태와 액션을 설정합니다. 📍 Redux 기본 설정// src/app/store.tsimport { configureStore.. 2025. 3. 18. [React] 쇼핑몰 개발 | STEP 3 : 상품 상세 페이지 구현(useState, useEffect) 🎯 목표 :✔ 상품 클릭 시 상세 페이지에서 정보 표시✔ URL 파라미터를 사용해 상품 ID 가져오기 (useParams)✔ React Query를 활용하여 개별 상품 데이터 가져오기✔ React.lazy + Suspense 적용하여 코드 스플리팅 최적화✔ SEO 최적화 (react-helmet 활용) 및 Open Graph 태그 추가1. 상품 상세 데이터 가져오기 (React Query 활용)📍 src/api/products.ts 수정 (fetchProductDetail 추가)import axios from 'axios';import { Product } from '@/types/products'; // Product 타입을 가져옵니다.export const fetchProductList = asy.. 2025. 3. 17. [React] 쇼핑몰 개발 | STEP 2 : 상품 목록 페이지 구현 (React Query 활용) 🎯 목표 :✔ React Query를 활용하여 상품 목록 데이터를 불러오기✔ ShadCN UI를 활용하여 스타일링✔ 상품 정렬 및 필터 기능 구현 (useState 활용)✔ Skeleton UI 적용으로 로딩 상태 개선✔ 반응형 디자인 적용 (PC & 모바일 최적화)1. 상품 데이터 정의 (src/data/products.ts)📍 가짜 데이터 저장// db.json{ "products": [ { "id": 1, "name": " Hydrating Serum", "price": 29.99, "category": "skincare", "image": "/images/hydrating-serum.png" }, { "id": 2, "name": " Moisturizing Cre.. 2025. 3. 16. [React] 쇼핑몰 개발 | STEP 1 : 프로젝트 환경 설정 & 기본 레이아웃 구성 🎯 목표 :✔ Vite + TypeScript 기반 쇼핑몰 프로젝트 초기 세팅✔ Redux, React Query, ShadCN UI 등 필수 라이브러리 설치✔ ESLint + Prettier 적용으로 코드 스타일 정리✔ 공통 레이아웃(헤더, 푸터, 네비게이션 바) 구성✔ 반응형 디자인 적용 (모바일 & 데스크톱 최적화)1. 프로젝트 생성먼저, Vite를 사용하여 React + TypeScript 프로젝트를 생성합니다.pnpm create vite@latest shopping-mall --template react-tscd shopping-mall ✅ Vite 기반의 React + TypeScript 프로젝트 생성 완료! 🎉2. 필수 라이브러리 설치다음 패키지들을 설치합니다.pnpm add react.. 2025. 3. 15. [React] 쇼핑몰 개발 | STEP 0 : React 학습 로드맵 🚀 React 쇼핑몰 프로젝트 로드맵✅ 목표:React + TypeScript + Redux + ShadCN을 활용하여 실무형 쇼핑몰 프로젝트 구축최신 UI/UX 트렌드를 반영한 사용자 친화적인 디자인 적용중급 개발자로서 실무에서 요구하는 기술 습득 (상태 관리, 성능 최적화, 보안, 테스트, 배포 포함)이 프로젝트는 단순한 기능 구현을 넘어 실제 서비스 수준의 쇼핑몰을 개발하는 것을 목표로 한다.각 단계를 통해 프론트엔드 개발의 필수 개념을 익히고, 최적화된 코드 작성 방법을 배울 수 있도록 구성했다.또한, 디자인과 UX를 고려한 설계를 포함하여 사용자 친화적인 인터페이스를 구현할 수 있도록 구성했다.📌 STEP 1 : 프로젝트 환경 설정 & 기본 레이아웃 구성✅ 학습 개념:Vite + TypeSc.. 2025. 3. 14. 이전 1 다음
