💻 API 모듈화하기 (feat. axios 인스턴스) + 프로젝트 이슈 해결

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

📃 API 모듈화하기

API를 여기저기서 일정한 형식 없이 불러오고 재사용성이 많이 부족했던 코드를 많이 작성했었습니다. 또한 실제 사용하는 파일에서 많은 로직을 구현하다보니 코드의 가독성을 해치는 것 같아서 모듈화를 진행한 후에 프로젝트를 시작하면 좋을 것 같아서 API를 모듈화 해보았습니다!

리팩토링_API 모듈 분리 블로그를 참고하였습니다.

모듈 분리한 폴더 구조

📦 apis
┣ 📂 api(api 요청/응답 코드만 작성)
┃ ┗ 📜user.js
┣ 📂 services(데이터를 정제해주는 함수 모음)
┃ ┗ 📜user.js
┣ 📂 utils(인스턴스/공통 함수 작성)
┃ ┗ 📜instance.js
┗ 📜 index.js(모듈 export)

Axios 인스턴스

인스턴스 생성

.create(config)메서드를 이용해서 사용자 정의 구성을 사용하는 axios 인스턴스를 생성할 수 있습니다.

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

인스턴스와 config

인스턴스를 만들기 위해서 create 안에 넣을 config를 지정해주엇습니다. 여기서 autorization에 토큰값을 넣기 위해 인스턴스를 baseInstance와 authInstance로 분리하여 작업하였습니다.

import axios from 'axios'
import { getItem } from '@utils/storage'

const baseAPI = (url, options) => {
  return axios.create({ baseURL: url, ...options })
}

const authAPI = (url, options) => {
  const token = getItem('jwt_token')
  return axios.create({
    baseURL: url,
    headers: {
      Authorization: `bearer ${token}`,
    },
    ...options,
  })
}

export const baseInstance = baseAPI(REACT_APP_BASE_URL)
export const authInstance = authAPI(REACT_APP_BASE_URL)

api 연결

기본 api는 baseInstance를 사용하고 인증이 필요한 api는 authInstance를 사용해서 구현하였습니다.

// login 구현
import { baseInstance, authInstance } from '../utils/instance'

const login = async (userInfo) => {
  try {
    const { data } = await baseInstance.post(`/login`, userInfo)
    return data
  } catch (error) {
    console.error(error)
  }
}

services에서 데이터 값 정제해주기

api 요청 시 받아온 모든 데이터에서 필요한 데이터만 따로 사용하기 위해서 적용시켰습니다. 사용하지 않는 데이터들을 필터링해서 사용할 수 있습니다.

// 간단하게 보여주기 위해서 작성해보았습니다.
const getCleanUserInfo = (rawUserInfo) => {
  const { email, userName, notifications } = rawUserInfo.user
  return {
    email,
    name: userName,
    notifications: notifications.length > 0 ? notifications : null,
  }
}

export { getCleanUserInfo }

axios 사용하기

사용하는 방법은 실제로 사용하는 서비스마다 다르게 적용될 것 같습니다. 저는 아래처럼 구현하였습니다.

const [userInfo, setUserInfo] = useState({})

const login = async () => {
	const rawUserData = await login(userInfo)
    const userData = await getCleanUserInfo(rawUserData)
    setUserInfo(userData)
}

🥲 아쉬운점

axios interceptor를 반영하지 못했던 점이 아쉽습니다. 모든 api에서 try, catch문을 사용해야했고 에러 처리를 디테일하게 처리했으면 좋았을 것 같습니다! 리팩토링 할 때 꼭 axios 인터셉터를 사용해서 적용해보려고 합니다.

🔥 느낀점

axios 인스턴스라는 것을 처음 알았습니다. 확실히 적용하고 나서 재사용성이 엄청 확장되었다고 느꼈습니다. 이래서 다들 모듈화를 하고 재사용성을 고민하는 구나 깨달았습니다.

이 뿐만 아니라 다른 컴포넌트에서도 계속 재사용을 고민하게 되고 어떻게 모듈 분리를 할지 생각하게 되는 것 같습니다!! 코드를 작성하는 것에 많은 생각을 하게 되면서 좋은 쪽으로 발전하고 있다고 느껴집니다!!

지금까지 프로젝트 기간이 절반정도 지났는데 너무너무 잘 따라와주고 있는 팀원들께 너무 감사하다고 말씀드리고 싶어요! 첫 팀장이어서 많은 부담이 있었는데 항상 위로, 응원, 칭찬을 해주셔서 더 앞으로 나아가고 있는 것 같습니다! 1주일이라는 시간동안 정말 많이 배우고 있습니다. 감사합니다.

👿 뒤늦게 발견된 API 문제점

사용자 정보를 context에서 가져와 수정을 할 때 api에서 토큰으로 사용자 정보 요청을 하면 계속 그 전에 접속했던 사용자의 정보를 가져오는 이슈가 발생하였습니다.

요청을 할 때마다 새 유저의 토큰을 가져와서 인증 요청을 한 후에 유저를 전역에 저장하고 정보를 가져와서 사용한다고 생각하였기 때문에 도무지 이해가 가지 않았습니다. 따라서 context부터, 렌더링 전/후로 모두 디버깅을 해보았지만 이 로직 안에서는 원인을 찾을 수 없었습니다.

결국, api까지 디버깅을 돌려본 후에 원인을 발견하였습니다.

위의 authAPI를 다시 살펴보겠습니다.

const authAPI = (url, options) => {
  const token = getItem('jwt_token')
  return axios.create({
    baseURL: url,
    headers: {
      Authorization: `bearer ${token}`,
    },
    ...options,
  })
}

이 로직에서 치명적인 단점이 존재합니다..ㅠㅠ 그것은 토큰을 인스턴스를 만드는 시점에 가져온다는 것입니다.

따라서 인스턴스가 만들어질 때에는 아직 사용자 인증 요청을 하지 않았기 때문에 이런 상황이 만들어졌습니다. 저는 이 상황을 해결하기 위해서 결국 위에 아쉬운 점에 적었던 부분을 여기서 적용하였습니다.

😃 axios interceptor의 적용

기본 url로 우선 인스턴스를 만들었습니다.

const authAPI = (url, options) => {  
  const instance = axios.create({ baseURL: url, ...options })
  interceptors(instance)
  return instance
}

인스턴스를 만들고 interceptor에 instance를 전달시켰습니다. 그 후에 아래와같이 토큰을 AP를 요청 할 때 localstorage에서 가져와 적용시킬 수 있도록 구현하였습니다.

import { getItem } from '@utils/storage'

export const interceptors = (instance) => {
  instance.interceptors.request.use(
    (config) => {
      const token = getItem('jwt_token')

      config.headers = {
        authorization: token ? `bearer ${token}` : null,
      }
      return config
    },
    (error) => Promise.reject(error.response)
  )
  return instance
}

에러 처리를 하는 인터셉터는 아니지만 중간에 요청을 가로채서 처리하는 방법을 적용시켰습니다.
이렇게 큰 이슈를 만났고 디버깅을 하는 방법도 배우는 경험이 되었습니다. 이 에러만 무려 하루를 넘게 헤매서 진짜 힘들었지만 해결 후에는 정말 뿌듯하였습니다.
에러 처리를 인터셉터로 적용한 것은 아니었지만 이렇게라도 사용하게 되어 좋은 경험이 되었습니다.

ref

리팰토링_API 모듈 분리
Axios 인스턴스
프로그래머스 데브코스