incodevelop

이전 포스팅에서는- 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 ( }> ... ..