[MBTI-Test PJ_Day 2] JWT 인증 API 연결

2025.02.21 (금) Works

 

20일 구현 일정 중에 도무지 이해가 안 가 넘겼던 JWT 인증 API 연결.

JWT 인증 서버와 통신하는 코드를 작성해야 했다.

 

 

JWT

 

리액트 심화 강의 중에 API 연결에 관한 내용을 알게 되었다.

JWT에 대해 이해하려면 '토큰'을 먼저 알아야 한다.

 

토큰이란?

 

• 클라이언트에서 보관하는 암호화 또는 인코딩된 인증 정보
• 서버의 상태를 유지하지 않고도 클라이언트의 인증 상태를 확인 가능
  
• 세션처럼 서버에서 사용자의 인증 정보를 보관할 필요가 없기 때문에 서버 부담을 줄여주는 인증 수단
• 웹에서 인증 수단으로 사용되는 토큰은 주로 JWT (Json Web Token) 을 이용

쉽게 설명하자면 찜질방에서 받는 키라고 생각하면 된다.

 

이용자는 키를 가지고 계란도 사먹고, 식혜도 사먹고 할 수 있는 것이다.

한 마디로 토큰이 있어야 페이지에서 다양한 기능을 이용할 수 있는 것이다.

 

 

JWT란?

 

• JWT는 토큰 기반 인증 방식에서 사용되는 특별한 토큰
• 로그인한 사용자가 이후에 서버에 요청을 보낼 때 사용
• 세 가지 주요 부분으로 나뉘어져 있음(header, payload, signature)

JWT의 세 가지 부분

 

1. 헤더(Header): 어떤 종류의 토큰인지와 어떤 알고리즘으로 서명되었는지에 대한 정보가 들어있다.
2. 본문(Payload): 실제로 중요한 데이터가 들어있는 부분입니다. 예를 들어, 사용자 ID, 토큰의 만료 시간 등이 여기에 포함된다.
3. 서명(Signature): 이 부분은 토큰이 위조되지 않았는지 확인하는 역할을 합니다. 서버만이 알 수 있는 비밀 키로 서명되어 있다. 이 서명 때문에 토큰의 무결성이 보장된다.

 

내가 이해한 바로는

JWT 라는 토큰을 가지고 사용자가 화면에서 동작한 것들의 내용(로그인, 회원가입, 회원 정보, 테스트 결과) 등을 서버로 공유하여 백엔드로 보내는 처리 과정인 듯 하다.

 

 

API 연결

 

정보를 프론트에서 백으로 넘기기 위해서는 약속이 필요하다.

백엔드 측에서 서버 URL을 통해 요청하고 받는 방법을 정리한 API 문서를 바탕으로 프론트 측에서 로직을 작성하면 된다.

 

아래는 API 문서의 예시이다.

서버 API_URL 
https://www. (이하 생략)

 

1. 회원가입

• 아이디, 비밀번호, 닉네임으로 DB에 본인의 회원정보를 저장
• Request
  
  • Method → POST
  • URL PATH →  /register

body

JSON
{
    "id": "유저 아이디",
		"password": "유저 비밀번호",
		"nickname": "유저 닉네임"
}

• Response
  

{
  "message": "회원가입 완료",
  "success": true
}

 

 

 

2. 로그인

• 아이디와 비밀번호가 DB에 있는 회원정보와 일치하면
  accessToken, userId, avatar, nickname 총 4가지 유저정보를 응답해 줌
• Request
  • Method → POST
  • URL PATH →  /login

body

JSON
{
  "id":"유저 아이디",
  "password": "유저 비밀번호"
}

 

Query string ⬇️ (선택)

• accessToken 유효시간 조정을 위한 query string
  • query string 없이 path로만 요청 시 기본 1시간
  • query string (expiresIn) 으로 시간 기입 시 해당 시간대로 토큰 유효시간 조정가능
  • expiresIn : 시간 단위를 붙인 문자열 ex) 10s 10m 10h
  • TIP) 토큰만료 시 로그아웃 처리되는 로직을 테스트할 때 사용

/login?expiresIn=10m

// 유효시간을 10분인 accessToken 요청

• Response

{
  "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImFiY2FiYyIsImlhdCI6MTcwMDgxNDQyMCwiZXhwIjoxNzAwODE4MDIwfQ.8hWOHHEzDPzumnqCU7jyoi3zFhr-HNZvC7_pzBfOeuU",
  "userId": "유저 아이디",
  "success": true,
  "avatar": "프로필 이미지",
  "nickname": "유저 닉네임"
}

 

 

 

3. 회원정보 확인

• accessToken이 유효한 경우, 비밀번호를 제외한 본인의 회원정보를 응답해 줌

