유데미, 스나이퍼팩토리, 프로젝트 캠프, Next.js 2기: 프로젝트 3주차 후기

 

진행 내용

3주차에는 퍼브리싱을 마무리하고 이벤트 핸들러를 생성하는 작업을 진행했습니다.

 

이벤트 핸들러

마이페이지 파트를 맡았기 때문에 유저의 프로필을 수정할 수 있는 이벤트 핸들러를 제작해야 했다.

1. 이름 수정

2. 자기소개 수정

3. 하이라이트 뱃지 선택

4. 스터디 태그 추가/삭제

 

진행 과정

이름, 자기소개, 하이라이트 뱃지, 스터디 태그를 저장할 수 있는 State를 생성하고 상태를 업데이트할 수 있는 코드를 제작했다.

코드 작성이 완료된 후 PR을 통해 상태와 관련된 코드를 hook으로 분리하고 updateHandler를 하나의 메서드로 관리하는 방법에 대한 피드백을 받았다.

 

그렇게 제작한 코드는 다음과 같다.

const [profileForm, setProfilForm] = useState<ProfileFormType>(
  initialData ?? {
    name: "",
    introduce: "",
    profileImage: "/svg/ic-user.svg",
    badge: "",
    tags: [],
  },
);


const updateProfileForm: UpdateProfileFormType = useCallback((key, value) => {
  setProfilForm((prevProfileForm) => {
    const data = {
      ...prevProfileForm,
      [key]: value,
    };
    return data;
  });
  }, []);

 

확실히 코드가 간결해진 것을 확인할 수 있었고, 이제 여기에 DB 연동과 관련된 코드를 넣으면 구현이 완료될 것 같다.

 

결과

녹음 2024-08-22 075308.mp4

7.34MB

 

회고

이벤트 핸들러를 생성하는 작업을 위주로 진행했는데 시간 대비 많은 작업을 해결하지 못한 것 같아서 많은 아쉬움이 남는 주였다. 이제 DB를 연동하고 데이터를 가공하는 작업을 진행해야 하는데 supabase를 처음 사용해보는 것이어서 속도가 더디게 진행될까봐 걱정된다.

그래도 해야지 뭐 어떡해..