🙌 소개 커뮤니티 글, 댓글 및 답글 수정 기능을 구현하던 중에 댓글을 mutation으로 댓글을 수정처리한 뒤 쿼리를 invalidate하면 다시 refetch가 이루어지는 데에 시간이 걸리기 때문에, 확인 버튼을 누른 후 잠시 수정 전의 댓글이 표시되다가 0.5초쯤 후 수정된 댓글이 표시되는 현상이 생기는 것을 발견했습니다. 사용자 경험을 위해 댓/답글 수정에 낙관적 업데이트를 적용시키기로 했습니다! ✔️ Optimistic Update (낙관적 업데이트)이 무엇일까 낙관적 업데이트는 서버의 성공 여부와 관계없이, 해당 서버의 통신이 성공했다고 가정하고 UI를 미리 업데이트하는 방법입니다. 이렇게 하면 사용자에게 빠른 피드백을 제공할 수 있습니다. 주로 게시물 좋아요, 팔로우 요청 등 실시간으로 유저 피드백이 필요한 경우에 사용됩니다. 실제 서버와의 동기화는 백그라운드에서 이루어지며, 성공 시 UI 변경이 확정되고, 실패 시 초기 상태로 롤백됩니다. React Query에서는 …

🙌 소개 대규모 작업을 분할하고 효율적으로 관리하기 멤버십 일수에 따른 멤버십 등급 업데이트와 관련된 을 구현하던 도중, 쿼리 작업의 복잡성으로 인해 실행 시간(540초)에 제한이 걸릴 것 같았습니다. 이를 해결하기 위해 Job Creator → Job Executor 패턴을 사용하기로 했습니다. 이 패턴은 대규모 작업을 분할하고 효율적으로 관리하기 위한 설계 패턴으로, 특히 Firebase Functions와 같이 실행 시간에 제한이 있는 환경에서 매우 유용합니다. 구체적으로, Job Creator는 업데이트할 사용자 목록을 분할하여 작업 큐에 저장하고, Job Executor는 이 큐에서 작업을 가져와 실행합니다. 이를 통해 대규모 작업을 여러 개의 작은 작업으로 나누어, 각 작업이 시간 제한 내에서 완료될 수 있도록 합니다. 이 글에서는 Firebase Functions를 이용하여 Job Creator와 Job Executor 패턴을 구현하는 방법을 설명하고, 이를 통해 회원…

🙌 소개 데이터 유효성 검사는 모든 애플리케이션에서 사용자 입력의 무결성과 정확성을 보장하는 중요한 부분입니다. 수년 동안 은 JavaScript 및 TypeScript 프로젝트에서 스키마 유효성 검사를 위한 라이브러리로 널리 사용되어 왔습니다. 하지만 새로운 경쟁자인 가 강력한 기능과 원활한 TypeScript 통합으로 인기를 얻고 있습니다. 이 글에서는 Yup에서 Zod로 전환해야 하는 이유와 이를 효과적으로 수행하는 방법을 살펴보겠습니다. 🤔 왜 Zod로 전환했을까요? 프로젝트에서 다루는 데이터가 복잡해짐에 따라 Yup의 스키마로는 표현할 수 없는 데이터를 검증해야 하는 상황이 생겼습니다. 이에 Yup 대신 Zod를 사용하게 되었고, 통일성을 위해 기존에 사용하던 Yup을 완전히 대체하기로 했습니다. 잘못된 데이터 유형에 의한 에러는 애플리케이션의 작동에 치명적인 문제를 일으킬 수 있기 때문에 전송하거나 수신하는 모든 데이터의 유효성을 확인하는 것이 중요합니다. 예측하지 못한…