YELOPER

🚀 Redux-toolkit 리액트에서는 반드시 전역 상태 관리라는 것을 해야한다. 한두 번만 props로 넘기면 괜찮지만 안 그럴 때도 많으니,, 보통 많이 사용하는 게 Redux, MobX, ContextAPI, recoil, zustand인데 나는 Redux로 해보기로 결정! 가장 사용자가 많기도 하고 그럼 정보도 더 많을거니까 ㅎㅎ 📚 Redux와 Redux-toolkit의 차이 Redux를 만든 곳에서 공식적으로 효율적인 Redux 개발을 위해 만들어진 툴킷 Redux-Toolkit을 사용하면 Redux의 문제점 해결 Redux 스토어 구성이 너무 복잡하다. Redux에서 유용한 작업을 수행하려면 많은 패키지를 추가해야 한다. Redux에는 너무 많은 상용구 코드가 필요하다. 📔 Redux-To..

💡 오늘 할 것! 어드민 - 상품 목록 어드민 - 상품 추가 어드민 - 상품 수정 어드민 - 상품 삭제 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..

1. 라이프사이클 개념 - 모든 리액트 컴포넌트에 존재 - 수명: 페이지에 렌더링되기 전인 준비 과정 ~ 페이지에서 사라질 때 - 컴포넌트를 처음으로 렌더링할 때, 업데이트 하기 전후, 불필요한 업데이트를 방지해야 할 때 사용 - 클래스형 컴포넌트에서만 사용 가능 (함수형 컴포넌트에서는 Hooks로 처리) 2. 라이프사이클 종류 1. 마운트 - DOM이 생성되고 웹 브라우저상에 나타나는 것 - 마운트할 때 호출하는 메서드 컴포넌트 만들기 -> constructor -> getDerivedStateFromProps -> render -> componentDidMount constructor: 컴포넌트 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps: props에..

1. state: 컴포넌트 내부에서 바뀔 수 있는 값 2. props - 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값. - 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용 가능 - props를 바꾸려면 부모 컴포넌트에서 바꿔 줘야 함 3. 이벤트 - 이벤트 이름: 카멜 표기법 - 자바스크립트 코드 전달X 함수 형태의 값 전달 - DOM 요소에만 이벤트 설정 가능 (직접 만든 컴포넌트에는 이벤트를 자체적으로 설정 불가, but 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정 가능)