프로젝트25 [프로젝트] 리액트 쿼리: server데이터로 client 데이터를 어떻게 관리하지.. 프로젝트를 하면서 리액트 쿼리를 쓰며 많은 고민한 부분과 해결과정을 정리해보려고 한다. 초기 랜더링아래와 같은 예약 사이트가 있다고 하자아래 화면은 리액트 쿼리의 서버 데이터를 받아 랜더링 된 화면이다. 받은 데이터는 일단 다음과 같다. "updated": datetime string, // "2024-09-07T09:37:12.881Z" "start": datetime string, "end": datetime string, "attendees": [ { "email": "mooboongofficial@gmail.com", "displayName": "{\"id\":1,\"type\":\"personal\",\"name\":\"관리자\"}", .. 2024. 10. 5. [프로젝트] 랜더링 최적화: 전역 상태의 문제? 프로젝트를 하던 도중 랜더링 부분에서 최적화의 필요성이 느껴져서 프로파일러를 켜본 순간헉.... 최악의 랜더링이 펼쳐졌다. 그래서 내가 해결한 것을 정리해보고자 한다. 무엇이 문제일까 계속해서 찾아보았다. 하면서 쿼리가 문제일까 하며 쿼리 데브툴도 쓰고 다 시도해 본 것 같다 ㅜㅜ쿼리 캐싱 데이터를 보고 관리하기 편해서 알면 좋을 것 같다 그래서 리액트 프로파일러를 통해 원인을 찾아보았다 그렇다면 아무리 생각해도 기존 hook에서는 문제가 될 것이 없었다.. 그렇다면 zustand로 쓴 전역상태가 문제가 있다는 것이었다. 그래서 찾아보니 프로파일러에서는 zustand도 hook으로 인식된다는 것을 알게 되었다. 아래 드래그를 전역상태로 관리한 것이 문제였다 전역상태의 코드import { dragWe.. 2024. 10. 5. [프로젝트][React] 예약 사이트 기능 구현하기 (when to meet) 목차이번 기능을 구현하면서 비대화형 이벤트에 대해서 많이 알아갔다.또한 비대화형 이벤트가 생각이상으로 까다로워서 당황스러웠다... 그래서 이번 기회에 한번 정리해보려고 한다. 완성한 모습대충 주요 기능만 완성하였다... 구현 시 고민했던 부분들1. 컴포넌트의 merge 컴포넌트가 합쳐지는 것이 너무 까다로워서 display의 여부로 만들었고 첫인덱스의 배열크기를 늘렸다.처음에는 배열을 늘리고 줄이는 식으로 했는데 그렇게 하면 인덱스 다루는 것이 너무 까다로워 배열의 크기는 바꾸지 않는 선으로 다시 진행했다. 각 배열 아이템의 타입 정의export interface ReservationInterface { content: string; //내용을 담을 곳 time: number; display:.. 2024. 9. 12. [재활용 프로젝트][리액트] 재활용 플랫폼 완성 https://sejong-reuse-hub.vercel.app/ Sejong Reuse Hub sejong-reuse-hub.vercel.app재활용 플랫폼 링크 한 학기 하면서 드디어 프로젝트를 끝냈다. 초반에 느슨하게 하다가 막판에 몰아 달린 것 같다. 프로젝트를 하면서 많은 것을 배웠고 아직도 갈길이 멀지만 나름 완성하고 보니 성장한 것 같아 뿌듯하다. 메인 페이지 지도 화면 게시물 등록하는 페이지 게시물 페이지 2024. 6. 11. 이전 1 2 3 4 ··· 7 다음 728x90
