Vue 학습

6장. 외부 데이터 통합하기

이 작품은 AI를 사용하여 번역되었습니다. 여러분의 피드백과 의견을 환영합니다: [e-mail]

이전 챕터에서는 컴포넌트 간에 데이터를 전달하고 컴포넌트 내에서 데이터 변경 및 이벤트를 처리하는 등 컴포넌트 작업의 필수 사항을 준비했습니다. 이제 Vue 컴포넌트를 사용하여 애플리케이션의 데이터를 통합하고 사용자에게 화면에 표시할 준비가 되었습니다.

대부분의 경우 애플리케이션에는 애플리케이션 자체에서 사용할 수 있는 데이터가 없습니다. 대신 일반적으로 외부 서버나 데이터베이스에서 데이터를 요청한 다음 애플리케이션에 맞게 수신된 데이터로 적절한 UI를 채웁니다. 이 장에서는 강력한 Vue 애플리케이션을 개발하는 데 있어 이러한 측면, 즉 Axios를 HTTP 요청 도구로 사용하여 외부 리소스에서 외부 데이터와 통신하고 처리하는 방법을 다룹니다.

Axios란 무엇인가요?

Vue 개발자는 기본 제공 fetch 방법, 클래식 XMLHttpRequest, Axios와 같은 타사 라이브러리 등 다양한 옵션을 사용하여 외부 리소스에 HTTP 요청을 할 수 있습니다. 기본 제공 fetch 은 데이터 가져오기만을 위한 HTTP 요청을 할 때 좋은 옵션이지만, 장기적으로 Axios는 더 복잡한 외부 리소스의 API 처리( )를 처리할 때 유용한 추가 기능을 제공합니다.

Axios는 HTTP 요청을 위한 JavaScript 오픈소스 경량 라이브러리입니다. fetch 와 마찬가지로 프로미스 기반 HTTP 클라이언트이며, 노드(서버 측)와 브라우저 측을 모두 지원하는 동형 라이브러리입니다.

Axios를 사용하면 HTTP 요청을 가로채고 취소할 수 있는 기능과 클라이언트 측에 내장된 사이트 간 요청 위조 방지 기능이 있다는 점이 중요한 장점입니다. Axios의 또 다른 장점은 응답 데이터를 JSON 형식으로 자동 변환하여 기본 제공 fetch 을 사용하는 것보다 데이터 작업에 더 나은 개발자 환경을 제공한다는 점입니다.

Axios의 공식 웹사이트에는 API 문서, 설치 및 주요 사용 사례가 포함되어 있습니다(그림 6-1).

그림 6-1. Axios 공식 웹사이트

Axios 설치

프로젝트의 루트 디렉터리 내 Vue 프로젝트에 Axios를 추가하려면 터미널에서 다음 명령을 사용하세요:

yarn add axios

Axios가 설치되면 다음 코드를 사용하여 필요한 경우 Axios 라이브러리를 컴포넌트로 가져올 수 있습니다:

import axios from 'axios';

그런 다음 axios 을 사용하여 애플리케이션의 데이터에 대한 쿼리를 시작할 수 있습니다. Axios와 수명 주기 훅을 결합하여 데이터를 로드하고 표시하는 방법을 살펴보겠습니다 .

라이프사이클 후크 및 Axios를 사용한 데이터 로드

3장에서 ...