YELOPER

💡 오늘 할 것! 어드민 - 상품 목록 어드민 - 상품 추가 어드민 - 상품 수정 어드민 - 상품 삭제 1️⃣ 어드민 - 상품 목록 1. db 수정 - root/tempdbbuilder.ts 생성 import { v4 as uuid } from "uuid"; import { DBField, writeDB } from "./src/dbController"; const db = Array.from({ length: 100 }).map((_, i) => ({ id: uuid(), imageUrl: `https://source.unsplash.com/200x150/?nature/${i}`, price: 1000 + Math.floor(Math.random() * 20) * 500, title: `임시상품${i}..

💡 오늘 할 것! 서버 pagination 무한스크롤 적용 어드민 페이지 - api 작성 1️⃣ 서버 페이지네이션 1. server/resolvers/products.ts cursor="" 추가하기 const productResolver: Resolver = { Query: { products: (parent, { cursor = "" }, { db }) => { const fromIndex = db.products.findIndex((product) => product.id === cursor) + 1; return db.products.slice(fromIndex, fromIndex + 15) || []; }, ... }, }, }; export default productResolver; 📚 cur..

💡 오늘 할 것! jsonDB 생성 resolver - DB연동 서버 변경사항 클라이언트에 반영 1️⃣ jsonDB 생성하기 1. src/dbController.ts 생성 💻 JSON 데이터베이스의 어떤 데이터를, 어떻게 처리할 것인지, 컨트롤러가 필요 import fs from "fs"; import { resolve } from "path"; export enum DBField { CART = "cart", PRODUCTS = "products", } const basePath = resolve(); // __dirname const filenames = { [DBField.CART]: resolve(basePath, "src/db/cart.json"), [DBField.PRODUCTS]: resol..

벌써 절반왔다 절반!! 끝까지 파이팅 💪🏻 💡 오늘 할 것 1. 모노레포로 변경 / 서버 환경 설정 2. schema 정의 3. resolver 정의 4. 서버 실행하기 1️⃣ BFF형식의 서버 생성하기 / monorepo workspace로 변경 - BFF 서버란? : 프론트엔드 요구사항에 맞게 구현하기 위해 도움을 주는 서버 - monorepo란? Workspaces는 단일 최상위 루트 패키지 내에서 로컬 파일 시스템의 여러 패키지를 관리할 수 있도록 지원하는 npm cli의 기능 집합을 가리키는 일반 용어 Workspace를 통해 로컬 파일 시스템에서 연결된 패키지를 훨씬 더 효율적으로 처리함 - root/package.json { "name": "shopping-mall", "version": "..

4일차 시작! 오늘 할 것 1. 장바구니 상태관리 (recoil) 2. 결제페이지 1️⃣ Recoil로 상태관리 하기 - 체크된 상품이 결제예정 상품에도 출력되어야하고, 결제페이지에도 출력되어야 함! - 두 번 이상 다른 곳에 쓰이므로 결제예정상품을 컴포넌트로 분리하기! - components/willPay/index.tsx import { useRecoilValue } from "recoil"; import checkedCartState from "../../../recoils/cart"; import ItemData from "../cart/itemData"; import { SyntheticEvent } from "react"; // 결제예정 const WillPay = ({ submitTitle,..

1️⃣ 장바구니 페이지 1. pages/cart/index.tsx import { useQuery } from "react-query"; import { QueryKeys, graphqlFetcher } from "../../queryClient"; import GET_CART, { Cart } from "../../graphql/cart"; import CartList from "../../assets/components/cart/list"; const CartIndex = () => { // 장바구니에 담은 아이템들 불러오기 const { data } = useQuery(QueryKeys.CART, () => graphqlFetcher(GET_CART), { // 처음에 장바구니에 담고 다른 페이지 ..

😀 개요 전 직장에서 next + typescript로만 개발을 해오고 그마저도 템플릿이 있어 환경설정을 할 필요가 없었다. 또한 리액트 프로젝트를 생성할 때 Create React App으로만 해보고 vite도 한 번도 사용해보지 않아 새로운 환경에서 개발을 해보고 싶었다! 환경설정부터 백엔드 아닌 백엔드까지 전 과정을 혼자서 경험해보고자 이 프로젝트를 시작하게 되었다. 오랜만에 보는 리액트 로고.. vite는 처음인데.. 생성속도가 아주 빨라서 좋았다. 1️⃣ vite로 새로운 프로젝트 생성하기 yarn create vite ? Project name: 프로젝트이름 ? Select a framework: (Use arrow keys) ❯ vanilla vue react preact lit svelte..