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 사이드에서 서버로 데이터를 ..