프론트엔드

[Next.js + prisma + planetScale] Cheer luv 목표 공유 앱

서비스 부터 소개하겠습니다. 목표를 공유하고 응원하는 간단한 Todo App입니다~ 신년 목표를 작성하고 서로 응원하는 시간을 가져봐요! cheer luv - 목표를 공유해요 cheer-luv.vercel.app To Do List를 갑자기 개발한 이유 완전 J인 사람이라 신년 목표를 계획하고 있었는데 뭘 해야할지 고민이 됐어요. '다른 사람의 신년 목표는 무엇일까?' 생각이 들어서 목표를 공유하는 서비스를 개발하게 됐습니다. 요즘 MVP 개발을 최대한 빠르게 하는걸 목표로 여러가지 알아보고 있는데, Next + Prisma + planetScale을 이용하면 풀스택 어플리케이션을 개발할 수 있을 것 같아서 기술 공부 목적으로 개발했습니다. Next를 애용하는 사람 중 한 명인데, api 기능은 써본적이..

[React-query] 기존 Query Data 갱신, 삭제하는 법

서비스를 만들다 보면 어떤 동작을 했을 때, 기존의 데이터를 새롭게 받아오거나, 삭제해야 하는 경우가 있다. 예를 들면, 다음이 상황이 있을 수 있다. 새로운 포스트를 작성했을 때, 포스트 데이터를 새롭게 받아오는 상황 로그아웃을 했을 때, 사용자 프로필 데이터를 삭제하는 상황 이번 시간에는 React-query를 사용할 때, 기존의 데이터를 갱신하는 법과 삭제하는 법에 대해서 알아보겠다. React-query를 이용해 데이터 받아오기 React-query는 서버 상태 관리 라이브러리 중 하나이다. 해당 글에서 React-query의 자세한 사용 방법은 다루지 않겠다. 구체적인 사용 방법이 궁금한 사람은 아래의 공식문서를 확인하는 것을 추천한다. TanStack Query | React Query, S..

SSR에서 로그인 유무 확인하기 (Feat. Next.js)

서비스를 개발하다 보면, 사용자의 로그인 유무에 따라 다른 화면을 보여줘야 하는 경우가 있다. 예를 들면, 로그인하지 않은 사용자에게는 로그인 버튼을 보여주고, 반대로 로그인한 사용자에게는 프로필이나 로그아웃 버튼을 보여주는 식이다. 이번 시간에는 SSR에서 로그인 유무를 확인하는 방법을 공유하고자 한다. 일러두기 해당 글에서는 원활한 소통을 위해 SSR을 Frontend의 Server, CSR을 Fronted의 Client의 의미로 사용할 것이다. 개발환경 Typescript React Next.js JWT axios @tanstack/react-query nookies 기존 CSR에서 처리하는 방법 SSR에서 처리하는 방법을 알아보기 전에, 기존 CSR에서 어떻게 했는지 소개하겠다. 전통적인 방법 일..