🔄 구성 흐름 [프론트엔드] 프론트엔드에서 입력값 유효성 검사를 통해 잘못된 값은 서버에 보내지 않음 [백엔드] 백엔드는 Express로 서버를 구성하고, CORS 문제 해결 [데이터베이스] MongoDB에 Mongoose를 통해 사용자 정보를 저장 1. 프론트엔드 (React) ✅ 정규표현식 이용한 유효성 검사 정규 표현식은 ...

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) => ...)에서 _는 사용하지 않을 첫 번째 인자(요소)를 의미 보통 ....