Next 13에서 카카오 로그인을 수행하는 과정을 포스팅해보려합니다. 개발환경은 다음과 같습니다. Next 13, react-query, Strapi (CMS) Next api route 에서 카카오 로그인을 처리하고 User에 대한 접근은 strapi의 API를 통해 수행하였습니다. Routing: Route Handlers | Next.js Using App Router Features available in /app nextjs.org REST API | Strapi Documentation Interact with your Content-Types using the REST API endpoints Strapi generates for you. docs.strapi.io 로그인 로직은 크게 1. ..

많은 사이트에서 글을 작성하고나 편집할 때, 페이지 이동시 알림 창을 띄우는 UI를 많이 봤습니다. 해당 기능을 개발하면서 생각보다 골치 아팠고 처음 알게 된 처리방법을 찾아 포스팅을 해보려 합니다- 구현 요구사항에 따른 처리 프로세스는 크게 세 가지가 있어요. Link 컴포넌트를 통한 이동 막기 새로고침 이동 막기 뒤로 가기 막기 하나 씩 살펴보겠습니다- Link를 통한 이동 막기 next/router 자체에서 라우팅 이벤트를 제공하고 있어요. next/router | Next.js Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook. nextjs...

React-query 란 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 편리하게 제공해주는 라이브러리로 알려진 react-query에 관해 간단하게 공부해보았습니다. 기존 상태 관리 라이브러리 redux 및 RTK를 사용해오면서 비동기 로직을 처리 부분에서 클라이언트 데이터와 서버 데이터가 뒤섞이고 어느 순간 방대한 로직이 되어버려 로직 파악이 힘들어지고 state 관리가 힘들어지는 상황을 몇 번 직면하였습니다. 이에 대한 해결 방안으로 react-query가 사용된다고 하네요. react-query의 최대 강점이 서버, 클라이언트 데이터를 분리해주는 것으로 이해했습니다. 이외에도 react-qeury의 장점으로는 아래와 같이 있습니다. 캐싱 자동 refreshing get을 한 데이터에 대해 up..

Next js의 렌더링 과정을 공부해보면서 간단하게 정리해보았습니다. SSR과 CSR의 수행 방식을 간단히 살펴보고, Next에서 제공하는 함수들에 대해 알아보겠습니다. Next의 렌더링을 살펴보기 전에 렌더링 과정에서 수행되는 Hydration에 대해 먼저 알아보려 합니다. Hydration이란 무엇인가? Hydrate는 Server Side 단에서 렌더링 된 정적 페이지와 번들링 된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS코드를 서로 매칭 시키는 과정을 뜻합니다. Next.js Server에서는 Pre-Rendering 된 웹 페이지를 클라이언트에게 보내고 나서, 바로 리액트가 번들링 된 자바스크립트 코드들을 클라이언트에게 전송하는데 이 과정을 Hydra..

이전 포스팅에서 "CSR에서 렌더링 전에 redirect가 가능한가"에 대해 알아봤습니다. https://keeper.tistory.com/54 ClientSide에서 rendering 전 redirect 가능한가? Next 를 이용하여 파라미터의 유효성을 검사하여 리다이렉트 시키는 과정에서 고민이 생겨 간단하게 포스팅을 남겨보려 합니다. 요구사항은 페이지가 렌더되기 전에 유효성을 검사하여 /404 로 keeper.tistory.com 이 외에도 Next js의 redierct 방식들을 찾아보면서 더 다양한 방법으로 redirect를 제공한다는 것을 알게 되어 다시 포스팅을 해보게 되었습니다. 알게 된 redirect 방식은 크게 3가지가 있습니다. next.config.js middleware Serv..

+ 해당 포스팅은 next@12.x 버전의 내용입니다. Next js에서 URL 파라미터의 유효성을 검사하여 리디렉션 시키는 과정에서 고민이 생겨 간단하게 포스팅을 남겨보려 합니다. 요구사항은 페이지가 렌더되기 전에 유효성을 검사하여 /404 로 리디렉션 시켜라 였습니다. Next js의 SSR을 이용하면 쉽게 getServerSideProps 함수를 이용하여 렌더 전에 서버에서 검사하여 redirect 시킬 수 있었습니다. 그렇다면 서버사이드가 아닌 클라이언트 단에서 렌더 전에 redirect 시킬 수 있을까? 에 대한 질문에 바로 대답을 못하는 것을 느끼고 next의 렌더링 과정에 대한 이해가 부족하다 생각했고 공부해보게 되었습니다. 단순하게 클라이언트에서 useRouter로 redirect 시킨다면..