choijming21 님의 블로그

폼 관리는 웹 개발에서 빈번하게 마주지는 과제입니다. 특히 유효성 검사는 사용자 경험과 데이터 무결성을 위해 필수적인 요소입니다. 이번 글에서는 Next.js에서 폼 관리를 간소화 해주는 React Hook Form과 타입스크립트와 함께 사용하기 좋은 스키마 검증 라이브러리인 Zod에 대해 알아보겠습니다.   🪴 React Hook Form이란?React Hook Form은 리액트 폼을 위한 유연하고 효율적인 라이브러리로, 폼 상태 관리와 유효성 검사를 간소화 합니다. 기존의 Formik, Redux-Form과 같은 라이브러리들과 비교했을 때 다음과 같은 장점이 있습니다:가벼운 용량: 불필요한 리렌더링을 최소화하여 성능이 우수합니다.간결한 코드: Hooks 기반의 API로 직관적인 사용법을 제공합니다...

1.  문제 발생❓ params를 이용한 동적 렌더링 페이지 4개(DynamicPage 컴포넌트)를 구현했습니다. params의 pageId값을 받아 pageId값과 일치하는 데이터를 찾아 각각의 pageConfig 데이터를 초기에는 클라이언트 측에서 렌더링 하는 방식으로 구현했습니다. 하지만 전체 페이지가 클라이언트 컴포넌트로 설정되어 있어 이로 인해 초기 페이지 로딩 시 이미지 렌더링 속도가 현저히 느려지는 문제가 발생했습니다.  2.  원인 분석 🔎 Next.js에서 클라이언트 컴포넌트 "use client"로 설정된 컴포넌트는 서버에서 사전 렌더링 되지 않고 클라이언트 측에서 hydration이 완료된 후에만 완전히 렌더링됩니다. 전체 DynamicPage 컴포넌트가 클라이언트 컴포넌트였기 때문..

Next.js 애플리케이션 개발할 때 반응형 UI를 구현하기 위해 디바이스 타입을 감지하는 것은 중요한 작업입니다. 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 모두 활용하는 Next.js에서는 이 두 환경에서 일관된 디바이스 감지 방법이 필요합니다!  이 글에서는 서버 컴포넌트에서 초기 디바이스 판별을 하고, 이를 클라이언트 컴포넌트로 전달하여 실시간으로 반응형 UI를 구현했던 방법을 설명드리겠습니다!🙆‍♀️     ✅ 서버 사이드에서 디바이스 감지하기 ✅먼저 서버 컴포넌트에서 userAgent를 기반으로 디바이스 타입을 감지하는 함수를 만듭니다. ☑️ userAgent()란?Next.js의 내장 기능으로 next/server 모듈에서 userAgent 함수를 제공합니다. 이 함..

Jotai란?React 상태관리 라이브러리 중 하나로 비교적 매우 간단하고 작은 단위로 전역 상태 관리가 가능매우 작은 3kb의 번들 사이즈와 타입스크립트에 지향적Jotai는 React.js, Next.js, React Native에서 사용이 가능  jotai의 기본 사용법기본적으로 Jotai는 React 내의 state, useState와 유사한 모양이기 때문에 쉽게 입문할 수 있습니다. 전역 관리 atom을 생성하고, 생성된 atom을 컴포넌트 내에 불러와 사용한다고 생각하면 됩니다.  1. atom: atom을 생성하고 괄호 안에 초기값을 넣을 수 있습니다.const counter = atom(0);  2. useAtom(read/write): 생성된 atom을 불러와서 useState와 동일하게 ..

Next.js 는 지속적으로 발전하는 React 기반 웹 프레임워크입니다. 최근 버전에서 라우팅 시스템에 큰 변화가 있었습니다. 이 블로그 포스트에서는 Next.js의 새로운 라우팅 시스템, 특히 useRouter의 대체제인 usePathname, useSearchParams, useParams 그리고 useRouter의 주요 메서드들에 대해서도 자세히 알아보겠습니다.     1. useRouter 란?useRouter는 Next.js에서 제공하는 훅 중 하나로, 현재 페이지의 라우터 정보에 접근할 수 있게 해줍니다. 이를 통해 URL의 정보를 얻거나, 프로그래밍 방식으로 페이지 간 이동을 할 수 있습니다.  ⭐⭐⭐⭐⭐   useRouter는 오직 클라이언트 컴포넌트에서만 사용할 수 있습니다. 서버 컴포..