작심삼일 개발이야기

폼을 만들 때, 다양한 입력 방식을 다루다 보면 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 → 등록 장애인 수를 ..

SunEditor를 사용해서 공지사항 WYSIWYG 기능을 구현하고 있었고, 이미지 업로드 리팩토링이 필요해서 정리해 두면 좋을 것 같았다. Editor를 사용해서 글을 작성하면 HTML로 이루어진 코드를 확인할 수 있다. 글 작성과 함께 추가한 이미지는 base64로 인코딩 되어 HTML코드에 입력된다. 인코딩 된 base64 데이터는 이미지의 품질을 떨어뜨리고 데이터 크기를 늘어나게 하는 단점이 있어서 추가한 이미지는 S3로 업로드하고 업로드된 주소를 HTML코드의 img 태그 src속성에 치환하여 저장했다. 기존 로직 Editor에 글, 이미지 작성(HTML 코드로 작성됨) 이미지 추가 -> 글과 별개로 상태 값에 File 객체 추가 (상태값 2개 관리) 이미지 추가, 수정 될 때마다 File 객체..

Justit을 사용해 Lighthouse를 돌려보았는데 접근성 점수가 엉망진창이다... 알려주는 대로 하나씩 고쳐보았다. Buttons do not have an accessible name 프로젝트 에러 상황 버튼 내 아이콘만 존재하는 경우에 스크린 리더가 접근 했을 때 해당 버튼이 어떤 동작을 하는지 알 수 없었다. 중요한 이유 스크린 리더는 접근 가능한 이름이 없는 role="link", role="button", role="menuitem"이 있는 요소의 용도를 식별할 수 없다. 규칙 버튼에는 스크린리더 사용자를 위해 distination, purpose, function, action을 명확하게 설명하는 식별 가능한 텍스트가 있어야 한다. Name Button label Name 1. 각 버튼 ..

반복되는 고민 매일 점심시간이 가까워지면 팀원들과 함께 생기는 고민이 있었다. 오늘 점심 뭐 먹지…? 고민에 비해 별다를 것 없는 똑같은 점심을 먹었다. 뭔가 이 고민을 매일 하는 게 참 쓸데없다고 느껴졌다. 그래서 그냥 내가 해결해 보고 싶었다. 솔직히 고민을 해결해 줄 수는 없지만 고민의 양을 줄여보자 정도? 이것이 Just it의 시작이었다. 자만심 기획, 디자인, 개발 모두 혼자 다 해보자고 다짐했다. 기능들을 정리하고 디자인을 시작하려는데 너무 막막했다. 디자인에 소질이 없다는 걸 알면서도 욕심이었다. 같은 회사에 계셨던 디자이너님께 조언을 구하며 같이 얘기를 하다 프로젝트에 참여하고 싶다 하셔서 감사하게도 디자이너 팀원이 생겼다. 디자이너님과 기획을 마무리할 때쯤 느꼈다. 백엔드 개발자가 필요..

Just it : 오늘 점심 뭐 먹지? 고민을 덜어줄게요 ❓ Problem : 혼자, 연인과, 친구들과, 직장동료들과 무엇을 먹어야 할지 막막할 때! 😮 ❗️ Idea : 나와 같은 상황일 때 다른 사람들이 무엇을 먹는지 알 수 있는 웹사이트가 있으면 좋지 않을까? 🤔 💯 Solution : 언제, 누구와, 무엇을 먹었는지 여러 가지 조건을 기반으로 분류해서 보여주자!! 😁 팀 소개 프론트엔드 : 최수혁 백엔드 : 이지수 디자인 : 정승훈 서비스 소개 해시태그를 사용해 선택의 폭을 줄여보세요. 실시간 피드와 오늘의 추천 메뉴를 이용해 어떤 메뉴가 있는지 Just it에서 추천해주는 오늘의 메뉴는 무엇인지 확인할 수 있어요. Just it 회원은 나만의 맞춤필터를 설정해서 개인취향에 맞게 추천을 받을 수 ..

useQuery로 프로필 데이터를 가져온 뒤 useMutate를 사용해 프로필 이미지를 업데이트했을 때 프로필 이미지가 변경되지 않는 이슈를 발견했다. const queryClient = useQueryClient(); // 프로필 데이터 GET useQuery const { data: profile } = useQuery(); // 프로필 이미지 수정 useMutate const { mutate: usePostProfileMutate } = useMutate(); // 프로필 수정 핸들러 const handleUpdateProfile = () => { usePostProfileMutate(imageFile, { onSuccess: () => queryClient.invalidateQueries(["프..

정말 핫한 인프콘을 다녀와서 느낀 점?이라고 하고 주절주절 써보려 한다. 추첨을 통해 참석을 할 수 있었는데 운이 좋게 당첨되어서 구경 가봤다. 딱히 기대하지 않고 있었는데 막상 당첨되니까 신기하고 같은 팀에서 나 포함 2명만 당첨되어 다 같이 가지 못해 아쉽긴 했다. 10시를 넘어서 도착해 건물 입구까지만 해도 사람이 별로 없었는데 막상 홀에 들어가니 엄청 많았다.역시 컨퍼런스를 오면 다른 개발자들의 열정을 느낄 수 있어서 동기부여에 도움이 되는 것 같다. 이렇게나 많은 발표가 있었지만 오전에 3개를 참석하고 오후에는 선물 받으러 부스를 돌아다녔다 ㅋㅋㅋ 선물은 못 참지 내가 들었던 발표는1. 타입스크립트는 왜 그럴까? (집합으로 이해하는 타입스크립트)2. 2곳 중 1곳은 무조건 합격하는 개발자 이력서..