20240801 TIL

✅ 오늘 배운 것

오늘은 원래는 데모데이로 예정된 날이었으나, 예상보다 작업을 하면서 걸리는 시간이나 추가로 해야 할 하위 이슈들이 많아졌다. 그래서 일단은 회의실을 빌려서 팀원들과 현재 작업이 어디까지 진행되었고, 어느 부분에서 막히며 어떻게 얼마 안에 처리할 수 있을지를 논의해보는 중간점검의 장으로 활용하려고 한다. 

 

우선 그저께부터 길어지던 프론트 리팩토링 이슈에 대해서 논의해보았다. 이 이슈에 은근 시간을 많이 쏟게 되고 있고, 근데 이게 또 파라미터가 제대로 전달이 안 되거나 전달 형식이 잘못된 문제라서 우리가 지금 시도해 볼 수 있는 게 괄호를 빼 보고, 콘솔 로그를 찍어 보고... 요런 것 뿐이라서 좀 원시적인 방법으로 접근하고 있는 것은 아닌가 싶었다. 하지만 일단은 해 볼 수 있는 데까지는 해 보는 게 낫겠다. 그리고 어차피 이 프론트 코드 리팩토링 이슈는 지금 흐린 눈을 하고 덮고 가더라도 분명 9월에도 더 큰 스노우볼이 되어 발목을 잡을 것이기에, 지금 해결하는 것이 장기적으로도 좋겠다. 

 

암튼 그래서 프론트에서 서버로 유저의 정보를 리턴해주는 API를 호출하는 부분에서 401 에러가 뜨는 부분을 팀원과 같이 다뤄보았다. 처음에는 프론트에서 헤더의 액세스토큰 파라미터를 잘못 보내는 것일 수도 있을 것이라 생각하고 작업하였으나, 모든 부분에 로그를 찍어 보았을 때 헤더가 멀쩡하게 전달되고 있었다. 그래서 이 가능성보다는 그렇다면 백엔드에서 해당 엑세스토큰이 담긴 헤더를 전달할 때 401 에러를 내고 있는 것이 아닌가? 라는 추측을 하게 되었다. 

 

에러의 원인을 찾았는데, 바로 코드에서 어떤 API를 호출할 때는 axios를 사용하고, 다른 API를 호출할 때는 fetch를 사용하도록 되어 있었다. 그래서 axios에서는 {}로 바인딩 된 헤더가 필요했던 것이고, fetch에서는 헤더가 바인딩되면 이를 인식하지 못했던 것이었다. 그래서 이 문제는 무탈하게 넘겼다. 

 

문제는 그 다음이었다! 이제 로그인까지는 잘 되고, TodayView에서 카테고리를 생성해야 한다. 그런데 Category를 생성하는 API에서, post API로 200 코드는 잘 받아오는데 문제는 그리고 나서 다시 메인 화면으로 돌아가지 않는다는 거였다. 

 

코드는 이런 식이다. useCategoryAddMutation 이라는 커스텀 리액트 훅 함수가 실행되고 나서, 이 함수가 성공적으로 실행되면 isSuccess라는 prop의 값이 false에서 true로 변한다. 그리고 초기의 의도는 그러고 나서 onSuccess prop 안으로 넘긴 로직이 실행되는 것이었다(category 이름을 공백 문자열로 바꾸고, 다시 router로 뒤로가기).

const {
    mutate: addCategory,
    isLoading,
    isError,
    error,
    isSuccess,
  } = useCategoryAddMutation({
    onSuccess: () => {
      setCategoryName('');
      router.back();
    },
  });

 

그런데 이렇게 하면 isSuccess의 값이 제대로 반영되지 못하는 것 같아서, 로직을 바꿔보았다. 역시나 되지 않는다. 하지만 GPT는 잘 했다고 해서, 공식문서를 보아야 할 것 같다. 

