💡 무엇을 배울까1. 신상품 리스트 스켈레톤 UI2. 프록시 서버 설정3. 기능 함수 분리4. DetailPage 개별 상품 정보 구현 📖 수업 내용1️⃣ 신상품 리스트에 스켈레톤 UI 구현저번 수업에서 신상품 리스트를 구현했으니신상품 리스트에도 스켈레톤 UI를 적용해보자. # 1단계 : `ProductCardSkeleton.jsx` 컴포넌트 만들기import React from 'react'import css from './ProductCardSkeleton.module.css'const ProductCardSkeleton = () => { return ( )}export default ProductCardSkeleto..

💡 무엇을 배울까1. 배너에 스켈레톤 UI 적용2. 신상품 리스트 구현3. 전체 파일 흐름4. 데이터 흐름 요약 📖 수업 내용1️⃣ 배너에 스켈레톤 UI 구현 어제 만든 배너에 스켈레톤 UI를 적용해보는 실습으로 오늘 수업이 시작되었다. 🤔 스켈레톤 UI가 뭐지?설명은 아래 블로그에 작성해두었다. (참고하자) 스켈레톤 UI(Skeleton UI)란? 사용자 경험을 높이는 로딩 화면🔍 스켈레톤 UI란?스켈레톤 UI는 콘텐츠가 로딩되는 동안 표시되는 저해상도 미리보기 또는 자리 표시자 화면으로,실제 콘텐츠의 구조와 레이아웃을 시각적으로 나타낸다.이는 사용자에게 콘텐jugang.tistory.com 🛠️ 스켈레톤 UI 미리보기용 박스 구성하기 본격적으로 배너에 스켈레톤 UI를 적용하기 전에,원하..

🔍 스켈레톤 UI란?스켈레톤 UI는 콘텐츠가 로딩되는 동안 표시되는 저해상도 미리보기 또는 자리 표시자 화면으로,실제 콘텐츠의 구조와 레이아웃을 시각적으로 나타낸다.이는 사용자에게 콘텐츠가 곧 표시될 것이라는 시각적 피드백을 제공하고,페이지가 로딩 중이라는 인상을 주어 체감 로딩 시간을 줄여준다. 쉽게 말해, 실제 내용이 로딩되기 전에 잠깐 보여주는'가짜 레이아웃'이고, 이걸로 사용자에게 기다리는 시간을 덜 지루하게 만들어준다. 🎯 스켈레톤 UI의 목적1️⃣ 인지된 성능 향상 실제로 데이터를 불러오는 데 걸리는 시간은 동일하더라도,사용자가 느끼는 로딩 시간은 훨씬 짧게 느껴질 수 있다. 왜❓-> 아무것도 없는 빈 화면보다,'곧 나올 콘텐츠의 틀'을 미리 보여주는 것만으로도사용자에게 "지금 뭔가 ..

💡 무엇을 배울까1. Lighthouse (웹 성능 최적화 도구)2. MainPage 배너 만들기 - Swiper 라이브러리3. json-server에 등록된 데이터를 불러와 Swiper에 바인딩하기 📖 수업 내용1️⃣ Lighthouse (웹 성능 최적화 도구)어제 수업 시간에 강사님께서 웹 성능에 대해 살짝 언급하셨던 적이 있다. 프로젝트 개발 시 웹 성능을 고려해야 하는 이유는단순히 '빠른 사이트'가 좋기 때문이 아니라,사용자 경험, 검색 엔진 최적화(SEO), 유지보수, 수익 등 모든 측면에 영향을 주기 때문이다. 이러한 웹 사이트의 품질을 측정하고 개선할 수 있는 방법을 제공해주는 도구가 있다.바로,Lighthouse ❗ Lighthouse는 Google에서 개발한 오픈소스 웹 성능 분석 도..

🔍 axios란?axios는 Promise 기반의 HTTP 클라이언트 라이브러리로,브라우저와 Node.js에서 모두 사용할 수 있다. 쉽게 말해,서버에 데이터 요청(GET)서버에 데이터 전송(POST)서버에서 데이터를 수정(PUT/PATCH)서버의 데이터를 삭제(DELETE)할 때 JavaScript에서 아주 간편하게 사용할 수 있는 도구이다. 🛠 설치 방법npm install axios 🤔 왜 axios를 사용하지?근데 왜 `fetch` 대신 `axios`를 쓸까? 자바스크립트에는 기본적으로 `fetch()`라는 내장 API가 있지만,실무에서는 `axios`를 훨씬 더 많이 사용한다. 그 이유는,axios가 fetch보다 훨씬 사용하기 간편하고, 기능도 더 풍부하기 때문이다. 📌 axio..

💡 무엇을 배울까1. 쇼핑몰 프로젝트 구조2. 프로젝트 초기 설정3. src 폴더 구조대로 파일 생성4. 본격적인 코드 작성 📖 수업 내용1️⃣ 쇼핑몰 프로젝트 `src`폴더 구조src/├── assets/│ ├── logo.svg├── components/ 2️⃣ 프로젝트 초기 설정React 개발을 위한 VS Code 설정은 아래 블로그에 작성해 두었다. (참고하자) React 개발을 위한 VS Code 설정⚙ VS Code 설정1️⃣ VS Code 설치 Visual Studio Code - Code Editing. RedefinedVisual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugg..