axios(한국어)

Axios는 웹 브라우저와 Node.js를 위한 Promise 기반의 HTTP 클라이언트로, REST API를 쉽게 호출할 수 있게 도와주는 라이브러리입니다.

Features

  1. Promise-based: Axios는 모든 작업에 대해 JavaScript 프로미스를 반환하여 비동기 처리와 .then(), .catch(), 또는 async/await 구문을 사용한 호출 체이닝을 가능하게 합니다.

  2. Error Handling: Axios는 요청의 에러를 처리하는 강력한 도구 세트를 제공하여, 더 많은 상황 정보를 제공하고 실패 상황을 처리하는 데 더 많은 제어를 가능하게 합니다.

  3. JSON 데이터 변환: Axios는 JSON 데이터를 자동으로 변환하여, 응답을 명시적으로 구문 분석할 필요를 없앱니다. 이는 API 데이터 처리를 더 간단하게 만들고 보일러플레이트 코드를 줄일 수 있습니다.


Installation

Axios를 설치하기 위해서는 Node.js 환경에서 npm(npm install) 또는 yarn(yarn add) 명령을 이용하여 'axios' 패키지를 설치하면 됩니다.

Installation

npm install axios

Usage

Axios는 promise 기반의 HTTP 클라이언트로서, 브라우저와 node.js 환경 모두에서 사용할 수 있습니다.

  • Name
    Typewriter import
    Type
    사용법
    Description

    HTTP 요청을 보내는 데 사용하는 axios.get(), axios.post(), axios.put(), axios.delete() 등의 메소드를 제공합니다.

주의 사항

  • Name
    오류 처리
    Type
    주의 사항
    Description

    Axios는 기본적으로 HTTP 오류 상태 코드(400 이상)를 반환하는 경우에도 Promise를 reject하지 않습니다. 이를 위해 validateStatus 구성 옵션을 사용하거나, 응답 상태 코드를 확인하여 수동으로 오류를 처리해야 합니다.

  • Name
    요청 취소
    Type
    주의 사항
    Description

    Axios는 HTTP 요청을 취소하는 기능을 제공합니다. 이는 HTTP 요청에 대한 중복 실행을 방지하거나 불필요한 요청을 중단하는 데 유용합니다.

  • Name
    보안
    Type
    주의 사항
    Description

    API 키 또는 인증 토큰과 같은 민감한 정보를 포함하는 경우에는 이러한 정보가 노출되지 않도록 주의해야 합니다. 이를 위해 환경 변수나 별도의 보안 모듈을 사용하는 것이 좋습니다.

Usage

import axios from 'axios';

// GET 요청
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error', error);
});

// POST 요청
axios.post('https://api.example.com/data', {
  title: 'Hello',
  description: 'World'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error', error);
});

Customization

Axios는 매우 강력하고 사용자화가 가능한 HTTP 클라이언트가 될 수 있습니다.

설명

  • Name
    Global Axios Defaults
    Type
    사용자화
    Description

    전역 Axios 기본 설정을 사용하여 모든 요청에 적용되는 기본값을 설정할 수 있습니다. 예를 들어, 다음과 같이 baseURL을 설정하여 모든 요청에 동일한 기본 URL을 사용하도록 할 수 있습니다.

  • Name
    Custom Headers
    Type
    사용자화
    Description

    특정 요청이나 모든 요청에 대해 사용자 정의 헤더를 설정할 수 있습니다. 예를 들어, 특정 API 키를 모든 요청에 추가하려면 다음과 같이 할 수 있습니다.

  • Name
    Error Handling
    Type
    사용자화
    Description

    요청이나 응답에 대한 오류를 처리하는 방법을 사용자화 할 수 있습니다. 예를 들어, 특정 HTTP 오류 코드에 대해 공통적인 처리를 추가하려면 다음과 같이 할 수 있습니다.

Customization

// Global Axios Defaults
axios.defaults.baseURL = 'https://api.example.com';

// Custom Headers
axios.defaults.headers.common['Authorization'] = `Bearer ${API_KEY}`;

// Error Handling
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      console.log('unauthorized, logging out ...');
    }
    return Promise.reject(error);
  }
);

Example

getServerSideProps를 이용하여 SSR 수행을 위해 Axios를 활용하고 있습니다.

추가 설명

  • Name
    const apiUrl = process.env.NEXT_PUBLIC_API_URL
    Type
    예시
    Description

    환경변수인 NEXT_PUBLIC_API_URL을 가져와 apiUrl에 저장하고 있습니다. 이 환경변수는 .env 파일 또는 배포 환경에 따라 다르게 설정될 수 있습니다.

  • Name
    const res = await axios.get(...)
    Type
    예시
    Description

    axios 라이브러리를 사용하여 HTTP GET 요청을 보내고 있습니다. URL은 앞서 설정한 apiUrl과 name 파라미터를 결합하여 만들어집니다. 이 요청은 비동기적으로 처리되며, 응답이 도착할 때까지 실행이 일시 중지됩니다.

  • Name
    const character = res.data.data
    Type
    예시
    Description

    axios는 응답을 JavaScript 객체로 자동으로 변환해줍니다. 이 객체의 data 프로퍼티에 서버에서 전송한 데이터가 포함되어 있습니다.

  • Name
    catch (error) { ... }
    Type
    예시
    Description

    위의 코드에서 발생하는 모든 에러는 이 catch 블럭에서 잡히게 됩니다. 에러가 발생한 경우, 콘솔에 에러를 출력하고, notFound 객체를 반환하여 404 페이지를 표시하게 합니다.

[name].jsx

export async function getServerSideProps(context) {
  const { name } = context.params
  const apiUrl = process.env.NEXT_PUBLIC_API_URL

  try {
    const res = await axios.get(
      `${apiUrl}/api/lostark/searchCharacter?name=${name}`,
    )
    const character = res.data.data

    if (!character) {
      throw new Error('Failed to fetch character data')
    }

    return {
      props: {
        character,
      },
    }
  } catch (error) {
    console.error(error)
    return {
      notFound: true,
    }
  }
}