URL (Uniform Resource Locators) 웹에서 HTML 페이지, CSS 문서, 이미지 등 리소스의 위치를 나타내는 주소를 뜻한다. 쉽게 말해서, URL은 웹 페이지를 찾기위한 주소를 말한다. 🔸 URL의 구조 Scheme scheme는 브라우저가 자원을 요청하기 위해 사용해야 하는 protocol을 나타낸다. 일반적으로...

CartPage 전체 흐름 사용자가 /cart 경로로 진입 Router에서 cartPageLoader 실행 cartPageLoader에서 getCartData 호출 getCartData가 axios로 백엔드 API 요청 응답 데이터를 받아 cartItems로 반환 반환된 cartItems가 CartPage 컴포넌트에 전달됨 R...

🔸 tab 구현 포인트 1️⃣ useState(0)으로 현재 선택된 탭의 index 저장 const [activeTab, setActive] = useState(0) 2️⃣ 탭 버튼 클릭 시 해당 index를 상태로 변경 {tabTiles.map((title, i) => ( <button key={i} classNa...

❓ _의 역할 – map에서 _는 뭘까? skeletonArr.map((_, i) => ( <li key={i}> <ProductCardSkeleton /> </li> )) map((_, i) => ...)에서 _는 사용하지 않을 첫 번째 인자(요소)를 의미 보통 ....

🔸 스켈레톤 UI 콘텐츠가 로딩 중일 때 표시되는 저해상도 미리보기 또는 자리 표시자 화면 실제 콘텐츠의 구조와 레이아웃을 시각적으로 표현해 체감 로딩 시간을 줄이고 사용자 경험을 향상시킴 스켈레톤 UI 목적 인지된 성능 향상 사용자에게 “무언가 로딩 중이다”라는 신호를 줘서 기다림의 지루함 완화 ...

신기하게도 바로 어제 포트폴리오 사용자 경험을 올리기 위해 Lighthouse를 사용해보았는데 오늘 수업에서 알려주셔서 스터디노트에서는 간단히 정리하고 자세한 성능 향상을 위해 수정할 내용은 따로 포스팅하려한다. 🔸 Lighthouse: 웹 성능 최적화 도구 Google에서 개발한 오픈소스 웹 성능 분석 도구 웹사이트의 품질을 측정하고 개선...

📁 구조별 특징 1. 기본 React 구조 src/ ├── components/ ├── pages/ ├── hooks/ ├── services/ 입문자에게 친숙 폴더가 기능별로 나뉘어 관리하기 쉽고 단순 2. 기능 중심(Folder by Feature) 구조 src/ ├── features/ │ ├── auth/ │ ...

🔸 Lint Lint는 코드 스타일과 문법 오류를 검사하고 일관된 코드를 유지하게 도와주는 도구 lint 실행 : 현재 디렉토리(.)부터 모든 파일을 ESLint로 검사 npm run lint 코드 스타일 검사 및 자동 수정 협업할 때 코드 퀄리티 유지에 도움됨 🔸 React Router React에서 페이지 전환을 처...

백준 7569번-토마토 문제 파악 창고에 보관된 토마토들이 며칠이 지나면 다 익게 되는지 그 최소 일수 구하기 1 : 익은 토마토 0 : 익지 않은 토마토 -1 : 토마토가 들어있지 않은 칸 하나의 토마토에 인접한 곳은 위, 아래, 왼쪽, 오른쪽, 앞, 뒤 여섯 방향에 있는 토마토를 의...

🔸 SRP(가위바위보) 게임 개발 연습 ✅ 스스로 어디까지 개발 가능한가 ! 개발 해야하는 UI 프로젝트 구조 어떤 순서로 개발 했는가? 프로젝트 구조 설계 React 프로젝트 생성 폴더 구조 설정 /components: Card, Button 컴포넌트 ...