상품 필터링/정렬카테고리 필터: 전체, 신상품(new), 인기상품(top) 선택 가능정렬 조건: 등록순(id), 낮은 가격순(price), 높은 가격순(-price), 낮은 할인율(discount), 높은 할인율(-discount)URL 쿼리스트링을 이용한 상태 관리ex) /shop?_page=1&_per_page=12&category=top&_sort=priceReact Router의 loader 기능 활용 Router Loader에서 쿼리 파싱 및 쿼리 스트링 조합쿼리 파라미터를 받아 json-server에 전달할 쿼리스트링 구성필요한 데이터를 미리 받아두기 위해 loader 사용export const shopLoader = async ({ request }) => { const url = new ..

🛒 장바구니장바구니 수량 업데이트cartApi.jsexport const updateCartItem = async (id, count) => { try { // id에 해당하는 상품 가져오기 const cartItem = await axios.get(`/api/cart/${id}`) // 해당 상품 카운트 업데이트 const updateItem = { ...cartItem.data, count } const res = await axios.put(`/api/cart/${id}`, updateItem) return res.data } catch (err) { console.log('[error]', err) }}CartPage.js const decrease ..

🛍️ 상품 상세 페이지로딩 상태 처리상품 상세 페이지에서 데이터를 불러오는 동안 로딩 스피너를 보여주고, 이후 내용을 표시✅ useState로 로딩 상태 정의 const [isLoading, setIsLoading] = useState(true)✅ useEffect로 데이터 준비 확인 후 상태 업데이트useEffect(() => { // 컴포넌트가 마운트된 직후에는 로딩 상태로 표시 setIsLoading(true) // 데이터가 로드된 후 로딩 상태 해제 if (product && product.id) { // 약간의 지연 효과를 줘서 로딩 화면을 확인할 수 있도록 const timer = setTimeout(() => { setIsLoading(..

유틸 함수 모듈화1. 금액을 한국 통화로 포맷팅export const formmatCurrency = number => number.toLocaleString() + '원'2. 날짜를 한국 시간 형식으로 포맷팅export const formatDate = date => { const d = new Date(date) const year = d.getFullYear() // getMonth()는 0부터 시작하므로 1을 더하고, 10보다 작으면 앞에 0 추가 const month = String(d.getMonth() + 1).padStart(2, '0') const day = String(d.getDate()).padStart(2, '0') return `${year}. ${month}. ${d..

이미지 용량 최적화✅ 이미지 최적화가 중요한 이유전체 페이지 로딩 시간의 대부분은 이미지가 차지이미지 최적화는 웹 성능 개선의 핵심 요소 📌 최적화 기준1MB 이상은 너무 큼 ➡️ 용량 줄이기 필수가능하면 200~300KB 이하로 유지 🥊 실제 용량 줄인 후 Lighthouse 비교 ☠️ 스켈레톤 UIhttps://somyclass.notion.site/UI-1d6973f5e0fe8018b219d86627ba1bb8 스켈레톤 UI | Notion스켈레톤 UI(Skeleton UI)는 콘텐츠가 로딩되는 동안 표시되는 저해상도 미리보기 또는 자리 표시자 화면으로, 실제 콘텐츠의 구조와 레이아웃을 시각적으로 나타냅니다. 이는 사용자에게 콘텐츠가somyclass.notion.site 배너가 로딩 중일 때 ..

성능Lighthouse웹 페이지의 성능, 접근성, SEO, PWA 등을 분석해서 점수와 함께 개선할 수 있는 인사이트를 제공해주는 오픈소스 자동화 도구항목설명Performance(성능)페이지 로딩 속도, 인터랙티브 속도 등Accessibility(접근성)다양한 사용자(장애인 포함)가 콘텐츠를 이용 가능한지Best Practices(모범 사례)웹 표준, 보안 관련 권장 사항 준수 여부SEO(검색 엔진 최적화)검색 엔진에 잘 노출될 수 있도록 구조화됐는지PWA(Progressive Web App)앱처럼 동작할 수 있는 웹앱인지 🛠️ 실행 방법Chrome DevTools 사용페이지에서 개발자 도구 열기상단 탭에서 Lighthouse 클릭원하는 항목 체크 후 Analyze 버튼 클릭리포트 생성됨 ✅ 강사님 참..

폴더 구조src/├── components/ 라우터 세팅npm i react-router-domrouter.jsximport { createBrowserRouter } from 'react-router-dom'import Default from './layout/Default'import MainPage from './pages/MainPage'import AboutPage from './pages/AboutPage'import NotFound from './pages/NotFound'import ShopPage from './pages/ShopPage'import BlogPage from './pages/BlogPage'import CartPage from './pages/CartPage'const ..

React Router란?React에서 라우팅을 구현하기 위한 표준 라이브러리웹 애플리케이션에서 여러 페이지를 쉽게 관리하고 내비게이션을 구현할 수 있게 해줌 🛠️ 설치npm i react-router-dom ✏️ 구현 방식1️⃣ createBrowserRouter + import { createBrowserRouter, RouterProvider } from "react-router-dom";const router = createBrowserRouter([ { path: "/", element: , },]);export default function Router() { return ;}React Router v6.4 이상부터 지원하는 새로운 방식라우팅 설정을 자바스크립트 객체 배열로 ..