incodevelop

🚨  TroubleShotting문제 발생의 배경 - As Is무한스크롤 사용 이유1. 데이터를 추가적으로 불러올 때 매끄러운 UI2. 새로운 데이터를 불러올 때 이전 데이터를 refetch 하지 않고 새로운 데이터만 fetch해서 불필요한 네트워크 요청량을 줄일 수 있기 때문에이러한 이유로 useInfiniteQuery를 이용해서 무한스크롤을 구현하기로 했다.그런데, intersection-observer 없이 무한스크롤을 구현해보고 싶었다.굳이? 싶기도 하지만 코딩의 스팩은 시행착오의 결과물이라고 했으니..! 함 해보자방법은 두 가지가 있을 것 같다.1. 스크롤 내린 높이가 전체 높이를 기준으로 전체 높이의 어느정도를 넘기면 fetchNextPage() 2. 스크롤 내린 높이가 intersectio..

🚨  TroubleShotting문제 발생의 배경 - As IsSupabase에 quiz_like라는 테이블에 users라는 column을 user_id의 배열(text[])로 타입을 정해두었다.이 users라는 column을 한 번의 통신으로 update하고 싶었으나,기존 supabase의 update 메서드는 기존 걸 갈아바꾸는 메서드라서 기존의 것을 select 한 뒤 update 하는 총 두 번의 네트워크 통신이 발생했다.내가 원한 것은 한번의 통신으로 기존 것에 추가되도록 하고 싶은 와중에 구글에 찾아보니 이런 글이 있었다.https://github.com/orgs/supabase/discussions/1570 Is there any way to add values to an array col..

🚨  TroubleShotting드래그를 라이브러리 없이 mouseEvent로 구현해보고 있던 중,드래그를 반복적으로 하면 이전에 마지막으로 드래그 했던 요소에서 더 드래그 되지 않고자꾸 처음으로 돌아가는 현상이 발생했다.이런 오류가 발생했다.문제 발생의 배경 - As Is const [startMoveX, setStartMoveX] = useState(0); const [mouseDown, setMouseDown] = useState(false); const [movingX, setMovingX] = useState(0);const handleMouseDown = (clickEvent: React.MouseEvent) => { setMouseDown(true); setStartMove..

이전 포스팅에서는- Server-Action으로 업데이트 한 데이터를 어떻게 화면에 바로 반영하는지- 로딩 중 상태는 어떻게 보여줄 수 있는지에 대해서 다뤘다.이번 포스팅에서는1. 유효성 검사와 error Handling은 어떻게 하는지2. Server-Action으로 낙관적 업데이트는 어떻게 할 수 있는지, useOptimistic()의 버그(?)에 대해서 다룰 예정이다.1. Server-Action에서 유효성 검사와 ErrorHandling은 어떻게 할까?유효성 검사 - zod 라이브러리 사용왜 zod를 사용해야 하는가? 보통 Server-Action을 사용하지 않고 유효성 검사를 할 때에는 useState()를 사용해서 form 태그나 input 태그에 입력되는 값을 state에 할당하고,그 값이 ..

저번 포스팅에서는 Server-Action의 사용법에 대해서 3가지 방법을 다뤘다.이번 포스팅에서는 1. Server-Action으로 네트워크 요청한 데이터를 어떻게 바로 화면에 반영할 수 있는지2. Server-Action 중의 로딩 상태는 어떻게 처리할 수 있는지3. 유효성 검사는 어떻게 하면 좋을지4. Server-Action으로 낙관적 업데이트는 어떻게 하면 좋을지 + useOptimistic의 아직까지의 한계의 내용을 다룰 예정이다. 1. Server-Action으로 네트워크 요청한 데이터를 어떻게 바로 화면에 반영할 수 있을까? 1-1. revalidatePath()첫 번째 방법은 revalidatePath()을 사용하는 방법이다. // Server 컴포넌트"use server"const Da..

Next.js 13 -> 14 로 넘어오면서 Server-Action이라는 게 등장했다."use client"로 클라이언트 컴포넌트를 만드는 것은 많이 해봤지만 Server-Action은 맨날 구경만 하다가 이번에야 기록을 남긴다.Server-Action이란?Server-Action은 서버 단에서 실행되는 비동기 함수로서, form 제출이나 Data Mutation을 다루기 위해 Server와 Client 단 모두에서 쓰일 수 있는 Action을 뜻한다.How To Invoke Server-Action기본적인 사용법은 공식문서에 잘 나와있기에 다루지 않고 공부하면서 몰랐던 점들 위주로 설명하겠다.먼저 비교를 위해서 Server-Action을 사용하지 않고 원래대로 Client 사이드에서 서버로 데이터를 ..

🚨  TroubleShotting 저번 트러블 슈팅에 이어서 사실 한 가지 문제점이자 의문점이 하나 더 있었는데..해결이 되었으니 그냥 넘어갈까 하다가 너무 찝찝해서!저번에 났던 이 오류는 Suspense가 SSR- streaming의 대상이 되고, Suspense와 엮여있는 useSuspenseQuery의 queryFn 내에서 clientSupabase()를 사용하고 있었기 때문에pre-rendering(SSR) 시에는 clientSupabase()가 작동을 안 하기 때문이었다. 문제 발생의 배경 - As Is그런데 하나 더 의아했던 부분은 이 오류가 A -> B 페이지로 넘어갈 때는 뜨지 않았는데, B 페이지에서 새로고침을 하면 뜬다는 것이었다.그래서 서칭을 하던 도중, Next.js 공식문서에 R..

🚨  TroubleShottingQuery data cannot be undefined라는 오류가 발생했다. 문제 발생의 배경 - As Is1. Next.js의 14버전 App-router를 사용 중이다.2. src > app > chat > page.tsx 파일에서 SideBar.tsx라는 클라이언트 컴포넌트를 import 하고 있었다.import SideBar from '@/components/chat/sidebar/SideBar';const ChatPage = async ({ params }: { params: { chatroom_id: string } }) => { ... return ( }> ... ..

🚨  TroubleShottingWhy(이유) ?팀프로젝트 중 코드리뷰 시간에1. useQuery / useSuspenseQuery를 사용할 때 useMemo를 꼭 사용해야하나? 2. useSuspenseQuery를 사용하는 곳들이 많은데 useSuspenseQueries로 한번에 가져오면? 이라는 의문이 들어 팀원들과 회의를 했다.1st How(과정) (1) useMemo는 언제 쓰이는지 부터 다시 생각해봤다.useMemo는 "value"에 대한 memoization이다.여기서의 value는  1) 함수가 return하는 값  2) 또는 값 자체를 뜻한다. 그럼 왜 memoization을 하나? 복잡한 연산이 re-렌더링 될 때마다 실행되는 것을 방지하기 위함이다.(2) 즉, useQuery로 가져온..

📌 Task TODOLIST- [x] 채팅방 나가기 버튼- [x] 채팅방 나갈 시 처리("chattng_room" 테이블 변경, "room" 테이블 변경, "participants" 테이블 변경, "remember_last_msg" 테이블 변경, storage에서 해당 유저의 이미지들 삭제)- [x] 남아있는 사람들에 대한 처리✨ 개발 내용1. 채팅방 나갈 시 처리- "chattng_room" 테이블 변경- "room" 테이블 변경- "participants" 테이블 변경- "remember_last_msg" 테이블 변경- storage에서 해당 유저의 이미지들 삭제 Why(이유) ?한 명이 채팅방을 나가면 해야할 처리들이 정말 많다. 나열해보자면- "chatting_room" table에서 해당 채팅..