Shopping Project

이번엔 지금까지 활용한 것들과 다른 도구들을 사용해보려한다. SWR 대신 React-Query를 통해 데이터 패칭하자.Redux, Context API 대신 Recoil을 통해 상태관리해보자.REST API 대신 GraphQL을 활용하여 API와 상호작용해보자.일반적인

Fake Store API는 쇼핑 웹사이트 Fake Store ApifakeStoreApi는 서버 측 코드를 실행하지 않고 전자 상거래 또는 쇼핑 웹 사이트에 의사 실제 데이터가 필요할 때마다yarn add react-query✅ 설치React Query는 캐시를 관리

앞서 말한적 있지만, 백엔드 개발자분들이 완성된 API를 구현할 때까지 프론트엔드 개발을 미룰 수는 없는 일인 것 같다. 따라서, 카카오테크에서도 말하지만 모의서버를 생성하여 미리 데이터 통신을 구현하면 좋을 것 같다. 👍 프론트엔드 개발을 계속하여 할 나에겐 좋은

✅ 설치recoil 상태를 여러 컴포넌트가 전역적으로 사용할 수 있게 루트 컴포넌트에 RecoilRoot를 넣어주자.atom은 상태(state)의 일부를 나타내며, 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독하기

🚀 Start

이제 graphQL을 실제 서버에서 구현해보도록 하기위해 BFF형식의 서버를 생성해보자.그 전에 해야할 것은 shoppingmall 폴더에 monorepo형식을 기반으로 client, server 폴더를 나눌 것이다. 💡 BFF(BackEnd For FrontEnd)

🚀 Start

이전에 제작한 커뮤니티 프로젝트에서도 게시글에 대해 무한스코롤을 주어, 게시글들이 스크롤되는 페이지마다 불러오게 하였다.그때는 SWR의 useSWR Infinite 와 Intersection Observer을 사용하였다.✅ 이번에는 React Query의 useInfi

이제 관리자페이지를 생성해보자. 관리자의 권한으로 할 수 있는 것은 상품을 추가, 수정, 삭제 정도일 것 같다.관리자페이지에 대해서 인증권한을 부여하여, 로그인을 하게끔 구현하면 좋을 것 같지만, 우선 기능 구현부터 해보자.✅ Mutation in Resolver새롭게

✅ 시작하기Firebase 메인페이지 ✅ 프로젝트 만들기프로젝트 이름 설정 (ex. pjh shoppingmall)✅ Firestor Database / 데이터베이스 만들기Cloud Firestore의 보안 규칙 : 테스트 모드 시작Cloud Firestore 위치 설

😰 Vite에서의 env파일도대체 왜 안되는거야!!!!!!Vite의 경우 process.env로 불러오는 대신 import.meta.env 객체를 이용해 환경변수에 접근할 수 있도록 하고 있다.클라이언트클라이언트에서