[JavaScript] Axios 사용하기(feat.CDN, Webpack)

axios는 자바스크립트에서 사용하는 promise 기반 HTTP 클라이언트 라이브러리이다. 브라우저와 node.js 환경에서 모두 사용 가능하며, XMLHttpRequests와 node.js의 http 모듈을 사용하여 HTTP 요청을 처리한다.

 

XHR 객체를 사용하기 때문에 브라우저 호환성이 좋고, 더 다양한 설정을 지원하기 때문에 요청에 대한 세밀한 제어가 가능하다. 다양한 HTTP 메서드(GET, POST, PUT, DELETE 등)뿐만 아니라 요청과 응답 데이터의 자동 직렬화와 역직렬화를 지원한다.(기본적으로 객체를 'JSON'으로 직렬화한다.)

 

이렇게 다양한 기능으로 인해 axios는 많은 프로젝트에서 HTTP 클라이언트 라이브러리로 사용된다.

 

그럼 이제 자바스크립트에서 axios를 어떻게 다운로드하고 사용하는지 알아보자.

사용 환경

• node.js : v16.13.0
• axios : v1.3.4

다운로드

axios를 다운로드하는 방법은 두 가지가 있다.

1. CDN을 통해 다운로드
2. 패키지 관리자(npm, yarn 등)를 통해 다운로드

프로젝트의 크기, 목적, 개발 환경 및 요구 사항에 따라 선택을 할 수 있다. 간단한 토이 프로젝트나 빠른 프로토타이핑을 원하는 경우엔 CDN을 사용하면 된다.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

webpack, rollup과 같은 번들러를 사용하거나 버전 관리가 필요한 경우, 그리고 프로젝트 크기가 크다면 패키지 관리자를 사용하는 것이 좋은 선택이다.

npm install axios

사용하기

CDN

CDN으로 다운로드하는 경우 아래와 같이 사용할 수 있다.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="./main.js"></script>

// main.js 📂

axios
  .get('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

이렇게 단순히 스크립트 태그만 추가하면 되기 때문에 설정이 빠르다. 또한, CDN에서 자원을 제공하기 때문에 자체 서버의 부하를 줄일 수 있다. 하지만 그만큼 CDN 서버의 의존성이 증가하며, 라이브러리의 버전 관리가 어려울 수 있다. 또한, 이렇게 사용하는 라이브러리가 여러 개일 경우, 유지 보수 하기가 힘들어질 수 있다.

패키지 매니저 사용(npm)

패키지 매니저로 axios를 직접 다운로드하는 경우에는 아래와 같이 사용할 수 있다.

<script type="module" src="./main.js"></script>

// main.js 📂
import axios from './node_modules/axios/dist/esm/axios.min.js';

axios
  .get('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

이렇게 axios 패키지에 esm을 지원하는 파일을 불러오면 사용이 가능하다. 하지만 프로젝트를 배포할 경우, 해당 파일만 사용할 것이기 때문에 패키지 그대로를 올리진 않을 것이다. 그렇다면 방법이 두 가지인데, 해당 파일만 따로 빼서 사용하거나, 번들러를 사용해서 빌드된 파일만 배포하는 것이다.

 

전자의 경우 패키지 매니저의 이점을 반만 쓰는 것과 같다. 번들러를 사용해서 axios를 쉽게 불러오고, 번들된 파일만을 배포하도록 해보자.

번들러 사용(webpack)

해당 글에서는 번들러로 웹팩을 사용하고, 실행하기 위한 최소한의 사용 방법만 다룬다. 더 자세한 내용은 공식문서를 참고하자.

설치

가장 먼저 해야할 일은 웹팩을 설치하는 것이다. 웹팩과 CLI에서 웹팩을 실행하기 위한 도구를 설치한다.

npm install webpack webpack-cli --save-dev

별다른 설정없이 기본으로 사용할 것이기 때문에, 폴더 구조를 약간 변경해야 한다. 기존의 폴더 구조는 다음과 같다:

.
├── index.html
├── main.js
├── package-lock.json
└── package.json

기존 폴더 구조에서 index.html을 dist 폴더에 넣고, main.js를 index.js로 변경, 그리고 src 폴더에 넣는다:

.
├── dist
│   └── index.html
├── package-lock.json
├── package.json
└── src
    └── index.js

그럼 코드도 다음과 같이 수정해 주어야 한다.

<script defer="defer" src="./main.js"></script>

// index.js 📂
import axios from 'axios';

axios
  .get('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

이제 진짜 사용해보자.

npx webpack --mode=production

빌드에 성공했다면 다음과 같은 메시지가 출력된다.(개발 모드는 --mode=development)

빌드 성공 메시지(약간 다를 수 있지만, 빌드에 성공했다면 문제 없다.)

그럼 다음과 같이 dist 폴더에 main.js 파일이 생기고, 정상적인 사용이 가능해진다:

.
├── dist
│   ├── index.html
│   └── main.js
├── package-lock.json
├── package.json
└── src
    └── index.js

웹팩은 로더(loaders), 플러그인(plugins), 설정 파일(configuration), 웹팩 개발 서버(webpack-dev-server) 등 확장 가능한 옵션들이 존재하기 때문에 더 많은 장점들이 있다.

이렇게 CDN이 아닌 패키지 매니저를 통해 로컬에 설치하고 번들링을 하면, 의존성 관리 및 버전 관리가 용이해지며 라이브러리 모듈 시스템을 쉽게 구성할 수 있고, 코드 최적화 및 압축을 하여 앱의 성능을 향상 시킬 수 있다. 하지만 처음 설정하기까지가 CDN에 비해 어렵고, 추가적인 학습이 필요하다.

결론

axios 라이브러리를 CDN을 통해 다운로드하는 방법과 패키지 매니저(+웹팩)로 다운로드하는 방법을 알아봤다. 두 가지 방법은 서로 다른 목적, 상황, 프로젝트 크기에 따라 고려하여 적절한 선택을 하면 될 것 같다.