[TIL-29] 실전 프로젝트 - 카카오 로그인 기능 구현(불필요한 데이터 통신, ESLint 구문 에러들)

Today목표 : 05/26일 실전 프로젝트 : 카카오 로그인 기능 구현 (useQuery 사용 미숙 에러들, ESLint 에러)

오늘은 카카오 로그인 기능 구현을 완료했다. 구현하는 와중에 useQuery 사용에 미숙하여 발생한 에러들을 기록해 보았다.

---

알게된점,

 

❗카카오 로그인 요청 useQuery에서, api에 인자를 보내며 호출하는데 3번의 데이터 통신 발생

문제상황

useQuery에서 code인자를 보내며 한 번 api를 호출했는데, 3번의 데이터 통신이 발생했다. 콜백으로 호출할 때 비동기 통신 처리를 안해서 그런 것으로 판단됐다.

  const { data, isError, isLoading } = useQuery('kakaoAuth', () => {
   authKakaoLogin(redirectCode);
  });

해결 방법

useQuery 훅 내부에서 비동기 함수 authKakaoLogin(redirectCode)를 호출하면 해당 함수의 실행과 결과를 기다리지 않고, 즉시 데이터 상태를 업데이트하고 다음 렌더링을 수행한다. 이로 인해 비동기 함수의 실행이 완료되기 전에 데이터 상태를 읽어오기 때문에 여러 번의 데이터 통신이 발생할 수 있다. 따라서 다음과 같이 async-await을 사용해 결과값을 기다린 후 반환하도록 수정하여 비동기 함수의 실행이 완료될 때까지 데이터 상태가 업데이트되지 않고, 데이터 통신이 한 번만 일어나게 하여 불필요한 데이터 통신을 줄일 수 있었다.

  const { data, isError, isLoading } = useQuery('kakaoAuth', async () => {
    await authKakaoLogin(redirectCode);
  });

 

 

❗ESLint Error : Expected to return a value at the end of arrow function

문제상황

arrow 함수 끝에서 return값이 없을 때 발생하는 ESLint 에러다. 

  const redirectHandler = () => {
    console.log(data, isError, isLoading);
    if (data === undefined) return '';
    if (data) {
      alert('로그인 성공');
      navigate('/main');
    } else if (isError) {
      alert('로그인 실패');
      navigate('/login');
    }
  };

해결 방법

return false;

 

 

❗카카오 로그인 후 결과 처리에서 이후 처리가 실행되지 않는 문제 발생

문제상황

useQuery에서 데이터 통신 후에, api에서 return한 data가 들어와야 하는데 계속 undefined인 상황 발생.

처음에는 초기값이라 그런 줄 알았는데 데이터 통신이 완료되었는데도 data가 변경되지 않아 이후 redirectHandler가 실행되지 않았다. 

  const { data, isError, isLoading } = useQuery('kakaoAuth', async () => {
    await authKakaoLogin(redirectCode);
  });

  const redirectHandler = () => {
    if (data) {
      alert('로그인 성공');
      navigate('/main');
    } else if (isError) {
      alert('로그인 실패');
      navigate('/login');
    }
    return false;
  };

  useEffect(() => {
    console.log(data, isError, isLoading);

    redirectHandler();
  }, [data]);

해결 방법

문제는 useQuery에서 콜백으로 api를 실행하여 받은 결과를 return 해주지 않았기 때문이었다. api의 결과값을 return 해 주어야 data에 return된 결과값이 할당된다. 다음과 같이 return 해주어 성공했다. 여기서 바로 return하지 않고 result변수에 담아서 리턴한 이유는 ESLint 규칙(Redundant use of 'await' on a return value) 때문이다.

  const { data, isError, isLoading } = useQuery('kakaoAuth', async () => {
    const result = await authKakaoLogin(redirectCode);
    return result;
  });

 

 

목표 달성 여부,

1. 카카오 로그인 기능 구현 완료 ✅

2. 네이버 Map API 사용법 알아보기 ✅

3. 멘토링 질문 답변 => ESLint 설정에서 에러나는 구문들, 팀원들과의 합의 하에 필요없는 설정은 비활성화 할 수 있다. 하지만 임시 비활성화 등은 그다지 좋은 방법은 아니다. 아예 비활성화 하거나 or 규칙을 따르거나 둘 중 하나를 선택하는 것이 좋을 것 같다.

 

느낀 점,

useQuery에 대한 이해와 숙련도가 아직 부족하다고 느껴졌다. 프로젝트를 진행하면서 계속 비동기 처리라던지, useEffect 라던지, 여러가지 상황들 때문에 불필요한 데이터 통신이 발생하지는 않는지 항상 체크하면서 진행해야 할 것 같다.