// authorization 속성 정의
const response = await axios.get(`${BASE_URL}/user`, {
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${accessToken}`,
  },
});

• Request
  • Method → GET
  • URL PATH →  /user

Header

 

• Response

{
  "id": "사용자 아이디",
  "nickname": "사용자 닉네임",
  "avatar": null,
  "success": true
}

 

 

 

4. 프로필 변경

• accessToken이 유효한 경우, 프로필 이미지 또는 닉네임을 FormData을 통해 요청하면
  변경 완료된 이미지 URL과 닉네임을 응답해 줌

// 이미지파일을 FormData에 담는 방법

const formData = new FormData();
// avatar와 nickname 중 하나 또는 모두 변경 가능
formData.append("avatar", imgFile);
formData.append("nickname", nickname);

// 요청 시 Content-Type에 유의
const response = await axios.patch(`${BASE_URL}/profile`, formData, {
  headers: {
    "Content-Type": "multipart/form-data",
    Authorization: `Bearer ${accessToken}`,
  },
});

 

• Request
  • Method → PATCH
  • URL PATH →  /profile

Header

{
	"Authorization": "Bearer AccessToken"
}

 

Body

FORM
{
	"avatar": [이미지파일],
	"nickname": "변경할 닉네임"
}

 

• Response

{
  "avatar": "변경된 이미지 URL",
  "nickname": "변경된 닉네임",
  "message": "프로필이 업데이트되었습니다.",
  "success": true
}

 

 

Thuder Client와 Postman (HTTP 요청을 보내고 응답을 받는데 필요한 모든 기능을 가지고 있는 툴)

을 통해 API 테스트를 할 수 있었다.

 

기본 사용 방법

1. New Request 클릭

 

2. 원하는 HTTP Method 선택 및 URL 입력 

  2-1. Payload가 필요할 경우 Body에 추가

  2-2. [Send]를 눌러 응답 확인

 

 

📌 위의 내용을 바탕으로 이번 과제에서 구현한 로직은 다음과 같다.

// auth.js

import axios from "axios";

const authApi = axios.create({
  baseURL: "https://www.   //이하생략
});

// 회원가입
export const register = async (userData) => {
  const response = await authApi.post("/register", userData);
  return response.data;
};

// 로그인
export const login = async (userData) => {
  const response = await authApi.post("/login", userData);
  return response.data;
};

// 회원 정보 확인
export const getUserProfile = async (token) => {
  const response = await authApi.get("/user", {
    headers: { Authorization: `Bearer ${token}` },
  });
  return response.data;
};

// 프로필 변경
export const updateProfile = async (token, formData) => {
  const response = await authApi.patch("/profile", formData, {
    headers: {
      Authorization: `Bearer ${token}`,
      "Content-Type": "multipart/form-data",
    },
  });
  return response.data;
};

export default authApi;

// AuthForm.jsx

// 로그인 함수
  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const data = await login({    👉🏻login 사용
        id: userInput.id,
        password: userInput.password,
      });
      if (data.success) {
        sessionStorage.setItem("accessToken", data?.accessToken);
        setUserInfo({
          id: data.userId, // 백엔드에서는 사용자의 아이디를 'userId'라는 이름으로 관리함
          nickname: data.nickname,
        });
        setIsAuthenticated(true);
        const formData = new FormData();
        formData.append("nickname", data.nickname);
        formData.append("userId", data.userId);
        await updateProfile(data.accessToken, formData);

        navigation("/");
      } else {
        alert("로그인에 실패했습니다!");
      }
    } catch (error) {
      console.error("Login error", error);
      alert(error.response.data.message);
    }
  };



// 회원가입 함수
  const handleSignup = async (e) => {
    e.preventDefault();
    console.log("회원가입 요청:", userInput);
    try {
      const data = await register({   👉🏻register 사용
        id: userInput.id,
        password: userInput.password,
        nickname: userInput.nickname,
      });
      if (data.success) {
        alert("회원가입 성공!");
        navigation("/login");
      } else {
        alert("회원가입에 실패했습니다!");
      }
    } catch (error) {
      console.error("Signup error", error);
      alert(error.response.data.message);
    }
    userInput("");
  };

 // Profile.jsx
 
 // DB: userprofile 가져오기
  useEffect(() => {
    if (!isAuthenticated) {
      alert("로그인이 필요합니다.");
      navigate("/login");
    } else {
      const fetchUserInfo = async () => {
        try {
          const data = await getUserProfile(token);    👉🏻 getUserProfile 사용

          setUserInfo({
            id: data.id,
            nickname: data.nickname,
          });
        } catch (error) {
          console.log("Faild to fetch user info", error);
        }
      };
      fetchUserInfo();
    }
  }, []);

 // Profile.jsx
 
 // 닉네임 변경
  const handleNickNameChange = async (e) => {
    e.preventDefault();
    try {
      const formData = new FormData();
      formData.append("nickname", newNickName);
      const data = await updateProfile(token, formData);    👉🏻 updateProfile 사용
      if (data.success) {
        setUserInfo((prev) => ({
          ...prev,
          nickname: data.nickname,
        }));
        alert("닉네임이 변경되었습니다.");
        setUserInfo({ ...userInfo, nickname: newNickName });
        setNewNickName("");
      } else {
        alert("닉네임 변경에 실패했습니다.");
      }
    } catch (error) {
      console.error("Failed to update nickname", error);
      alert(error.response.data.message);
    }
  };