6/13 TIL

TIL: REST API 통신 및 JWT 인증/인가 구현

1. REST API 통신 이해

• REST API는 클라이언트와 서버 간의 통신을 위한 아키텍처 스타일입니다.
• 클라이언트는 HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 서버의 리소스를 요청하고, 서버는 요청에 대한 응답을 반환합니다.

2. Axios와 Tanstack Query(React Query)로 API 응답 값 관리

• Axios: Promise 기반의 HTTP 클라이언트로, API 요청을 간편하게 관리할 수 있습니다.

  import axios from 'axios';
  
  const fetchData = async () => {
    try {
      const response = await axios.get('/api/data');
      console.log(response.data);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

• Tanstack Query(React Query): 서버 상태를 관리하기 위한 라이브러리로, 캐싱, 동기화, 갱신 등을 자동으로 처리합니다.

  import { useQuery } from 'react-query';
  import axios from 'axios';
  
  const fetchData = async () => {
    const { data } = await axios.get('/api/data');
    return data;
  };
  
  const MyComponent = () => {
    const { data, error, isLoading } = useQuery('data', fetchData);
  
    if (isLoading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;
  
    return <div>{JSON.stringify(data)}</div>;
  };

3. JWT 토큰을 이용한 인증/인가 기능 구현

• JWT (JSON Web Token): 사용자 인증 및 인가를 위한 토큰 기반의 인증 방식입니다.

• 서버는 로그인 요청에 대해 JWT를 발급하고, 클라이언트는 이후의 요청에 이 토큰을 포함하여 인증을 수행합니다.

  import axios from 'axios';
  
  const login = async (credentials) => {
    try {
      const response = await axios.post('/api/login', credentials);
      localStorage.setItem('token', response.data.token);
    } catch (error) {
      console.error('Login failed:', error);
    }
  };
  
  const fetchData = async () => {
    const token = localStorage.getItem('token');
    try {
      const response = await axios.get('/api/data', {
        headers: { Authorization: `Bearer ${token}` },
      });
      console.log(response.data);
    } catch (error) {
      if (error.response.status === 401) {
        console.error('Token expired or unauthorized');
      }
    }
  };

4. JSON Server를 이용한 DB 연계, 사용, 배포

• JSON Server: 간단한 JSON 파일을 사용하여 REST API 서버를 구축할 수 있는 도구입니다.

• JSON Server를 사용하여 로컬에서 DB를 연동하고, 데이터를 CRUD(Create, Read, Update, Delete)할 수 있습니다.

  npx json-server --watch db.json --port 3001

• db.json 파일 예시:

  {
    "expenses": [
      { "id": 1, "description": "Groceries", "amount": 50 },
      { "id": 2, "description": "Rent", "amount": 900 }
    ]
  }

• 배포는 로컬 서버를 Heroku 등의 배포 플랫폼을 이용하여 쉽게 배포할 수 있습니다.

5. 토큰 만료 이슈 해결

• JWT 토큰 만료로 인해 401 에러가 발생하는 문제를 해결하기 위해, 토큰 시간 부분을 삭제하여 성공적으로 문제를 해결했습니다.

이번 학습을 통해 REST API 통신, JWT 인증/인가, JSON Server를 이용한 DB 연계 및 배포에 대한 전반적인 이해와 구현 능력을 향상시킬 수 있었습니다. 앞으로도 다양한 프로젝트에 이 지식을 적용하여 더욱 발전된 웹 애플리케이션을 개발해 나가겠습니다.