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. 문제 설명 Hint - 확실히 입문 들어오니까 수학적인 문제가 많이 보인다... 저 느낌표 저거 너무 오랜만에 봐서 이름도 까먹었다,, 팩토리얼 너,, 이놈,, 내가 학창시절 때 많이 싫어했었다,, - 팩토리얼 개념도 까먹어서 도저히 어떻게 푸는 문젠지 접근조차 불가능해 구글링을 해 가장 내가 이해하기 좋은 답안들을 가지고 왔다 2. 답안 1 function solution(balls, share) { let x = 1 let y = 1 let z = 1 for(let i = 1; i

1. 문제 설명 2. 답안 function solution(n) { // 피자 한 판을 놓고 let pizza = 1; // 피자 개수 * 조각 개수 후 n을 나눈 나머지가 0이 될 때까지 피자 판 수를 더하기 while (pizza * 6 % n) { pizza++; } // 0이 되면 리턴 return pizza; } while을 써서 pizza의 개수를 늘려야겠다.. 라고 까지는 생각을 했으나 그 다음이 문제,, 계속 고민하다가 구글링 ㅠㅠ 이렇게 하면 되는 구나,, 오늘도 배워갑니다

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), { // 처음에 장바구니에 담고 다른 페이지 ..

1. 문제 설명 2. 답안 function solution(array) { // prev: 누적된 결과를 나타내는 객체, curr: 현재 처리 중인 배열 요소 let obj = array.reduce((prev, curr) => { // prev 객체에 curr 요소가 이미 존재한다면 1 증가시킴, 없다면 1로 초기화 prev[curr] = ++prev[curr] || 1; // 누적된 결과 객체 반환 return prev; }, {}); // 초깃값으로 빈 객체 사용 // values 중 제일 큰 값 저장 let maxValue = Math.max(...Object.values(obj)) // 최빈값이 여러 개일 경우 -1 반환 if (Object.values(obj).filter(item => ite..

1️⃣ msw로 Mock API 만들기 1. msw란? Mock Service Worker는 서비스 워커를 이용하여 API를 모킹하는 라이브러리입니다. MSW는 Service Worker API를 활용해 네트워크 요청을 가로채고 특정한 동작을 수행하도록 지정할 수 있습니다. https://mswjs.io/docs/getting-started Getting started Three steps to get started with Mock Service Worker. mswjs.io 공식 문서에 나와있는대로 설치해주기 yarn add msw --save-dev npx msw init public/ --save 2. src/mocks/handlers.ts 파일 만들어서 추가 import { graphql } f..