들어가며폼에서 특정 조건에 따라 필드를 보여주거나 숨기는 건 아주 흔한 요구사항입니다.예를 들어, 드롭다운에서 "기타"를 선택했을 때만 추가 입력란이 나타나는 경우죠. 하지만 React Hook Form과 Zod를 함께 사용할 때, unmount된 필드가 여전히 검증 에러를 발생시키는 문제를 겪으신 적 있나요? 😇이 글에서는 이 문제의 원인과 어떤 식으로 해결하였는지 작성해 보려고 합니다.shouldUnregister는 무엇인가?우선, 예제를 보기 전에 shouldUnregister가 무슨 속성인지 알아야 합니다.shouldUnregister는 React Hook Form의 옵션으로, 컴포넌트가 unmount될 때 해당 필드를 폼 상태에서 제거할지 결정합니다.기본값은 false인데, true로 설정하면..

🚀 서론프로젝트를 진행할 때마다 저는 오랫동안 Layer-based 구조로 개발해 왔습니다. 처음 회사에서 접한 컨벤션에 익숙해지기도 했고, 컴포넌트는 components, 훅은 hooks, 유틸리티는 utils에 두는 방식이 자연스럽게 몸에 배어 있었습니다. 그래서 초기에는 큰 불편함을 느끼지 못했습니다.하지만 프로젝트 규모가 커지고 기능이 복잡해질수록 몇 가지 문제가 반복해서 드러나기 시작했습니다.기능 코드의 분산: 새로운 기능을 만들 때마다 역할별 폴더에 나누어 작성하다 보니, 하나의 기능과 관련된 코드가 여러 폴더에 흩어지는 상황이 발생했습니다.예: user 기능 구현 시hooks/user/useUserQuery.tsutils/user/user-format.tscomponents/user/use..

기존 ESLint 8.x 버전이 2024년 4월에 지원이 공식적으로 종료(deprecated)되면서, 최신 ESLint 9으로의 마이그레이션이 필수적이 되었습니다. 그러나 ESLint 9에서는 기존 .eslintrc.js 방식 대신 새로운 Flat Config 포맷(eslint.config.mjs 또는 .js) 을 사용해야 하므로, 단순한 버전 업그레이드가 아닌 구조적 업데이트가 필요합니다.또한 Prettier와 ESLint를 함께 사용할 경우 복잡했던 의존성 관리를 개선하기 위해, 이번 마이그레이션에서는 Prettier 대신 @stylistic/eslint-plugin (eslint-stylistic) 을 도입하여 코드 스타일 규칙을 ESLint 하나로 일원화했습니다.💡 주의:ESLint 9에서 .e..

왜 이 글을 작성하게 되었나?평소 React 개발하며 Hook을 코드 분리와 책임 분리 등을 위해 자연스럽게 사용해 왔습니다. Hook이라는 기능이 생긴 후로 정말 편리하게 활용해왔는데요, 최근 면접에서 "useABC 같은 Custom Hook이 어떻게 동작하는 건지, 자바스크립트의 어떤 원리로 가능한 건지" 질문을 받았을 때 제대로 답변하지 못했습니다. 😂사용하기만 해봤지 내부 동작 원리는 깊이 생각해보지 못했던 것 같습니다. 그래서 이번 기회에 어떤 원리로 동작하는지 정리해보겠습니다.Hook이란?Custom Hook의 동작 원리를 이해하기 전에, 먼저 Hook이 무엇인지 간단히 살펴보겠습니다. React Hook은 2019년 React 16.8에서 도입된 기능으로, 함수형 컴포넌트에서도 상태와 생명..

이 글은 React에서 다국어화(internationalization, i18n)를 구현하는 방법을 다룹니다.다국어화란?다국어화는 애플리케이션을 여러 언어와 지역에서 사용할 수 있도록 설계하고 구현하는 과정입니다. 'i18n'이라는 용어는 'internationalization'의 첫 글자 'i'와 마지막 글자 'n' 사이에 18개의 글자가 있다고 해서 만들어진 약어입니다.환경 설정하기필요한 패키지 설치가장 널리 사용되는 React 다국어화 라이브러리인 react-intl을 사용하겠습니다.npm install react-intl# 또는yarn add react-intl기본 설정src/App.js 파일을 열고 다국어 설정을 위한 기본 구조를 추가합니다. 먼저 애플리케이션의 최상위에서 IntlProvider..

최근 프론트엔드 개발에서는 Next.js와 Tailwind CSS 조합이 채용공고에서 자주 등장할 만큼 인기 있는 기술 스택으로 자리 잡았습니다. 특히 AI 서비스인 바이브코딩과 같은 프로젝트에서도 이 두 기술을 함께 사용하는 사례를 쉽게 찾아볼 수 있습니다. 이런 흐름을 보며 저 역시 Next.js와 Tailwind CSS를 본격적으로 공부하게 되었고, 그 과정에서 Tailwind CSS에서의 조건부 스타일링 방법에 대해 궁금증이 생겼습니다.기존의 CSS-in-JS 환경에서는 props를 활용해 손쉽게 조건부 스타일을 적용할 수 있었지만, Tailwind CSS는 클래스 기반 스타일링 방식이기 때문에 조건부 스타일을 적용할 때 문자열 안에서 로직을 처리해야 하는 불편함이 있었습니다. 특히 백틱(`)을 ..