그렇습니다.
포트폴리오를 두개 제작중입니다.
번뜩이는 아이디어와 실행력
(하지만 오래가지 못하는 지속력)
ENFP의 고유한 특징이죠.
하지만 이번엔 각잡고 앉아 제대로 만들어 보려고 합니다.
현재 진행중인 두번째 프로젝트는
반려동물을 자랑하고싶지만
마땅히 자랑할 곳 없는 주인(집사)들을 위한
내새끼 자랑 커뮤니티
콩.비.찌 를 제작중입니다 🐶
(콩이,루비,햄찌)
어느정도 틀을 만들고 중간 리팩토링을 진행하고 있는데
코드가 아까울정도로 겹치는 부분이 있어
수정 과정을 적어보려고 합니다.
무서울정도로 겹치는 두 파일의 커스텀 훅스..!
이번 리팩토링 목표는 재사용성을 높이는 것입니다.
사실 두 커스텀 훅스에서 다른 점은 QueryKey로 사용하고 있는 mate/user의 차이입니다.
왜이렇게 겹치는지를 되짚어보니 실행하려고 하는 기능이 똑같다는 것입니다.
파이어베이스의 데이터베이스에 사용자 정보 업로드 => 가져오기 => mutation의 invalidate를 사용해 데이터 실시간 동기화
그리고 계속 만들다보니 여러모로 많이 사용 할 것 같아 미리 리팩토링해서 재사용성을 높이기로 결정했습니다.
코드를 한줄이라도 압축하는것이 목표
Firebase set
먼저 파이어베이스의 set부분을 살펴보면
받아오는 정보를 저장하는 카테고리 부분만 개선하면 된다.
useState를 통해 설정한 info를 각각 넘겨주었다.
넘어오는 info의 정보를 배열화 시켜
includes로 검사해 set부분을 조건문으로 검사하도록
정말 간단히 리팩토링 해주었다.
앞으로 추가되는 set부분을 계속 이어나가주면 될 것 같다.
Firebase get
다음 부분은 정보를 get해오는 부분인데
(생각보다 쉽지 않다.)
단순히 'mypage / user' or 'mypage / mate'의 차이인데
어떻게 하면 필요한 getEditForm()함수를 불러올 수 있을까?
getEditForm부르는 조건 => useQuery의 queryFn으로!
조금 더 생각해보기로 하고
다른 구현사항들을 진행해 보기로 한다.
여담
사실 리팩토링은 코드 다 짠 다음 하려고했는데
스파게티 코드가 보기좋지 않아 일찍 진행했다.
덕분에 더 빠르게 프로젝트 마무리 할 수 있을 것 같다.
