작심삼일 개발이야기

여유: 여유와 함께 떠나보는건 어떠세요?❓ Problem : 회원가입 없이 간단히 여행 일정을 공유하고 싶을 때, 어떻게 할까요? 😮❗️ Idea : 트리플 같은 어플을 사용할 때, 회원가입이 진입장벽으로 느껴지곤 했어요. 그렇다면, 회원가입 없이도 간편하게 일정을 공유할 수 있다면 어떨까요? 🤔💯 Solution : 회원가입 절차를 없애고, 바로 일정을 공유할 수 있도록 서비스 개선을 시도해보았습니다! 😁 팀소개개발 : 최수혁디자인 : 박병헌 서비스 소개어떤 여행을 떠나실건가요?어떤 여행을 계획 중이신가요?먼저 여행에 맞는 제목과 날짜를 입력해주세요! 이제 일정에 추가할 장소를 검색해보세요. 장소를 선택하면, 추가로 방문 날짜, 비용, 메모까지 작성할 수 있답니다.장소, 숙소, 교통에 따라 지도..

서버데이터를 사용하여 렌더링 하는 컴포넌트의 유지보수에 대한 이야기를 해보려 합니다.저의 주관적인 생각이며, 각자 생각이 다를 수 있기 때문에 이렇게 생각할 수도 있구나라고 봐주시면 감사하겠습니다 :) 개발 중 서버데이터의 변경으로 인해 컴포넌트를 수정하다 문득 "왜..? 서버데이터가 변경되었는데 컴포넌트까지 수정해야 되는 걸까?"라는 생각이 들었습니다. 결론을 먼저 말하자면 컴포넌트를 제작할 때 필요한 데이터 타입을 따로 작성하는 것이 단일 책임 원칙에 조금 더 가까운 방법인 것 같다입니다. 당연한 소리 같이 들리겠지만 제가 컴포넌트를 제작하는 경우에는 당연한 방법으로 하지 않고 있었다는 것을 깨달은 지 얼마 되지 않았던 것 같습니다. 아래의 예시로 이어서 설명하겠습니다.interface Before ..

Firebase에서는 여러 방법을 통한 인증서비스를 제공하고 있습니다. 그중 이메일을 활용한 회원가입 기능을 추가하려 합니다.  제가 원하는 로직대로 이메일 회원가입을 진행하기 위해 Firebase에서 제공하는 메서드를 그대로 사용할 수 없는 문제를 해결하기 위한 과정을 공유드립니다. 처음에 진행하려고 했던 이메일 회원가입 로직은 아래와 같습니다.이메일 입력이메일 인증 버튼 클릭입력한 이메일로 인증 번호 메일 수신인증 번호 입력 칸에 확인한 인증 번호 입력인증 완료 버튼 클릭이메일 인증 완료 후 나머지 회원가입에 필요한 정보(이름, 닉네임, 비밀번호, 기타 등등) 입력회원가입 버튼 클릭회원가입 완료 코드를 작성하기 전 Firebase에서 제공하는 여러 메서드 중 이메일 회원가입을 진행할 때 사용 할 수 ..

여러 라이브러리를 사용해서 만들어서 사용하는 것보다 훨씬 간단하게 사용할 수 있으나... 분명 한 번은 css 커스텀에서 막히는 일이 생겨서 차라리 한번 만들어보자 싶어 직접 만들어 보았습니다.  함께 사용한 라이브러리입니다.- Dayjs- emotion 폴더구조- calender   - date      - CalendarDate.styled.ts      - CalendarDate.tsx   - hooks      - useCalendar.ts      - useMonth.ts   - Calendar.steyld.ts   - Calendar.tsx  Calendar 컴포넌트는 Calendar.tsx와 CalendarDate.tsx로 구성되어있습니다.CalendarDate는 Calender 내부에서 날..

팀원들과의 토론을 통해 새로운 인사이트를 얻게 되었습니다. 예를 들어, 다음과 같은 코드를 살펴보았습니다.const TABS = [{key: "a", label: "A"}, {key: "b", label: "B"}] as const 원하는 값이 'a', 'A', 'b', 'B'일 때 해당 배열의 TABS[0].key나 TABS[1].key와 같이 인덱스를 통해 특정 값을 가져올 수 있습니다. 그러나 이런 방식은 함정을 감추고 있습니다. 만약 배열의 요소가 변경된다면, 예를 들어 TABS[0].key의 값이 'a'에서 'c'로 변경된다면, 코드 전체에서 예상치 못한 문제가 발생할 수 있습니다. 지금까지 해당 배열의 특정 인덱스의 요소가 내가 원하는 값과 일치했을 뿐이라는 생각이 들었습니다. 생각한 방법은 ..

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

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..