TanStack Query 란? 서버 상태(Server State) 관리를 도와주는 라이브러리 서버로부터 데이터를 가져오기(fetch), 캐싱(cache), 자동 갱신(refetch) 등을 효율적으로 처리할 수 있게 해준다 주요 기능 데이터 가져오기 및 캐싱 동일 요청의 중복 제거 무한 스크롤, 페이지네이션 등의 성...

🔗 사용 API: OpenWeatherMap OpenWeatherMap은 전 세계 날씨 정보를 제공하는 무료 API 이다 ! ✅ API Key 보안 관리 .env 파일 생성 API Key는 외부에 노출되면 안 되는 민감 정보 → .env 파일에 저장해서 코드에서 분리 관리 VITE_WEATHER_API_KEY = 8b7f7d685453d0...

React Redux Quick Start (Redux Toolkit) React-Redux 🔸 Redux란 ? Redux는 애플리케이션의 상태(state)를 예측 가능하게 관리하는 라이브러리. React와 함께 쓰면 전역 상태 관리를 더 효율적으로 할 수 있음. 1. Install Redux Toolkit and React Redux...

프로그래머스 - 미로탈출 문제 파악 미로 탈출 벽(x), 통로(이동 O) 루트 : 출발 지점 -> … -> 레버가 있는 칸으로 이동 -> 레버 열기 -> 미로 빠져나가는 문까지 이동 레버를 당기지 않으면 출구가 있는 칸을 지나갈 수 있음 📌 백준 1...

URL과 params에 대한 핵심 내용은 따로 포스팅 해두었다 ! URL? URLSearchParams? useSearchParams? Shop 기능 상품 목록 페이지 카테고리 필터링 정렬 기능 페이지네이션 URL Query 파라미터를 활용한 상태 관리 ?category=new&_sort=price&_page...

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 목적 인지된 성능 향상 사용자에게 “무언가 로딩 중이다”라는 신호를 줘서 기다림의 지루함 완화 ...