대중적인 API instance 세팅과 고려해야할 점!

안녕하세요 SOPT 36기 고제성입니다!

이번에 4주차 과제에서 API를 사용하기도 하고, 합동 세미나와 솝커톤이라는 빅 이벤트가 생기면서 갑자기 협업을 해야할 일이 많아졌는데요!

 

그래서 서버와 협업할 때 나와 팀원 모두 편리하게 만들어주는 API Instance 설정을 할 때 어떤 점들을 고려해서 설정해야할지 고민해보는 주제로 공유 과제를 작성하게 되었습니다!

 

이 글에서는 React에서 Axios를 활용한 구성에 대해 소개할 예정입니다!

아마 대부분의 팀이 리액트로 개발을 진행하는 것으로 알고 있는데 Next를 사용하신다면 내장 fetch만 사용해도 효율적이고 좋은 기능의 API 호출을 할 수 있으니 만약 이 글이 도움이 된다면..! 상황에 맞게 적용하시면 될 것 같습니다~!

 

API Instance?

API Instance는 모든 HTTP 요청에 공통된 설정을 적용한 호출 패턴을 의미합니다

이걸 한 번 만들어두면 

const data = apiRequest.get("어쩌구저쩌구")

 

이렇게 간단하게 API 호출을 할 수 있다는 장점이 있기 때문에 API 연동 전 초기 세팅에 필수적이라고 볼 수 있습니다

 

 

세팅을 위해 고려할 점

1. 여러 실행 환경에 따라 다른 API 엔드포인트

 

저희가 개발할 때 흔히 사용하는 work flow인 git flow를 정말 제대로 적용한다면,

 

브랜치 별로 각각 배포를 할 수도 있고, 일반적인 개발 환경(dev), 테스트 환경, 프로덕션 환경, 실제 배포 환경 등 다양한 개발 환경이 생겨날 수 있습니다

 

근데 이렇게 새로운 환경에서 할 때마다 CORS 에러가 뜨거나, 잘못된 엔드포인트라는 에러가 뜨는 상황이 발생하게 되면 해당 작업을 처리하는 시간 + 짜증남 + ... 등등 개발 생산성에 악영향을 끼칠 수 있습니다

 

따라서 저희는 팀원을 위해 처음부터 제대로 세팅해줘야할 필요가 있는데요!! 

const baseURL = process.env.진짜앱 || process.env.테스트 || process.env.버전1 || process.env.어쩌구저쩌구

 

이렇게 환경에 따라 다른 서버의 API 엔드포인트를 쉽게 전환할 수 있도록 해준다던가,

여러 배포 도메인이나 포트번호가 생길 때에는 서버 개발자분께 빠르게 말씀 드린 후에 CORS가 뜨지 않도록 예방할 수 있습니다!

 

2. 회원 관련 기능이 있다면?

 

회원 관련 기능이 들어가는 순간 고려해야할 사항이 굉장히 많아집니다

1. 토큰은 어디에 저장하지?

2. 저장한다면 쿠키 사용? 노사용?

3. 토큰 만료됐을 땐?

4. 자동으로 리프래시? -> 벌써 머리아픔

 

사실 이러한 질문에는 보안이나 개발 편의성 측면에서 대중적인 픽이 정해져있는 것들이 대부분입니다.

 

1. 토큰은 어디에 저장하지?

 

여러분들도 이미 다 아시겠지만 토큰에는 access, refresh 두 종류의 토큰이 존재합니다,

이 중에서 accessToken은 사용자의 권한이 담긴 소중한 정보이지만 수명이 짧고(탈취 되어도 피해 범위가 크지 않음) 자주 사용하기 때문에 Client에서 쉽게 접근할 수 있는게 좋습니다.

 

반면에 refreshToken은 수명이 매우 길고(보안이 더 중요해짐), 액세스 토큰이 만료 되었을 때만 사용되어 적은 사용 빈도를 가지고 있습니다.

 

이러한 특징을 종합해서 보안적 이점을 가져가기 위해

accessToken : 헤더