useEffect(() => {
    if (isSuccess) {
      setCategoryName('');
      router.back();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isSuccess]);

 

일단은 중간까지 작업한 부분을 다른 팀원의 코드에도 반영하기 위해 PR을 날렸다. 

사연 있는 PR 제목

---

문제를 해결하였다!

팀원들과 열심히 삽질하면서 알아낸 원인은 tanstack query v5에서 더 이상 useMutation() 함수를 사용할 때 더 이상 onSuccess라는 prop을 인자로 받지 않았기 때문이다. 그래서 기존의 useCategoryAddMutation 커스텀 훅 함수에서 onSuccess prop을 넘겨주는 코드를 제거하고, 대신 isSuccess 라는 훅이 성공했는지를 알려주는 변수를 받아서 useEffect()에서 isSuccess 값이 바뀔 때 원하는 로직을 실행하도록 바꿨다. 

 

그런데 사실 이는 tanstack query v5 공식문서와는 반대되는 결과였다. 공식문서에서는 onSuccess라는 prop을 멀쩡히 useMutation() 함수가 잘 받고 있는데, 실제로는 그렇지 않았던 것이다. 알고보니 공식문서의 다른 부분에 우리가 사용하려는 부분이 명시되어 있었다. 공식문서를 잘 봐야 함을 느낀 이슈였다. 

 

이제는 API 서버에서 받아온 todos의 데이터를 프론트 화면에서 보여주는 작업을 하면 된다. 그런데 투두를 만드려면 파라미터로 order의 값을 보내줘야 했다. 우리 서비스에서는 드래그 앤 드롭 순서정렬을 하려는 용도로 LexoRank라는 알고리즘을 사용한다. 이를 사용해서 이 order를 어떻게 정하면 좋을지 같이 논의해보았다. 일단은 임시 값으로, 현재 등록된 투두가 아무 것도 없다면 lexorank 알고리즘을 사용해서 middle, 즉 중간값을 내려준다. 만약 등록된 투두가 하나라도 있다면 그 투두의 다음 order 값을 genNext()를 통해 내려주도록 했다. 

 

아, 그리고 저녁을 먹고 와서 보니 API 서버에서 받아온 todos의 데이터가 나타나지 않는 이유는, render 함수에서 값을 리턴하고 있지 않기 때문이었다. 즉 코드를 이렇게 바꿔 주니 잘 동작하였다. 

 

(before)

const renderTodo = ({ item, drag, isActive }) => {
    <View>
      <DailyTodo item={item} drag={drag} isActive={isActive} />
    </View>
};

(after)

const renderTodo = ({ item, drag, isActive }) => {
    return (
      <View>
        <DailyTodo item={item} drag={drag} isActive={isActive} />
      </View>
    );
  };

 

그리고 현재 프론트 레포에서 상태관리는, post/patch/delete API로 상태값에 변화가 생길 경우, 해당 API로 요청을 보내고 응답을 정상적으로 처리한 다음, 다시 get API로 변화된 값을 받아오는 방식으로 하고 있다. 그런데 이 방식이 데이터가 많아지거나 post/patch/delete 요청이 빈번해질 경우에는 문제가 될 수도 있어서, 추후 멘토링 때 이 부분을 멘토님께 여쭤보면 좋을 것 같다. 

 

아무튼 남은 이슈는 이 get API로 새로운 상태값을 받아올 때, 현재 투두의 값에는 날짜 및 카테고리로 필터링된 상태만 남겨야 하는데, 이 로직을 react query로 만들어서 get API를 호출할 때마다 이 과정이 자동으로 일어나도록 만드는 것이다. 

---

우선은 todos 렌더링까지는 되었으니, 이제 subtodo를 만드는 것이 잘 되는지를 우선 확인하려고 했다. 그런데 이런 에러가 뜬다. 

 

DailySubTodo라는 하위 투두 컴포넌트로 데이터가 제대로 전달되지 않는 것 같다. 이 문제는 괄호{}를 추가했다 빼면서 여러 방면으로 삽질(...)을 했더니 잘 해결되었다. 

하위투두와 투두가 잘 나타난다

 

이제 문제는 투두 모달창에서 '하위 투두 생성하기'를 누르면 이렇게 텍스트 인풋창이 생기는데, 이 인풋창이 자동으로 활성화되지 않는다는 거였다. GPT에게 물어보니 useRef() 이라는 리액트 훅을 사용해서 해당 텍스트 인풋창을 참조해 놓고, focus(활성화) 시켜야 할 일이 있으면 그때 활성화를 시키는 방식으로 하라고 조언해주었다. 

 

그런데 이렇게 하려면 텍스트 인풋 컴포넌트와 그 컴포넌트를 활성화시키는 버튼이 같은 파일에 있어야 하는데 그렇지가 않았다. 그래서 급한 대로 autoFocus={true} 라는 코드를 추가해 주었다. 그랬더니 처음에 활성화 시키는 부분은 잘 되었다. 그런데 다시 모달을 클릭해서 활성화시키려니 바로 focus가 없어져 버렸다. 일단은 특정 기능을 불가능하게 하는 큰 요인은 아니니 넘어가기로 하였다...

 

그리고 팀원들과 프론트 코드를 보면서 논의를 거친 끝에 카테고리 및 날짜 별로 필터링하는 태스크와, 하루에 있는 투두의 숫자를 나타내주는 태스크가 완료되었다!