도서 리액트를 다루는 기술 | 김민준 을 읽고 작성한 게시글입니다. 리액트를 다루는 기술(개정판) 개발은 언제나 즐겁고 재밌어야 한다는 생각을 갖고 있는 개발자이며, IT 기술을 가르치는 것을 굉장히 좋아하는 교육자이다. 또한, 사용자를 행복하게 만드는 서비스를 만드는 것이 가장 중요 books.google.co.kr 개인적으로 늘 헷갈리는 부분.. context api / redux 등등. . 이쪽이 유독 개념이 너무 헷갈려서 이 참에 도서를 정독하며 포스트로 정리해보고자 한다. Context API란? Context 먼저, 리액트의 context는 React 컴포넌트 트리 안에서 전역적이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다. 꼭 전역적일 필요는 없으며, 단순히 "리액트 컴포넌트..

Scale & Ship Faster with a Composable Web Architecture | Netlify Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now! www.netlify.com 회원가입 및 로그인, 팀 생성 과정은 생략 Add new site - Import an existing project 연동 원하는 깃 레포지토리 선택 빌드 설정해주기 레포지토리 안에 프론트/백을 나누어 관리중이라면 프론트 폴더(client)를 Base directry에 입력한다. build command 는 CI=..

해당 에러는 비동기 통신을 할 때 주로 나타나는 오류라고 한다. 다른 해결방법들은 시도했는데, 이번 프로젝트는 vite로 한 프로젝트여서 babel.config.js 설정이 먹히지 않았다. 아래처럼 하니 해결 ! npm install vite-plugin-babel @vitejs/plugin-legacy // vite.config.js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import legacy from '@vitejs/plugin-legacy' import babel from 'vite-plugin-babel' // https://vitejs.dev/config/ export default define..

firebase의 firestore를 db로 사용할 것이다. 파이어베이스 연동 server 디렉토리에서 파이어베이스 dependency를 설치한다. yarn add firebase ▼ server/firebase.js 파이어베이스의 튜토리얼을 따라 아래 내용이 포함되도록 파이어베이스 설정을 한다. 파이어베이스 쿼리 작성 상품 쿼리 작성 ▼ server/resolvers/product.ts createAt 기준으로 내림차순 정렬 startAt 옵션은 쿼리 결과의 시작 지점을 지정한다. unshift() : 배열 앞에 새로운 값을 추가하고 배열의 전체 개수를 리턴함 / shift() : 배열의 맨 앞 값을 삭제하고 삭제한 값을 리턴함 where 옵션은 쿼리를 필터링하는 데 사용된다. (특정 조건을 만족하는 ..

상품을 관리할 수 있는 어드민 페이지를 만들 것이다. 어드민 api 작성 addProduct : 상품 추가 updateProduct : 상품 수정 deleteProduct : 상품 삭제 상품 삭제의 경우에는 실제 db에서는 삭제하지 않는 대신에 삭제한 상품임을 flag처리하기 위해서 해당 상품의 createdAt정보를 지울 것이다. schema 작성 Mutation의 schema를 정의한다. ▼ server/src/schema/products.ts extend type Mutation { addProduct( imageUrl: String! price: Int! title: String! description: String! ): Product! updateProduct( id: ID! imageUrl:..

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) => { ..

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..