프로젝트 시작

가이드라인을 잘 따라하면 어렵지 않게 할 수 있다고 했지만
늘 그렇듯 따르지 않았고
5단계를 제외하고 페이지 구성을 모두 먼저 완성했다

어려웠던 부분

JWT 인증 (5단계)

강의 때 보기는 했지만 아직 익숙하지는 않은 JWT 인증. 명세서에 의존하여 코드를 차근차근 더해나갔다

보이는 것처럼 Body에 어떠한 내용이 들어가야하는지 명세서에 자세히 나와 있으며, response로 오는 형태도 다 알려주고 있다. 이를 탕으로 적은 auth.js라는 파일은 완성 시켰다

// 주어진 예시 코드 + axios instance 사용
import axiosInstance from './axiosInstance';

export const register = async (userData) => {
  const response = await axiosInstance.post(`/register`, userData);
  return response.data;
};

// 예시를 바탕으로 작성한 나머지 코드
export const login = async (userData) => {
  const { id, password } = userData;
  const response = await axiosInstance.post(`/login?expiresIn=10h`, {
    id,
    password,
  });
  return response.data;
};

export const getUserProfile = async (accessToken) => {
  const response = await axiosInstance.get(`/user`, {
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${accessToken}`,
    },
  });
  return response.data;
};

export const updateProfile = async (formData, accessToken) => {
  await axiosInstance.patch(`/profile`, formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
      Authorization: `Bearer ${accessToken}`,
    },
  });
  return response.data;
};

그럼 회원가입 기능을 예로 들때 받아온 데이터 userData를 register()를 사용하여 새로운 유저를 등록할 수 있다.

// SignupPage에서 유저 회원가입 로직 작성
const handleSignup = async (formData) => {
  try {
    // register는 auth.js에서 import 해오는 것 잊지 말기
    const data = await register(formData);  // {message : "회원가입", success : true}
    if (data.success) {
      navigate('/login');
    }
  } catch (error) {
    alert('회원가입에 실패했습니다. 다시 시도해주세요.');
  }
};

주석에도 써놓았지만 새로 만든 JWT 인증 함수들을 꼭 import 해주자
작동을 하지 않아서 꽤 애먹었다ㅠㅠ.

서버 요청 전송/응답 오류 확인 팁

handleSignup 함수에서 catch로 error를 처리하고 있었기 때문에 처음에는 오류가 나도 alert 밖에 뜨지 않았다. 물론 error를 콘솔에 찍는 방법도 해봤으니 못 알아보겠다는 것은 변함이 없었다.

개발자 도구 Network tab을 활용하여 서버 요청이 어떻게 되어가고 있는지 파악이 가능했다.

예시 사진에서는 로그인 했을때 어떤 요청이 보내지고 어떤 응답을 받는지 확인 할 수 있다.

실패했을 때도 확인이 편하다

^ 이미 등록된 유저로 다시 회원가입을 해보려고 하면 409 에러가 뜬다

마치며...

axios 사용법과 JWT로 토큰을 얻어서 저장하는 방법을 배운 시간이었다
오류 찾은 시간이 더 많이 걸리기는 했지만, 그래도 찾아내서 다행인것 같다
DB에 데이터 저장하는 일도 axios로 해야하는데...(귀찮아ㅠㅠ)