●[Main-Project] Refactor: 거의 마무리 단계인 Refactor

오랫동안 포스팅을 하지 못했었는데,, 준석님의 예비군과 + 저의 알바 근무 때문에 시간이 잘 안맞았던 관계로 포스팅을 길게 하지 못했었습니다. 그래도 각자 작업을 했었고, 또 대체로 3차 목표로 잡았던 리팩토링은 대부분 로직분리가 많았으므로, 딱히 포스팅할 내용도 없었네요.

 

● 3차 목표

❍ Page

• CopyPopUp 페이지 삭제하기
• query 관련 함수 useQuery, useMutation 모두 훅으로 처리하기
• ESC 버튼 누를시 이전 페이지로 이동 함수 util로 빼기 중복으로 사용되고 있습니다. 추가로 다른 PopUP 페이지 혹은 PopUp Component에도 적용하면 좋지 않을까요?

❍ FeedPopUP(다은)

• isSucess와 getGuestFeed.isSucess 일 때 컴포넌트 구성이 완전 중복인 것 같은데 이를 컴포넌트로 분리 할 수 있을까?
• query를 훅으로 분리하면 가능할 것 같기도?
• 생각이 복잡해지는 페이지군요.. 리팩토링이 매우 필요한 페이지같아요

❍  Home(준석)

• useInfinityQuery 훅으로 뺴기
• Wellcome PopUp 컴포넌트로 분리하기
• window.innerWidth에 따라 화면 분기 처리한 부분과 각 토큰 값 부분 분기 처리한 부분 컴포넌트로 분리할 수 있지 않을까? 그러게요 이거 해봐야겟내요.
• styled 처리하자..

❍ Info(다은)

• Error Message 분리하기
• mutation 훅으로 분리
• jsx 의 회원가입과 회원 수정 부분이 코드가 같은데, 페이지를 분리하는 것이 좋을지. 같은 컴포넌트로 관리하는게 좋을까?
• 여기도 팝업 state하나로 관리할 수 있어요.
• 핸들러다 빼버렷음 좋겟어요.. 흑흐긎ㄷ릔믉!!!니ㅏㅇ럼니ㅏ얼!!
• 줼님 왜 styled안썻어잉?

❍ 🚩MyPage(준석)

• 임포트지옥.. 해결할 수있는 방법 업갯조?..
• infinity query 훅으로 관리하기
• 각각의 query (useQuery, useMutation) 모두 훅으로 관리하기
• 분기처리 정리하기
  • 데이터가 모두 로딩인 경우 LoadingComponent
  • 데이터를 모두 받아온 경우 Container
• ListBox 컴포넌트로 분리하기
• currenntTab 숫자에 따라 데이터만 다르고 jsx 형식은 같기에 컴포넌트로 분리하는게 좋지 않을까? 저도 이생각했어요

❍ UserPage(준석)

• infinity query 훅으로 관리하기
• 각각의 query (useQuery, useMutation) 모두 훅으로 관리하기
• UserPage의 형식 또한 myPage의 형식과 같다.

❍ WalkEditing & WalkFeed & WalkPosting(준석)

• useQuery 부분 훅으로 처리하기
• effect를 통한 화면 분기처리 router DOm의 loder로 처리하는게 좋지 않을까?
  • 이해하지못햇으빈다.

❍ WalkFeed(다은)

• 중간에 껴잇는 state.. 불편합니다..

❍ WalkMate (다은)

• infinityQuery 처리 부분 훅으로 처리하기
• Filter에 따른 분기처리 Component로 분리

 

● 오늘 리팩토링하면서 느낀점

❍ import * as SC

프로젝트를 진행하면서 멘토님께서 styled로 쓰인 로직은 'SC'로 불러와 styled인지 아니면 컴포넌트를 불러오는건지 로직 내에서 구분하는게 좋다라는 말씀을 해주셨던게 기억나, 준석님과 함께 styled와 그냥 컴포넌트와의 로직구분을 진행하였습니다. 실제로도 코드를 짜면서 + 코드 리팩토링을 진행할 때 이게 styled로 쓰인건지 아니면 컴포넌트로 쓰인건지에 대한 계속 찾아보면서 코드를 봐야했던게 굉장히 불편했습니다. 확실히 styled로 분리를 해놓으니.. 실제로 DX가 굉장히 증진되는걸 매우 느꼈습니다•••

아래는 리팩토링 하기 이전의 코드인데요,

 if (accessToken) {
    return (
      <nav className="hidden max-sm:block bg-white fixed bottom-[16px] rounded-[30px] left-1/2 -translate-x-[50%] z-[800] shadow-xl">
        <ul className="flex gap-8 py-3 px-10 max-sm:px-7 max-sm:gap-7">
          <NavTab route="Home" />
          <NavTab route="WalkMate" />
          <NavTab route="WalkPosting" />
          <NavTab route="Mypage" />
          <li className=" cursor-pointer">
            <Logout className="w-9 h-9" onClick={handleClick} />
          </li>
        </ul>
      </nav>
    );
  } else {
    return (
      <nav className="hidden max-sm:block bg-white fixed bottom-[16px] rounded-[30px] left-1/2 -translate-x-[50%] z-[800] shadow-xl">
        <ul className="flex gap-8 py-3 px-10">
          <NavTab route="Home" />
          <li className="cursor-pointer">
            <Login className="w-9 h-9" onClick={handleClick} />
          </li>
        </ul>
      </nav>
    );
  }
}

