Next.js 14

Next.js

Next.js 14에서 Context를 사용해서 토스트 메시지 구현하고 최적화하기

계정이 존재하지 않거나 일부 정보가 틀렸을 때 사용자에게 안내 메시지를 제공하기 위해 애플리케이션 전역에서 사용할 토스트 메시지를 구현했습니다. 모든 컴포넌트에서 토스트 메시지를 설정할 수 있으며 토스트 메시지 관련 상태값이 변경되었을 때 이를 구독하고 있는 가 호출될 수 있게 리액트의 Context를 사용했습니다. 이 글에서는 리액트의 Context를 사용해서 토스트 메시지를 구현하는 방법과 Context를 사용했을 때 불필요한 렌더링이 발생하지 않도록 최적화하는 방법을 다루고 있습니다.ContextContext는 리액트 컴포넌트간 어떠한 값을 공유할 수 있게 해주는 기능입니다. 어떠한 값이란 원시 타입의 값일 수도 있고 객체일 수도 있습니다. 리액트에서 Context를 사용하는 이유는 대부분 애플리케..

Next.js

Next.js 14에서 NextAuth 없이 로그인 인증 구현하기

이 글은 24.04.13 기준으로 작성되었습니다. 따라서 이후에는 NextAuth가 업데이트 되었을 수 있습니다. Next.js 공식문서 튜토리얼을 통해 처음 NextAuth를 알게 되었고 이를 활용하여 로그인 인증을 구현했습니다. 이후, NextAuth 없이도 로그인 인증을 구현했습니다. NextAuth Next.js 애플리케이션에서 사용할 수 있는 인증 및 인가 솔루션입니다. 이를 사용하면 다양한 인증 공급자(예: Google, Facebook, GitHub 등)를 통해 사용자를 인증하고, OAuth 및 OpenID Connect를 통해 사용자의 프로필 및 권한 정보를 가져올 수 있습니다. 기술 사양 이 글은 다음과 같은 기술 사양을 기준으로 작성되었습니다. 프론트엔드 : Next.js 14버전 이상..

산본개발자
'Next.js 14' 태그의 글 목록