react

Vite는 Vue.js 팀에서 개발한 웹 개발 빌드 도구이다. Vite의 주요 목표는 개발 서버와 빌드 시스템을 최적화하여 더 빠른 개발 경험을 제공하는 것이다.Vite는 기존의 번들러(Bundler)와는 다른 접근 방식을 채택한다. 일반적으로 번들러는 개발자가 작성한

🛍️ 쇼핑몰 dummy data https://fakestoreapi.com 위 사이트에서 읽어올 것이다. ⚡️ React-query 사용하기 https://tanstack.com/query/v3/docs/react/quick-start react-query 다운로

⚡️ 장바구니 상태관리(recoil) 선택된 상품에 대한 상태관리를 하기 위해 checkedCartState를 recoil로 관리한다. ▼ src/recoils/cart.ts ⚡️ 결제창 연결하기 Pick 기존 타입에서 원하는 속성만 선택하여 새로운 타입을 생성하는

⚡️ 장바구니 수량 업데이트 장바구니 수량 업데이트 쿼리문 작성 기존 ADD_CART 쿼리문과 비슷하나 amount가 추가된 것이다. ▼ src/graphql/cart.js 업데이트 핸들러 함수 정의 업데이트를 하는데 cartData가 없는 것은 에러를 발생시킨다.

⚡️ msw mock data로 서버처럼 구현하기 mock이란? : "Mock"은 테스트 또는 개발 중에 실제 데이터 또는 외부 서비스를 대신하여 사용되는 가짜 또는 모의 데이터 또는 객체를 의미 이는 실제 시스템과의 상호 작용을 시뮬레이션하거나 특정 상황을 재현하여

클라이언트와 서버 분리 (모노레포) 모노레포 : 여러 개의 프로젝트를 단일 코드베이스 내에 저장하는 구조 현재까지 진행한 프로젝트 파일을 client와 server를 따로 두어 분리할 것이다. client workspace \- 먼저, 현재 까지의 파일들을 모두

⚡️ json DB 생성 dbController 작성 DBfield와 basePath, filenames를 정의한다. readDB와 writeDB를 정의한다. ▼ server/src/dbController.ts json 파일 작성 db에서 불러 올 cart data

기존에는 product 갯수가 20개였지만, 60개로 늘려서 product.json 파일을 수정한다. 60개의 상품을 4개의 페이지로 나눈다고 생각하면 id 1~15번인 15개의 상품을 먼저 보여준 후 커서가 끝까지 갔을 때 id 16~30번인 15개의 상품을 보여주

상품을 관리할 수 있는 어드민 페이지를 만들 것이다. 어드민 api 작성 addProduct : 상품 추가 updateProduct : 상품 수정 deleteProduct : 상품 삭제 상품 삭제의 경우에는 실제 db에서는 삭제하지 않는 대신에 삭제한 상품임을

firebase의 firestore를 db로 사용할 것이다. 파이어베이스 연동 server디렉토리에서 파이어베이스 dependency를 설치한다. ▼ server/firebase.js 아래 내용이 포함되도록 파이어베이스 설정을 한다. 파이어베이스 쿼리 작성 상품 쿼