아래는 리팩토링 한 이후의 코드입니다.

  if (accessToken) {
    return (
      <SC.NavContainer>
        <SC.HostList>
          <NavTab route="Home" />
          <NavTab route="WalkMate" />
          <NavTab route="WalkPosting" />
          <NavTab route="Mypage" />
          <li className=" cursor-pointer">
            <Logout className="w-9 h-9" onClick={handleClick} />
          </li>
        </SC.HostList>
      </SC.NavContainer>
    );
  } else {
    return (
      <SC.NavContainer>
        <SC.HostList>
          <NavTab route="Home" />
          <li className="cursor-pointer">
            <Login className="w-9 h-9" onClick={handleClick} />
          </li>
        </SC.HostList>
      </SC.NavContainer>
    );
  }
}

확실히 SC.로 불러오게 되면서 styled 컴포넌트라는 것을 구분할 수 있었고 다른 일반 컴포넌트는 NavTab 인 것을 개발자 입장에서 확실히 구분할 수 있다는 것을 + 매우 편안함을 느낄 수 있었습니다.

이외에도 import 문이 짧아짐으로써, 눈이 굉장히 편해지는 것도 느낄 수 있었습니다.

import { ReactComponent as Man } from '@/assets/label/man.svg';
import { ReactComponent as Woman } from '@/assets/label/woman.svg';
import Button from '@/common/button/Button.tsx';
import {
  ErrorNotice,
  InputContainer,
  InputText,
  Label,
} from '@/common/input/Input.styled.tsx';  // SC부분
import AlertText from '@/common/popup/AlertText';
import { PopupBackGround } from '@/common/popup/popup.styled.tsx';
import Popup from '@/common/popup/Popup.tsx';
import { Container, Form, RadioBox } from '@/components/pet/petInfo.styled.tsx';
import PetProfile from '@/components/pet/petProfile/PetProfile.tsx';
import usePatchFormMutation from '@/hook/api/mutation/usePatchFormMutation';
import usePostFormMutation from '@/hook/api/mutation/usePostFormMutation';

SC문을 하나씩 불러오면서 import문이 길어지곤 했는데, as SC로 불러오게 되면서

import { ReactComponent as Man } from '@/assets/label/man.svg';
import { ReactComponent as Woman } from '@/assets/label/woman.svg';
import Button from '@/common/button/Button.tsx';
import * as SCINPUT from '@/common/input/Input.styled.tsx';
import AlertText from '@/common/popup/AlertText';
import * as SC from '@/common/popup/popup.styled.tsx';
import Popup from '@/common/popup/Popup.tsx';
import * as SCPET from '@/components/pet/petInfo.styled.tsx';
import PetProfile from '@/components/pet/petProfile/PetProfile.tsx';
import usePatchFormMutation from '@/hook/api/mutation/usePatchFormMutation';
import usePostFormMutation from '@/hook/api/mutation/usePostFormMutation';

위으 import문이 깔끔히 정리되는 것을 실감할 수 있었습니다..!!

 

❍ useLocalStorage의 setter함수는 useState의 setter와 .. 구조가 같다!

그냥 일반적인 ..? 굉장히 별거 아닌 부분일 수도 있겠습니다만, 코드를 하나씩 모두 둘러보면서 에러가 나는 부분이 있었는데요,

import { SetValue } from 'usehooks-ts'; // SetValue가 없어서 불러올수없는 에러발생

type Prop = {
  setFirstVisited: SetValue<boolean>;
};

제가 짰던 코드가 아니였어서, SetValue의 값을 불러 올 수 없다는 에러가 발생하고 있었습니다. ?? 이거 왜 에러 발생하고 있는데 수정안하셨지..? 라는 생각이 들었는데요.. 보니까 prop으로 받아오는 setFirstVisitied가 뭐지? 하고 추적을 해보니

  const [isFirstVisited, setFirstVisited] = useLocalStorage(
    'firstVisited',
    true,
  );

useLocalStorage에서 쓰이는 setter함수더군용. 그래서 흠 그럼 이 함수를 prop으로 받고있는데, type이 없다는 소리니.. type이 뭘까 하고 찾아보았습니다. (VScode에러에서도 해결책을 알려주고 있지 않았습니다.)

useHooks의 공식문서를 찾아보니 쉽게 해결할 수 있었습니다.

useLocalStorage

import {
  Dispatch,
  SetStateAction,
  useCallback,
  useEffect,
  useState,
} from 'react'

import { useEventCallback, useEventListener } from 'usehooks-ts'

declare global {
  interface WindowEventMap {
    'local-storage': CustomEvent
  }
}

// 해결할 수 있었던 부분
type SetValue<T> = Dispatch<SetStateAction<T>>

export function useLocalStorage<T>(    
    .....

즉 SetValue는 useState의 SetStateAction 구조와 동일하다고 나와있었습니다. 

그래서 아래와 같이 코드를 수정하니, 에러를 해결할 수 있었습니다.ㅎ_ㅎ

type Prop = {
  setFirstVisited: React.Dispatch<React.SetStateAction<boolean>>;
};