작심삼일 개발이야기

상수를 지금까지 잘못 사용하고 있었습니다.

팀원들과의 토론을 통해 새로운 인사이트를 얻게 되었습니다. 예를 들어, 다음과 같은 코드를 살펴보았습니다. const TABS = [{key: "a", label: "A"}, {key: "b", label: "B"}] as const 이 배열은 TABS[0].key나 TABS[1].key와 같이 인덱스를 통해 특정 값을 가져올 수 있습니다. 그러나 이런 방식은 함정을 감추고 있습니다. 만약 배열의 요소가 변경된다면, 예를 들어 TABS[0].key의 값이 'a'에서 'c'로 변경된다면, 코드 전체에서 예상치 못한 문제가 발생할 수 있습니다. 또한, Array.prototype.find() 메서드를 사용하여 원하는 값을 찾는 것도 좋은 방법입니다. 이 방법을 사용하면 배열을 순회하면서 조건에 맞는 값을 찾..

폼을 작성하는 페이지에서 다른 페이지로 이동하려는 시도 시, 이동 전에 현재 작성된 내용이 손실될 수 있다는 경고 메시지가 나타나는 UI는 많은 사용자들이 익히 본 경험이 있습니다. 이러한 상황에서 사용자에게 명확한 선택을 요청하는 UI는 중요한 사용자 경험의 일부입니다. 아래의 사진과 같이 브라우저에서 지원하는 UI를 사용할 수도 있으며 커스텀하여 원하는 UI를 사용할 수도 있습니다. react-router-dom의 6.21.0 버전을 사용하여 커스텀 컴포넌트를 사용할 수 있도록 usePrompt 예시 코드입니다. 현재 프로젝트에서 react-router-dom의 버전을 꼭 확인하시기 바랍니다. 아래의 usePrompt 코드를 확인한 후 설명을 이어서 하겠습니다. import { useEffect } ..

React Hook Form을 통해 동적으로 변하는 폼 상태를 관리하기 위해 useFieldArray를 사용하고 있었습니다. 문제없이 폼 상태를 동적으로 잘 관리한다고 생각했는데 막상 제대로 동작하지 않는 이슈를 발견했습니다. 해당 이슈를 기반으로 간단한 예시를 만들어서 설명하겠습니다. 요구 사항 1. 회원의 이름과 나이를 작성할 수 있는 폼 2. 추가 버튼 클릭 시 회원을 여러 명 등록하도록 input 요소 추가 3. 더미로 변환 버튼 클릭 시 해당 요소의 이름은 dummy로 변경, 나이는 입력 값 그대로 유지 예상 구현 방법 1. 회원의 이름과 나이를 작성할 수 있는 폼 -> input, button 요소와 React Hook Form 연동 2. 추가 버튼 클릭 시 회원을 여러 명 등록하도록 inpu..

폼을 작성할 때, 여러 가지 조건이 발생하는 경우가 있습니다. 특정 값을 선택했을 때만 입력 필드가 나타나야 하거나, 특정 값이 선택되었을 때는 필수 입력 필드가 되지만 다른 값이면 필수가 아닌 등 다양한 상황이 발생할 수 있습니다. 이런 상황에서 Yup의 when 메서드를 사용하면 원하는 조건에 따라 유효성 검사를 동적으로 설정할 수 있습니다. 공식문서의 예시코드를 가져와 when의 사용법에 대해 설명하겠습니다. when의 타입은 아래와 같이 정의되어 있습니다. Schema.when(keys: string | string[], builder: object | (values: any[], schema) => Schema): Schema when 메서드는 두 개의 매개변수를 사용하며, 첫 번째 매개변수는 ..