refreshToken : 쿠키

에 저장하여 관리하는 방식이 대중적이라고 알려져있습니다(바뀌었을 수도 있어요,, 전에 공부했던 자료와 남아있는 기억 바탕으로 작성하는 글입니다..)

 

따라서 refreshToken을 쿠키에 저장하기 위해서는 서버와 이야기를 또 해봐야하는데요,

서버측에서 쿠키를 설정하지 않고 토큰을 JSON 응답으로만 제공할 때 : js-cookie와 같은 쿠키 라이브러리를 사용해서 쿠키를 관리해야하고

import axios from 'axios';
import Cookies from 'js-cookie'; // 쿠키 관리를 위한 라이브러리

// axios 인스턴스 생성
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  withCredentials: true, // 쿠키를 주고받기 위해 필요
});
....
...
...
..
.

const refreshToken = Cookies.get('refreshToken');

 

 

서버측에서 HttpOnly 쿠키로 토큰을 관리하는 경우 : 간편하게 fetch 설정으로 쿠키를 구현할 수 있습니다.

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  withCredentials: true, // 쿠키를 주고받기 위해 필요 << - 이거만 설정해주면 됨!! 자동으로 쿠키 주고받기 가넝
});

 

하지만 js-cookie 라이브러리를 사용하여 쿠키를 관리하는 방식 또한 보안적 한계점이 있어서 더 나은 보안 환경을 위해서 HttpOnly 방식이 더 효율적이라고 합니다.

 

2. 토큰이 만료 되었을 땐?

 

토큰이 만료되면 일반적으로 401 에러가 서버에서 반환됩니다

따라서 이런 응답을 통해서 '내 accessToken이 오래됐구나!'라는 것을 알 수 있게 되는데요!

 

이러한 응답이 왔을 때 client에서는 다음의 대처를 진행해야합니다

1. 토큰 만료 에러 확인(401인지)

if(error.response.status === 401){
	어쩌구저쩌구
   }

 

2. 리프래시 api 호출(refreshToken으로 accessToken 재발급 받는)

(혹시 리프래시 실패했을 땐 상황에 맞게 알아서 처리... ex.로그아웃??)

 

try {
        const response = await axios.post(
          `${BASE_URL}/auth/refresh`,
          {},
          { withCredentials: true } // 쿠키 전송 활성화
        );
        
        // 새 액세스 토큰 저장
        const { accessToken } = response.data;
        setAccessToken(accessToken);
        
        // 헤더 업데이트
        originalRequest.headers['Authorization'] = `Bearer ${accessToken}`;
        
      } catch (refreshError) {
      	//로그아웃? 리프래시토큰 재요청?? 등 작업

 

3. 새 accessToken 저장, 헤더 업데이트

4. 실패했던 요청 재시도

 

이러한 작업은, 내가 보냈던 요청도 가지고 있으며 응답까지 가장 먼저 확인하는

"응답 인터셉터"에서 처리하면 되겠죠?!

apiRequest.interceptors.response.use(()=>{})

 

 

이런 식으로 API Instance 설정에 대해 정리해봤습니다!

사실 저는 처음 이 내용을 접할 때 어려웠던 부분이 많았는데(cs 지식이 하나도 없을 때, 보안이며 쿠키며 헤더며,,,, 너무 생소했었던 기억이 있습니다) 그래도 재능있는 여러분들이라면 협업할 때 문제없이 사용할 수 있을 것 같습니다!

 

API Instance 설정은 협업의 시작점이라고 볼 수 있고, 이 부분이 탄탄하게 구현돼 있으면 나중에 팀원들이 API 호출할 때 정말 편하게 사용할 수 있을 겁니다....! 저도 합세에서 axios 세팅을 맡게 되어서 지금 알고 있는 것들과 더 많은 자료를 찾아보고 꼼꼼하게 세팅해보려합니다! 이제 솝커톤도 있고 합동 세미나도 있는데, 이런 초기 세팅이 잘 되어 있으면 협업할 때 훨씬 수월할 거라고 생각합니다, 감사합니다!