choijming21 님의 블로그

React Hook Form과 Zod를 활용한 효율적인 폼 유효성 검사

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

[ Troubleshooting🛠️ ] Next.js에서 Tailwind CSS 설치 시 발생하는 오류 해결하기

Next.js 프로젝트에 Tailwind CSS를 설치하는 과정에서 "npx tailwindcss init -p" 명령어를 실행했을 때 "could not determine executable to run" 오류가 발생하는 경우가 있었습니다. 이 글에서 이 문제의 원인과 해결 방법에 대해 정리해보겠습니다!    1.  문제 발생❓Next.js 프로젝트를 설정하고 Tailwind CSS를 설치한 후 초기화 명령어를 실행했을 때 다음과 같은 오류가 발생했습니다.npx tailwindcss init -pnpm error could not determine executable to runnpm error A complete log of this run can be found in: /Users/username/..

[ Troubleshooting🛠️ ] Next.js 성능 최적화: 클라이언트 컴포넌트 분리를 통한 이미지 초기 로딩 속도 개선

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

[ Troubleshooting🛠️ ] 패키지 매니저 충돌 트러블 슈팅 npm, yarn, pnpm 간의 전환

1.  문제 발생❓"pnpm install" 오류와 패키지 매니저 충돌 Next.js 프로젝트 작업 중 Vercel에 배포하려고 했지만 pnpm install 명령이 실패하는 문제가 발생했습니다. 로컬에서는 일반적으로 npm을 사용하고 있었으나, Vercel에서는 pnpm을 사용하려고 시도하면서 충돌이 발생한 것 입니다.  2.  원인 추론 🔎 발단: 전역 패키지 매니저 설정초기 상황저는 전역으로 Yarn 패키지 매니저를 사용하고 있었습니다.프로젝트에서 자연스럽게 Yarn을 사용하게 되었고, Corepack의 자동 설정으로 packageManager 필드가 추가되었습니다.겉보기에는 문제없는 로컬 개발 환경로컬에서 Yarn으로 프로젝트가 잘 실행되었습니다.모든 것이 정상적으로 작동하는 것처럼 보였습니다...

안녕하세요. 오늘은 Next.js가 제공해주는 Link 태그를 사용하다가 새탭에서 열고 싶을 때 어떻게 해야하는지 정리해보려고 합니다! 간단한 target="_blank" 추가만으로 가능하니 짧게 설명해보도록 하겠습니다.   🧚 Next.js의 Link 컴포넌트는 어떻게 동작할까? Next.js의 Link 컴포넌트는 내부적으로 HTML의 태그를 렌더링합니다. 이는 일반적인 웹 표준을 따르면서도 클라이언트 사이드 라우팅의 장점을 가져오기 위한 설계입니다.import Link from 'next/link';function MyComponent() { return ( About 페이지로 이동 );} 위 코드는 결국 HTML에서 다음과 같이 렌더링됩니다.About 페이지로 이동    🧚 새 탭에서..

1.  문제 발생❓React 폼 컴포넌트를 여러 곳에서 재사용하면서 발생한 문제입니다:같은 입력 폼을 여러 페이지에서 재사용해야 함각 페이지별로 자료 유형(materialType)만 다름자료 유형은 4가지로 고정: case-studies, company-intro, 2025-dxreport, digital-skill-standard 폼 컴포넌트에 material prop을 전달해 구분폼 제출 시 스프레드 연산자를 사용해 formData에 materialType 추가:body: JSON.stringify({ ...formData, materialType: material })문제점: 폼 데이터를 서버에 전송할 때 materialType 필드가 페이로드에는 있지만, 검증 후의 데이터에서는 사라지는 문제가 발..

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

Next.js에서 특히 App Router를 사용할 때 폴더 구조는 코드 유지보수성과 개발 효율성에 큰 영향을 미칩니다. 이 글에서는 랜딩 페이지 중심의 Next.js 프로젝트에서 촐더 구조를 개선한 사례를 공유합니다!  📌 기존 폴더 구조의 문제점 📌프로젝트 초기에는 다음과 같은 구조로 시작했습니다.📦src ┣ 📂app ┃ ┣ 📂components ┃ ┃ ┣ 📂landing ┃ ┃ ┃ ┣ 📜Accomplishment.tsx ┃ ┃ ┃ ┣ 📜CaseCard.tsx ┃ ┃ ┃ ┣ 📜CaseSection.tsx ┃ ┃ ┃ ┣ 📜Closing.tsx ┃ ┃ ┃ ┣ 📜CurriculumCard.tsx ┃ ┃ ┃ ┗ ... ┃ ┃ ┣ 📂typography ┃ ┃ ┃ ┣ 📜H2.tsx ┃ ┃..

안녕하세요! 오늘은 React와 styled-components를 사용하여 직접 만든 커스텀 토글 버튼 구현 방법에 대해 공유하려고 합니다. 단순히 켜고 끄는 기능뿐만 아니라, 상태에 따라 "ON"과 "OFF" 텍스트도 변경되는 토글 버튼을 만들어보겠습니다.   ⭐ 최종 결과물 ⭐ 원형 핸들이 왼쪽/오른쪽으로 움직입니다.상태에 따라 배경색이 변경됩니다.상태에 따라 "ON"/"OFF" 텍스트가 표시됩니다.상태에 따라 텍스트 색상이 변경됩니다.      코드 구현1. 컴포넌트 구조 (ToggleButton.tsx)import React, { useState } from "react";import * as S from "./toggleButton.style";const ToggleButton = () => {..

useMemo와 React.memo 그리고 useCallback에 대해 공부한 것을 정리해보겠습니다! 먼저, Memoization이란! 이미 계산해본 연산 결과를 기억해두었다가 동일한 연산을 해야할 때 다시 연산하지 않고 기억해두었던 데이터를 반환시키는 방법입니다. 마치 시험을 볼 때 이미 풀어본 문제는 다시 풀어보지 않아도 답을 알고 있는 것과 유사합니다.   ✅ useMemo란? useMemo는 특정 값이나 참조가 변경될 때만 재계산을 수행하고 그렇지 않으면 이전에 계산된 결과를 재사용합니다.복잡한 계산이나 처리가 필요한 경우렌더링 성능 최적화가 필요한 경우 기본적으로 React는 부모 component로 부터 받는 state, props가 변동될 경우 자식 component도 리렌더링됩니다. 하지만..