원티드 react-query 챌린지 API 통신하기

원티드 react-query 챌린지 사전 과제 깃허브

오늘 반나절 동안 API 통신을 하려고 json-server로 삽질을 하던 중 집에 와서 사전 과제 깃허브를 보다가 불현듯 깨달았다. 사전 과제 깃허브 코드가 바로 백엔드 코드였다는 걸. . .🙀🙀

작업 시작 순서는 다음과 같다.

1. 사전 과제 깃허브 클론
2. yarn install
3. 받은 파일들을 'server' 폴더에 다 몰아넣는다.
4. 최상단 경로에서 CRA로 'client' 폴더를 만든다.
5. 이 안에서 프론트엔드 코드 작업 시작

위 작업을 마치면 폴더 구조가 다음처럼 된다. 여기서 client 폴더만 작업하면 된다.

(맨 아래 README.md는 최상단 README)

아래는 성공한 회원가입 API 통신 코드이다.
GET /todos를 먼저 해보려 했는데 알고보니 토큰이 필요해서.. 😂😂
Todo와 Auth를 다 하려고 하면 흐름상 회원가입 통신이 가장 먼저 필요한 것 같다.

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import { useQueryClient, useMutation } from '@tanstack/react-query';
import styled from 'styled-components';
import { UserProp } from 'types';
import { Title } from 'components/Title';
import { Button } from 'components/Button';

const Register = () => {
  const navigate = useNavigate();
  const queryClient = useQueryClient();

  const [userValue, setUserValue] = useState({
    email: '',
    password: '',
  });

  const { data, isLoading, mutate } = useMutation({
    mutationFn: (userData: UserProp) =>
      axios
        .post('http://localhost:8080/users/create', userData) // 여기서 API 호출
        .then((res) => console.log(res)), // then을 넣어줘야 한다 (onSuccess에서 처리 안 되는지 알아보는 중)
  });

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    queryClient.setQueryData(['REGISTER_USER'], userValue); // 클라이언트 상태 전역으로 관리해보려고 (시도중)

    mutate(userValue, { 
      onSuccess: () => {
        console.log('회원가입 정보 저장 성공!');
        navigate('/');
      },
      onError: (error) => {
        console.log(error);
      },
    });
  };

react-query를 제대로 처음 써보는 거라 코드가 이상한 부분이 있을(많을) 수 있다.
왜 localhost:8080으로 호출했는지는 사전 과제 깃허브 Readme 참고

설정을 다 하고 회원가입 페이지에서 이메일과 비밀번호를 입력하니 처음에는 에러가 났다.
콘솔에 에러 메시지를 살펴보니 백엔드에서 validation 처리를 해두었다는 것을 알게 되었다. (프론트에서 하는 처리는 회원가입 버튼이 활성화되는지 여부 체크, 실제 회원가입 로직의 유효성 체크는 백엔드에서) 이메일에는 '@'가 들어있어야 하고 패스워드는 8자리 이상이어야 하는 등의 규칙이 있었다. 규칙을 지켜서 입력했더니 다음과 같이 홈으로 잘 이동하고 성공 message와 token이 넘어왔다. 본격적인 기능 구현 하기도 전에 통신 테스트하는 데만 하루 걸림 ^_^ ㅎㅎ