React Hook Form을 사용하여 폼을 만들 때, 마지막 단계로 폼의 유효성 검사를 하는 것은 중요한 과정 중 하나입니다. 이때 유효성 검사란 사용자가 입력한 데이터가 원하는 규칙에 부합하는지 확인하는 작업을 의미합니다. React Hook Form에서는 register 메서드를 사용하여 각 입력 필드에 대한 유효성 검사 규칙을 정의할 수 있습니다. 그러나 폼이 복잡해지고 유효성 검사 규칙이 많아질수록 JSX 코드는 복잡해지고 가독성이 떨어질 수 있습니다. 이런 상황에서 Yup을 사용하면 유효성 검사 규칙을 한 곳에서 효과적으로 관리할 수 있습니다. Yup은 선언적으로 유효성 검사 규칙을 정의할 수 있어 코드의 일관성을 유지하고 가독성을 향상합니다. 따라서 JSX(TSX) 코드에서는 각 입력 필드에..

폼을 작성할 때 폼 양식을 추가하거나 삭제하는 경우가 생깁니다. 예를 들어, 여러 명의 직원을 추가하거나 삭제하는 폼을 만들 때, useFieldArray를 사용하여 폼 데이터를 유연하게 관리할 수 있습니다. 이를 통해 폼의 양식을 동적으로 조작할 수 있습니다. 아래의 코드 예시를 통해, 직원의 이름과 나이를 받아 폼을 작성하고 추가, 삭제, 수정하는 방법을 확인해 보겠습니다. import { useFieldArray, useForm } from "react-hook-form"; interface Form { person: { name: string; age: string }[]; } const Page = () => { const { control, register } = useForm({ defaul..

폼을 만들 때, 다양한 입력 방식을 다루다 보면 input 뿐만 아니라 select(dropdown), calendar 등의 컴포넌트를 사용하거나, 외부 라이브러리(React-Select, AntD, MUI 등)를 통해 폼을 구성하는 경우가 있습니다. 이때 useForm의 regitser를 연결하는데 어려움을 겪는 경우가 생깁니다. 이런 상황에서 Controller를 사용하면 useForm과 해당 컴포넌트를 효과적으로 연결하여 폼 상태를 관리할 수 있습니다. 아래는 직접 만든 Dropdown 컴포넌트를 예시로 설명한 코드입니다. import { useState } from "React" interface DropdownProps { dropdowns: {key: string; label: string}[..

form의 로직을 작성할 때, 페이지 단위에서 컨테이너 단위로 쪼개 개발하다 보면, 가장 최상위에서 위치한 커스텀 훅에 존재하는 React Hook Form의 메서드들을 각 컨테이너의 props로 전달해야 할 때가 있습니다. 아래의 예시 코드를 살펴봅시다. // 여러 폼 로직을 포함한 커스텀 훅 const useCustomFormHook = () => { const { watch, register } = useForm(); return { watch, register } } // Name, Age로 이루어진 페이지 const Page = () => { const { watch, register } = useCustomFormHook(); return ( ) } const Name = ({watch, re..

client.js:2 The above error occurred in the component: at Header at LoginContainer at Login at div at eval at main at eval at LoginLayout at AuthProvider at RoutePathProvider at Root at ThemeProvider at QueryClientProvider at RecoilRoot_INTERNAL at RecoilRoot at MyApp at I18nextProvider at AppWithTranslation at PathnameContextProviderAdapter at ErrorBoundary at ReactDevOverlay at Container at Ap..

지난 7일 점핏에서 진행하는 서비스에서 접근성이 왜 필요할까? 에 다녀와서 주절주절 써보려 한다. 평소 개발을 하며 접근성이 필요한 것은 알고 있었지만 왜 필요한지는 크게 와닿지 못해 신청했는데 당첨되어서 갔다 왔다. 추첨을 통해 총 20명을 뽑고, 평일 저녁 시간이라 사람들이 많이 안 올 것 같았는데 생각 외로 모두 참석해서 놀라기도 했다. 접근성이란? 다양한 사용자를 포괄하기 위해 처음부터 다양한 사용자를 고려하여 설계하여 각 사용자에게 장애가 장벽이 되지 않도록 장벽을 작용하는 것을 제거하고 더 이상 장애를 느끼지 않게 하는 것 접근성이 중요한가? 아래의 두 숫자는 2,378,464 → 대구광역시 인구수 2,561,623 → 경상북도 인구수 를 나타내는 숫자이다. 2,652,860 → 등록 장애인 ..