계정이 존재하지 않거나 일부 정보가 틀렸을 때 사용자에게 안내 메시지를 제공하기 위해 애플리케이션 전역에서 사용할 토스트 메시지를 구현했습니다. 모든 컴포넌트에서 토스트 메시지를 설정할 수 있으며 토스트 메시지 관련 상태값이 변경되었을 때 이를 구독하고 있는 가 호출될 수 있게 리액트의 Context를 사용했습니다. 이 글에서는 리액트의 Context를 사용해서 토스트 메시지를 구현하는 방법과 Context를 사용했을 때 불필요한 렌더링이 발생하지 않도록 최적화하는 방법을 다루고 있습니다.ContextContext는 리액트 컴포넌트간 어떠한 값을 공유할 수 있게 해주는 기능입니다. 어떠한 값이란 원시 타입의 값일 수도 있고 객체일 수도 있습니다. 리액트에서 Context를 사용하는 이유는 대부분 애플리케..
이 글은 24.04.13 기준으로 작성되었습니다. 따라서 이후에는 NextAuth가 업데이트 되었을 수 있습니다. Next.js 공식문서 튜토리얼을 통해 처음 NextAuth를 알게 되었고 이를 활용하여 로그인 인증을 구현했습니다. 이후, NextAuth 없이도 로그인 인증을 구현했습니다. NextAuth Next.js 애플리케이션에서 사용할 수 있는 인증 및 인가 솔루션입니다. 이를 사용하면 다양한 인증 공급자(예: Google, Facebook, GitHub 등)를 통해 사용자를 인증하고, OAuth 및 OpenID Connect를 통해 사용자의 프로필 및 권한 정보를 가져올 수 있습니다. 기술 사양 이 글은 다음과 같은 기술 사양을 기준으로 작성되었습니다. 프론트엔드 : Next.js 14버전 이상..
원격 서버를 통해 제품 이미지를 가져왔습니다. 이 때 이미지의 크기가 일정하지 않아서 명시적으로 이미지 크기를 지정할 수 없었습니다. 이번 아티클은 해당 문제를 해결하는 과정을 정리해보았습니다. Next.js의 Image 컴포넌트는 자동 이미지 최적화를 위한 기능으로 HTML 요소를 확장합니다.import Image from 'next/image'WebP 및 AVIF와 같은 최신 이미지 형식을 사용하여 각 디바이스에 적합한 크기의 이미지를 자동으로 제공합니다.이미지가 로드될 때 레이아웃 쉬프트를 방지합니다.브라우저 지연 로딩을 사용하여 이미지가 뷰포트에 들어올 때만 로드됩니다.원격 서버에 저장된 이미지도 온디맨드 이미지 크기 조정이 가능합니다.온디맨드 이미지요청 시에 이미지를 동적으로 생성하거나 조정하..
1. Tailwind CSS클래스 기반으로 스타일을 지정하는 CSS 프레임워크장점클래스 기반으로 스타일을 지정해서 HTML 코드를 작성할 때 더 빠르게 스타일 적용 가능사전 정의된 유틸리티 클래스로 새로운 스타일을 만들지 않고 빠르게 작업 가능구성 가능한 많은 옵션을 제공하여 프로젝트의 디자인 시스템에 맞게 쉽게 조정 가능단점클래스 기반의 스타일 지정 방식은 기존의 CSS 작성 방식과 다르기 때문에 익숙해지는데 시간이 걸림HTML 파일에 많은 클래스 추가로 파일 크기가 커질 수 있다.서버 사이드 렌더링 서버 사이드 렌더링을 하더라도 Tailwind 클래스를 적용하여 일관된 스타일을 유지할 수 있다.빌드 단계에서 CSS로 컴파일되므로 서버 사이드 렌더링 시에도 문제 없이 사용할 수 있다.2. styled-..
1. Next.jsNext.js는 Node 버전 18.17 이상을 요구한다.자동 설치 시 설치 방법이 굉장히 간단하다.npx create-next-app@latest // 설치npm run dev // 개발 서버 실행2. ESLint일관성 있는 방식으로 구현할 수 있도록 해준다.코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구에디터에 적용해서 사용하는 것으로 eslint Extension과 eslint 라이브러리를 모두 설치해줘야 된다.프로젝트에 적용Next.js는 바로 사용할 수 있는 통합 ESLint 환경을 제공, 현재로서는 딱히 건들게 없어보인다.3. Prettier줄 바꿈, 공백, 들여 쓰기 등 텍스트를 일관되게 작성할 수 있게 해준다.개발자가 작성한 코드를 정해진 코딩 스타일에 맞게..
