개발일지

많이 어려워했던 react-Query를 결국 해냈다!물론 다른 팀원의 코드를 참고했지만 query에 대해 많이 배울 수 있었다.파일을 나눠 서버 데이터를 요청하는 api파일, 서버 데이터를 받아 가공하는 util파일로 나누어 작업했다 API 파일비동기 함수를 통해 서버로부터 데이터를 요청한다arg는 데이터 정렬을 위한 state와, useSearchParams로 받는 category를 받는다파이어베이스에서 받은 데이터를 return 해주면 완성!export async function getMainProducts() { const response = await getDocs(query(collection(db, 'product'), orderBy('createdAt', 'desc'))); const f..

어제 파이어베이스에서 받아온 데이터를 useEffect에 담아 파싱 해서 state에 담아줬다useQuery를 사용하면 useEffect과 state를 사용할 필요 없이 바로 가공해서 data를 사용하면 됐는데 잘못된 코드를 쓰고 있었던 것 useQuery로 데이터 통신하는 것에 대해 이해도가 많이 떨어지는 거 같다 하나씩 다시 코드를 살펴보자지난 글에서 사용한 React Query 사용 오류에 대한 수정 코드{isLoading, isError, data, refetch } - useQuery에 내장되어 있는 기능들 로딩, 에러 상태 관리 변수, 요청 데이터 저장 변수, 쿼리를 수동으로 불러오는 함수를 사용했다queryKey - data 변경 시 queryKey를 이용하면 된다(등록, 수정, 삭제 등)q..

파이어베이스에 저장된 데이터 불러오는 로직을 React Query를 이용해 Migration 했다 이전에 정리한 todoList Query는 이전 버전으로 문법이 많이 다르니 공식문서를 꼭 참고하도록 하자.queryKey는 배열로 만들어주고 queryFn에 서버 데이터를 가져오는 로직을 작성하면 된다가져온 데이터를  useEffect을 이용해 id를 넣어주고 state에 저장(파이어베이스는 데이터를 가져온 후 문서의 id를 넣어준 후 다시 배열에 담아야 한다 파이어베이스 문법특성 때문이니 꼭 필수일 필요는 없다)정렬 버튼을 클릭할 때마다 데이터를 새로 요청해서 받아와야 하는데 쿼리로 작성하고 나니 정렬기능이 작동하지 않는다는 문제가 발생했다문제해결 방법useEffect 의존성배열에 data , selec..

이번 팀 프로젝트 주제는 마켓컬리와 같은 식품 쇼핑몰로 정해졌다카테고리 버튼을 클릭하여 상품 리스트 페이지에 들어가면 상품 데이터들이 높은 가격 기준으로 정렬된 상태로 가져와야하는데 상품 등록 시 상품 가격 타입을 number로 넣었지만 파이어베이스에서 문자열로 변환되어 등록되어 버린다 문자인 상태에서 orderBy로 정렬하게 되면 유니코드로 정렬이 되기 때문에 원하는 정렬 기준을 맞출 수 없다는 문제가 발생했다 내가 하고자 하는 것상품 가격을 기준으로 오름, 내림 차순을 만들고 싶다문제해결을 위해 시도한 방법파이어베이스로 전체 데이터를 불러온 뒤 sort를 이용해 정렬해 줬다이 방법으로 정렬은 가능하지만 클라이언트가 아닌 서버에서 요청값에 정렬을 요청해서 받아야 한다는 피드백을 받고 다시 수정하기로 했..

Tree계층 구조를 시각적으로 잘 보기 위한 규칙(위 → 아래). Subtreetree의 한 부분, root부터 시작해서 leaf들에 이르기까지의 범위 RootTree 또는 Subtree의 첫 번째 노드( EX. root layout )   Leafchildren이 더 이상 없는 nodelayoutsegment와 그의 자식 node에 일관된 UI를 적용하는 데 사용된다자식 node에 있는 요소들이 공통으로 적용을 받아야 하기 때문에 반드시 children prop이 존재해야 한다주로 headers, footers, sidebars 등과 같은 공통된 요소를 정의하는 데 사용된다같은 레이아웃 내에서 다른 경로 간의 전환 시 리렌더링이 발생하지 않고 상태가 유지된다 template라우팅 탐색 시 각 하위 항목..

Router MPA , SPA  CSR(Client Side Rendering) SSG(Static Site Generation) ISR(Incremental Static Regeneration) SSR (Server Side Rendering) Pages routerpage 폴더에 원하는 페이지의 파일을 만들어 라우팅 하는 것App routerapp 폴더 안에 폴더를 생성하고 page 파일을 만들어 라우팅 하는 것MPA ( Multi-Page Application )다중페이지 애플리케이션여러 독립적인 HTML페이지로 구성되어 있으며 서버 측 렌더링으로 사용자가 페이지를 요청할 때마다 전체 파일을 서버에서 다시 받아와야 하기 때문에 페이지 이동 및 렌더링 시 깜빡임 등이 있다 SPA ( Single P..

Next.js버셀에서 만든 React 프레임워크 정적사이트 생성과 같은 기능을 제공하여 SPA(Single Page Application)를 쉽게 구축할 수 있도록 한다동적 라우팅, 데이터 미리 가져오기, 코드 분할, 이미지 최적화 등을 지원한다 TypeScript를 포함한 다양한 언어와 함께 사용할 수 있다 CRA 설치 명령어npmyarnnpx create-react-app [프로젝트명]yarn create next-app [프로젝트명] 패키지 설치 명령어npmyarnnpm install next react react-domyarn add next react react-dom 프레임워크애플리케이션 개발을 위해 구조와, 규칙 등을 제공하는 도구모음(ex. ppt)코드의 흐름을 제어하는 것이 원래 개발자의..