[weekly] [nb] 웹 개발 시작하기(6)

fetch api 와 비교했을 때 axios 를 사용하면 좋은 점을 설명해 주세요.

실제로 미니 프로젝트를 해보면서 느꼈던 axios 의 장점을 정리해본다.

자동 json 파싱

import axios from 'axios'

export async function fetchUser(id) {
  const response = await axios.get(`https://api.example.com/users/${id}`)
  return response.data
}

response.data 는 자동으로 json 객체로 만들어져서 반환된다.

response.json 을 한번 더 하냐 마냐의 차이 정도지만, 사람의 실수는 언제라도 발생할 수 있기 때문에 이 사소한 자동화가 엄청 도움이 된다.

그리고 그만큼 수도 없이 json 파싱을 하기 때문에 아예 내장해둔 것 아닐까.

요청/응답 내장

import axios from 'axios'

export async function login(username, password) {
  const res = await axios.post('https://api.example.com/login', {
    username,
    password
  })
  return res.data
}

이것도 사소하다면 사소한 부분인데, 원래는 method, headers, body 등을 직접 기입해야 한다.

axios 에는 별도의 추가 사항이 아니면 각종 요청 하기 위한 기본 값이 들어가 있다. 우리가 필요에 따라 수정하거나 추가만 해주면 된다.

상태 코드 catch()

try {
  await axios.get('/bad-url')
} catch (error) {
  console.log(error.response.status)
}

기존 fetch 에서는 요청과 응답 중에 통신이 실패할 경우에만 error 가 발생한다.

그러나 axios 에서는 status code 에 따라서도 추가로 error 로 출력한다.

어차피 개발하면 status code 400 처럼 치명적인 오류는 개발자가 따로 error 처리를 하기 때문에, 이 소소한 기능은 정말 도움이 된다.

우리가 만들 api 가 몇 개면 괜찮지만, 몇 십개라면 매번 이런 예외 처리를 추가해줘야 하기 때문이다.

query 자동 변환

axios.get('https://api.example.com/search', {
  params: { q: 'apple', page: 2 }
})

https://api.example.com/search?q=apple&page=2

이 query 자동 변환도 엄청 편리한 기능이다.

물론, javascript 에 있는 join 기능을 이용해서 구현할 수 있지만 귀찮은 건 사실이다.

마무리

물론, 그밖에도 axios 를 사용했을 때 얻는 편리함은 많다.

그러나 아직 내가 그 편리한 기능을 쓸만큼의 프로젝트를 해보지 않아서 체감되지는 않는다.

대표적으로는 인터셉터 라는 기능이 있다.

인터셉터

import axios from 'axios'

// 요청 인터셉터
axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  console.log('[요청 전]', config)
  return config
}, (error) => {
  return Promise.reject(error)
})

// 응답 인터셉터
axios.interceptors.response.use((response) => {
  console.log('[응답 수신]', response)
  return response
}, (error) => {
  if (error.response?.status === 401) {
    alert('로그인이 필요합니다.')
  }
  return Promise.reject(error)
})

이 인터셉터라는 기능은 말 그대로 중간에 요청을 가로채서 처리하는 하는 기능이라고 한다.

흔히 사용되는 경우는 웹 서비스에서 로그인을 반드시 해야 할 수 있는 기능을 쓸 때 라고 한다.

그 기능을 쓰기 전에 로그인이 되어 있지 않다면, 그전에 미리 로그인을 하라고 요청을 막아버리는 것이다.

다음 프로젝트에서는 이 기능을 써볼만한 걸 고려해봐야겠다.