json DB 생성 dbController 작성 DBfield와 basePath, filenames를 정의한다. readDB와 writeDB를 정의한다. ▼ server/src/dbController.ts export enum DBfield { CART = "cart", PRODUCTS = "products", } const basePath = resolve(); const filenames = { [DBfield.CART]: resolve(basePath, "src/db/cart.json"), [DBfield.PRODUCTS]: resolve(basePath, "src/db/products.json"), }; export const readDB = (target: DBfield) => { try { r..

클라이언트와 서버 분리 (모노레포) 모노레포 : 여러 개의 프로젝트를 단일 코드베이스 내에 저장하는 구조 현재까지 진행한 프로젝트 파일을 client와 server를 따로 두어 분리할 것이다. client workspace - 먼저, 현재 까지의 파일들을 모두 client 디렉토리에 넣는다. - package.json 파일의 name 속성을 client로 변경한다. - "name": "client", 루트 프로젝트 - 루트 프로젝트 경로에서 yarn init -y를 입력하고, package.json 파일이 생긴 것을 확인한다. - package.json에 아래를 추가한다. "private": true, "workspaces": [ "client", "server" ], "scripts": { "clien..

장바구니 상태관리(recoil) 선택된 상품에 대한 상태관리를 하기 위해 checkedCartState를 recoil로 관리한다. ▼ src/recoils/cart.ts export const checkedCartState = atom({ key: "cartState", default: [], }); }); 결제창 연결하기 Pick 기존 타입에서 원하는 속성만 선택하여 새로운 타입을 생성하는 역할을 한다. Pick을 사용하면 기존 타입에서 필요한 일부 속성만 선택하여 새로운 타입을 만들 수 있다. Pick itemData 컴포넌트 분리하기 ▼ src/components/cart/itemData.tsx const ItemData = ({ imageUrl, title, price, }: Pick) => { ..

장바구니 수량 업데이트 장바구니 수량 업데이트 쿼리문 작성 기존 ADD_CART 쿼리문과 비슷하나 amount가 추가된 것이다. ▼ src/graphql/cart.js export const UPDATE_CART = gql` mutation UPDATE_CART($id: string, $amount: number) { cart(id: $id, amount: $amount) { id imageUrl price title amount } } `; 업데이트 핸들러 함수 정의 업데이트를 하는데 cartData가 없는 것은 에러를 발생시킨다. 기존에서 amount만 전달된 값으로 바꿔주면 된다. ▼ src/mocks/handler.ts graphql.mutation(UPDATE_CART, (req, res, ct..

msw mock data로 서버처럼 구현하기 mock이란? : "Mock"은 테스트 또는 개발 중에 실제 데이터 또는 외부 서비스를 대신하여 사용되는 가짜 또는 모의 데이터 또는 객체를 의미 이는 실제 시스템과의 상호 작용을 시뮬레이션하거나 특정 상황을 재현하여 코드를 테스트하거나 개발하는 데 유용하다. => 백엔드에 데이터가 아직 없거나, 불러오지 못할 경우에 서버를 임시로 만드는 것은 어려우므로 mock 데이터를 사용한다. msw 설치하기 Mock Service Worker Seamless API mocking library for browser and Node. mswjs.io yarn add msw --dev yarn add graphql-tag yarn add graphql-requset gra..

쇼핑몰 dummy data https://fakestoreapi.com 위 사이트에서 읽어올 것이다. Fake Store API Fake store rest api for your ecommerce or shopping website prototype fakestoreapi.com React-query 사용하기 Quick Start | TanStack Query Docs This example very briefly illustrates the 3 core concepts of React Query: Queries tanstack.com react-query 다운로드 yarn add react-query react-query dev-tool 사용 import { ReactQueryDevtools } fr..

vite란? Vite는 Vue.js 팀에서 개발한 웹 개발 빌드 도구이다. Vite의 주요 목표는 개발 서버와 빌드 시스템을 최적화하여 더 빠른 개발 경험을 제공하는 것이다. Vite는 기존의 번들러(Bundler)와는 다른 접근 방식을 채택한다. 일반적으로 번들러는 개발자가 작성한 모든 코드를 하나의 번들로 묶어서 제공하는 반면, Vite는 개별 파일 단위로 빌드하여 개발 서버에서 동적으로 제공한다. 이를 통해 초기 로딩 시간을 줄이고 개발 과정에서의 빠른 수정 및 반영을 가능하게 한다. Vite는 Vue.js를 위한 공식적인 개발 도구로서, Vue.js 애플리케이션 개발을 위한 편리한 기능과 통합을 제공하나, Vite는 단순히 Vue.js를 위한 도구로 제한되지 않고, 다른 프레임워크(React, ..

스파르타코딩클럽 - [왕초보] 나만의 수익성 앱, 앱개발 종합반 강의를 듣고 내용을 정리한 게시글입니다. 스파르타코딩클럽 5주 완성! 코딩을 전혀 모르는 비개발자 대상의 웹개발 강의 spartacodingclub.kr eas 설정 - eas 라이브러리 설치 $ npm install -g eas-cli $ npx expo install expo-build-properties - eas 로그인하기 (expo 계정과 동일) $ eas login - "나의 앱은 eas 빌드 방식에 맡긴다"는 명령어 실행 ( 선택창에서 ALL 선택 ) $ eas build:configure - eas prebuild $ npx expo prebuild $ eas build -p android --profile developmen..

스파르타코딩클럽 - [왕초보] 나만의 수익성 앱, 앱개발 종합반 강의를 듣고 내용을 정리한 게시글입니다. 스파르타코딩클럽 5주 완성! 코딩을 전혀 모르는 비개발자 대상의 웹개발 강의 spartacodingclub.kr API (Application Programming Interface) API : 서버 쪽에서 정한 규칙 앱에서 서버에 데이터를 요청하거나 데이터를 보내는 대화를 하려면 서버가 정한 규칙에 따라 대화 요청을 해야한다. 정한 규칙에 따라 요청을 하지 않으면 응답이 오지 않는다. 그 규칙을 API 라고 부른다. 그 규칙의 형태는 서버가 제공하는 도메인일 수도 있고, 서버가 만들어놓은 함수를 그냥 이용해서 사용하는 규칙일 수도 있다. 서버가 앱에 데이터를 줄 땐 JSON 형태로 데이터를 전달해준..

스파르타코딩클럽 - [왕초보] 나만의 수익성 앱, 앱개발 종합반 강의를 듣고 내용을 정리한 게시글입니다. 스파르타코딩클럽 5주 완성! 코딩을 전혀 모르는 비개발자 대상의 웹개발 강의 spartacodingclub.kr 네비게이션 네비게이션 : 앱에 페이지 개념을 입혀주고, 앱에서 만든 컴포넌트들을 페이지화 시켜주고, 해당 페이지끼리 이동을 가능하게 해주는 라이브러리 - React Navigation을 사용 React Navigation | React Navigation Routing and navigation for your React Native apps reactnavigation.org ▼ 현재 생성된 페이지 MainPage AboutPage DetailPage - 네비게이션 설치 $ yarn ad..