React에서 JWT(JSON Web Token) 사용하기

 

현대적인 웹 애플리케이션에서는 사용자 인증과 권한 부여가 중요한 역할을 합니다. React 애플리케이션에서 JWT(JSON Web Token)는 간편하면서도 강력한 인증 메커니즘을 제공합니다. 이번 블로그에서는 JWT의 기본 개념과 React 애플리케이션에서 이를 효과적으로 사용하는 방법을 단계별로 알아보겠습니다.

---

JWT란 무엇인가요?

JWT는 JSON Web Token의 약자로, JSON 형식으로 데이터를 안전하게 전송하기 위한 표준입니다. 서버와 클라이언트 간의 신뢰를 유지하면서 인증 정보를 효율적으로 교환할 수 있도록 설계되었습니다.

JWT의 구조

JWT는 세 가지 파트로 구성됩니다:

1. 헤더(Header): 토큰의 유형(JWT)과 서명 알고리즘(예: HMAC, RSA)을 지정
2. 페이로드(Payload): 사용자 정보와 같은 클레임(Claims)을 포함
3. 서명(Signature): 토큰의 무결성을 보장하기 위해 생성된 서명

JWT는 다음과 같은 형식으로 인코딩됩니다:

헤더.페이로드.서명

JWT의 특징

• 무상태: JWT는 서버가 세션 상태를 유지하지 않아도 되므로 확장성이 뛰어납니다.
• JSON 기반: 인간이 읽기 쉬운 JSON 형식으로 데이터를 저장합니다.
• 자체 포함(Self-contained): 필요한 정보를 모두 포함하여 추가 데이터베이스 조회가 필요 없습니다.

---

React에서 JWT 사용 준비하기

JWT를 React 애플리케이션에서 사용하려면 다음 도구들이 필요합니다:

1. 백엔드 서버

JWT를 생성하고 검증하는 역할을 수행합니다. 일반적으로 Node.js, Django, Spring Boot와 같은 서버 프레임워크를 사용합니다.

2. React 클라이언트

React 앱은 JWT를 저장하고 서버 요청 시 이를 헤더에 포함해 전송합니다. 이를 통해 인증된 사용자만 리소스에 접근할 수 있습니다.

---

JWT를 활용한 인증 흐름

1. 사용자 로그인 요청: 사용자가 로그인 정보를 서버에 제출
2. JWT 생성: 서버는 사용자 인증에 성공하면 JWT를 생성하여 반환
3. JWT 저장: 클라이언트는 JWT를 안전한 스토리지(예: localStorage, sessionStorage, HttpOnly Cookie)에 저장
4. API 요청에 JWT 포함: 클라이언트는 API 요청 시 Authorization 헤더에 JWT를 포함
5. 서버에서 JWT 검증: 서버는 요청에서 JWT를 추출하고 유효성을 검증하여 요청을 처리

---

React에서 JWT 구현하기

이제 React 애플리케이션에서 JWT를 사용하는 과정을 코드와 함께 살펴보겠습니다.

1. 로그인 후 JWT 저장

import axios from 'axios';

const login = async (credentials) => {
  try {
    const response = await axios.post('http://localhost:4000/login', credentials);
    const token = response.data.token;

    // JWT 저장 (localStorage 예제)
    localStorage.setItem('token', token);
    alert('로그인 성공!');
  } catch (error) {
    console.error('로그인 실패:', error);
  }
};

export default login;

2. 인증이 필요한 요청에 JWT 포함

JWT를 Authorization 헤더에 포함하여 서버로 전송합니다:

import axios from 'axios';

const getProtectedData = async () => {
  const token = localStorage.getItem('token');

  try {
    const response = await axios.get('http://localhost:4000/protected', {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });

    console.log('보호된 데이터:', response.data);
  } catch (error) {
    console.error('데이터 요청 실패:', error);
  }
};

export default getProtectedData;

3. JWT 만료 처리

JWT는 만료 시간이 설정되어 있습니다. 만료된 JWT로 요청을 보내면 서버는 401 Unauthorized 응답을 반환합니다. 이를 처리하기 위해 Axios 인터셉터를 활용할 수 있습니다:

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response && error.response.status === 401) {
      // 토큰 만료 처리
      alert('세션이 만료되었습니다. 다시 로그인하세요.');
      localStorage.removeItem('token');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

4. 사용자 로그아웃

JWT를 클라이언트에서 삭제하여 로그아웃 기능을 구현할 수 있습니다:

const logout = () => {
  localStorage.removeItem('token');
  alert('로그아웃 되었습니다.');
  window.location.href = '/login';
};

export default logout;

---

JWT 보안 고려사항

1. HttpOnly 쿠키 사용: XSS 공격으로부터 JWT를 보호하기 위해 HttpOnly 쿠키에 저장
2. TLS 사용: 네트워크에서 JWT를 안전하게 전송하기 위해 HTTPS를 반드시 사용
3. 짧은 만료 시간: 토큰의 유효 기간을 짧게 설정하고 리프레시 토큰을 활용

---

결론

React 애플리케이션에서 JWT를 사용하면 간단하고 효율적인 인증 시스템을 구축할 수 있습니다. 이번 블로그에서 소개한 구현 방법과 보안 팁을 참고하여 여러분의 프로젝트에 JWT를 도입해 보세요. 잘 설계된 인증 시스템은 애플리케이션의 신뢰성과 보안을 높이는 데 큰 도움이 될 것입니다.