[애니모리] 개발 이슈사항 정리(1)

카카오테크캠퍼스에서 진행중인 애니모리 프로젝트의 개발이 끝이 났다. 그래서 오늘은 개발 중 생긴 이슈사항에 대해 적어보겠다.

 

이슈1. handleChange 발생 시 petInfo의 값이 업데이트되지 않는 문제

먼저 첫번째 문제는 등록하기 부분에서 isComplete 값을 입력마다 확인하며 값이 다 채워졌는지 보는데, handleChange 내부에서 확인하는 절차를 거친다. 바로 이때 문제가 발생했는데 현재 코드는 아래와 같지만 처음 구현하였을때는 받아온 petInfo 값에 그대로 새로운 Value를 넣어주고, every를 사용해서 값이 다 들어있는지 확인해주었다. 그러다보니 petInfo가 최신의 값을 바로 가리키지 않는 문제가 있었고 tempPetInfo를 새로 정의해주는 절차를 통해서 최신의 값을 관리할 수 있었다.

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const target = event.target as HTMLInputElement;
    const fieldName = target.id;
    const newValue = target.value;
    setPetInfo((prev) => {
      const tempPetInfo = { ...prev, [fieldName]: newValue };
      const isComplete = PET_INFO_REQUIRED_KEY.every((key) => tempPetInfo[key]);
      return {
        ...tempPetInfo,
        isComplete,
      };
    });
  };

이슈2. 데이터 반환값 통일이 되지 않았던 문제

수정하기 부분에서 중성화 상태 값을 받는데, 이때 등록하기나 수정하기 요청을 보낼 경우 "YES", "NO", "UNKNOWN" 과 같이 영어로 된 value를 보내줘야 한다. 하지만 수정하기에서 값을 받아올 때는 "했어요", "안했어요", "잘 모르겠어요" 와 같은 한글 형태로 값을 준다. 해당 부분이 백엔드 측에서 언제 변경되었는지는 모르겠지만, 중성화 상태가 불러와지지 않는 문제가 발생해 확인해보니 한글 값으로 주고 있길래 해당 라디오 버튼도 그렇게 변경했다.

하지만 아까 말했듯이 요청을 보낼때는 영어로 보내줘야해서 등록하기 버튼이 눌리지 않는 문제가 발생했다. 찾아보니 라디오 버튼 value를 한글로 바꿔버렸던 탓이었고 결국 수정하기 데이터를 받아오는 요청에서는 한글에서 영어 한번 변경해주는 절차를 추가하게 되었다. 

백엔드 측에서도 여러 사람이 해당 부분을 작업하다 보니 생긴 이벤트였고, 다른 부분은 똑같아서 swagger 반환값 확인을 다시 안하고 그냥 넘어갔던 내 착오도 컸다.