Dev Diary

사이드 프로젝트에서 회원가입을 만들며 서버에 회원가입 요청 시 에러가 발생하면 Dialog(모달창)를 통해 알려주기 위해 이전에 만들어둔 디자인 시스템 중 Dialog를 사용해서 RegisterAlarmDialog 라는 컴포넌트를 추가했다. 1. 기존 RegisterAlarmDialog 컴포넌트import { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,} from "@/components/_shared/ui";import { useDialogContext } from "@/providers";import React from "react";interfa..

1. 공통 타입 분리하기// 분리, 인터페이스명 수정 @types/Building.tsinterface BuildingData { id?: number; name?: string; floorsUp?: number; floorsDown?: number; description?: string; latitude?: number; longitude?: number; uniqueNumber?: string;}interface EditBuildingResponse extends BuildingData { success: boolean;}interface FloorImage { buildingId?: number; description?: string; floorValue?: number; i..

지금까지 다수의 프로젝트를 진행했었지만, 실제 운영하는 서비스가 아닌 이상 지난 프로젝트 코드를 다시 열어본적은 거의 없었다. 하지만, 내가 그동안 얼마나 성장했는지 예전 코드를 보고 무언가 불편한점을 느낄 수 있는지 확인해보기 위해 1년전 프로젝트를 다시 열어보기로 했다. 타겟 프로젝트는 1년전에 대학교 재학 당시 코로나의 여파로 인해 처음 대면 활동을 시작하면서 학교 캠퍼스 지리를 잘 알지 못하는 재학생들과 신입생들을 대상으로 학교 내 건물과 강의실 위치를 제공해주기 위해 개발했던 서비스로 안타깝게도 지금은 운영하고 있지 않지만, 이를 내 나름대로 리팩토링을 진행해보기로 했다.어떤 것을 리팩토링할까?코드를 열어본 뒤 수정하면 좋을 것 같은 부분들을 생각해보았다.1. 공통 타입 분리하기api 요청시 요..

api 요청에 react-query v4를 사용하고 있는데 useQuery를 이용한 api 요청이 계속 실행되는것을 방지하기 위해 refetch 함수를 사용하여 특정 상황에만 쿼리가 요청될 수 있도록 구현하는 도중, useEffect 안에 비동기 요청 함수를 넣어 전역상태에 값을 세팅해줘야 하는 상황이 생겼다. 그래서 매번 사용했던대로 useEffect 안에서 api 요청 함수를 수행하고 응답에 특정 프로젝트에 참가하고 있는 프리랜서들과 클라이언트(발주처)의 uid, name, role이 담긴 배열이 있었는데 클라이언트(발주처)인 경우에는 clientInfo 라는 전역상태에, 프리랜서인경우에는 freelancersInfo 전역상태에 각각 저장해주었다. 그런데 프리랜서의 경우 1명일수도 있지만 2명 이상일..