4장. 상용 웹 앱을 개발하기 위한 필수 기술들 - 라우터 & HTTP 통신

4장. 상용 웹 앱을 개발하기 위한 필수 기술들 - 라우터 & HTTP 통신 - 2

개발 공부/Do it! Vue.js 입문 2025. 5. 24. 09:00

4장 - 2

04-2 뷰 HTTP 통신

<웹 앱의 HTTP 통신 방법>

요즘 웹 앱에서 서버에 데이터를 요청하는 HTTP(HyperText Transfer Protocol) 통신은 필수로 구현해야 하는 기능이다.
과거의 웹 사이트는 정적이었으나 이제는 사용자와의 상호작용에 따라 데이터를 동적으로 화면에 표시해 줘야 하기 때문이다.

HTTP는 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜(protocol)이다.
- 프로토콜 : 컴퓨터나 단말기 간에 통신하기 위해 상호간에 정의한 규칙

위 그림처럼 브라우저에서 특정 데이터를 보내달라고 요청(request)을 보내면 서버에서 응답(response)으로 해당 데이터를 보내주는 방식으로 동작한다.
웹 앱 HTTP 통신의 대표적인 사례로는 제이쿼리(jQuery)의 ajax가 있다.
ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법이다. 리액터나 앵귤러 등에서도 사용되고 있다.

뷰에서도 마찬가지로 ajax를 지원하기 위한 라이브러리를 제공한다. 뷰 프레임워크의 필수 라이브러리로 관리하던 뷰 리소스와 요즘 가장 많이 사용하는 액시오스(axios)가 있다.

<뷰 리소스>

뷰 리소스(resource)는 초기에 코어 팀에서 공식적으로 권하는 라이브러리였으나 HTTP 통신 관련 라이브러리는 뷰 라우팅, 상태 관리와 같은 라이브러리와는 다르게 프레임워크에 필수적인 기능이 아니라고 판단하여 2016년 말에 공식적인 지원이 중단되었다.
그럼에도 불구하고 뷰 리소스는 아직 계속 사용할 수 있는 라이브러리이기 때문에 간단히 살펴보자.
뷰 리소스를 이용하는 방법은 CDN을 이용해서 라이브러리를 로딩하는 방식과 npm으로 라이브러리를 설치하는 방법(ES6 기준)이 있다.
- ES6 설치 방법 : https://github.com/pagekit/vue-resource#installation

GitHub - pagekit/vue-resource: The HTTP client for Vue.js

The HTTP client for Vue.js. Contribute to pagekit/vue-resource development by creating an account on GitHub.

github.com

CDN 설치 방법으로 이용하여 뷰 리소스를 실습해보자.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue Resource Sample</title>
    </head>
    <body>
        <div id="app">
            <button v-on:click="getData">프레임워크 목록 가져오기</button> <!-- 1. -->
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <!-- 뷰 리소스 CDN -->
        <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script> 
        <script>
            new Vue({
                el: '#app',
                methods: {
                    getData: function() {
                        this.$http.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json') // 2.
                        .then(function(response) {
                            console.log(response); // 3.
                            console.log(JSON.parse(response.data));
                        });
                    }
                }
            });
        </script>
    </body>
</html>

위 코드는 버튼을 하나 추가하고 클릭하면 지정한 URL의 데이터를 가져오는 예제이다.
여기서 불러오는 데이터는 JSON 형식의 간단한 파일이며 '프레임워크 종류 - 프레임워크 이름' 형태의 '키 - 쌍' 조합으로 총 7개의 데이터 쌍으로 되어있다.
코드를 자세히 살펴보자.
1. 버튼은 인스턴스 영역안인 <div> 태그 안에 <button> 태그로 추가한다. 그리고 v-on:click을 이용하여 버튼을 클릭했을 때 getData( )가 호출되도록 클릭 이벤트를 설정한다.
2. getData( )에는 뷰 리소스에서 제공하는 API인 this.$http.get( )을 사용하여 해당 URL에서 제공하는 데이터를 받아온다. API 이름에서 유추할 수 있듯이 this.$http.get( )은 HTTP GET 요청을 서버에 보내고 특정 데이터를 받아온다.
3. 버튼을 클릭하여 해당 URL로 HTTP GET 요청을 보내고 나면 .then( ) 안에서 응답을 받은 데이터 response를 콘솔에 출력한다.
코드를 브라우저에서 실행하고 버튼을 클릭하면 아래와 같은 결과 화면이 나타난다.

[프레임워크 목록 가져오기] 버튼을 클릭하면 크롬 개발자 도구의 'Console' 패널에 response 객체의 값과 프레임워크 목록을 객체에 담아 출력한다.
첫 번째 로그는 response의 내용이다. url 속성 값에는 HTTP GET 요청을 할 때 넣었던 사이트의 URL이 들어있다.
두 번째 로그는 응답 데이터의 body 값이 문자열이기 때문에 JSON.parse( ) 자바스크립트 API를 이용하여 자바스크립트 객체로 보기 쉽게 변환하였다.

이처럼 뷰 리소스 라이브러리를 이용하면 서버로부터 데이터를 받아와 화면에 나타낼 수 있다.

<액시오스>

액시오스(Axios)는 현재 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리이다. 뷰 리소스 라이브러리를 공식 라이브러리에서 제외하면서 액시오스가 언급되었다.
액시오스는 Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 주어진 API만으로도 간편하게 원하는 로직을 구현할 수 있다.
- Promise 기반의 API 형식이란 무엇일까?
  - Promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체이다. 자바스크립트는 단일 스레드(thread)로 코드를 처리하기 때문에 특정 로직의 처리가 끝날 때까지 기다려주지 않는다. 따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할 때 주로 Promise를 활용한다. 그리고 데이터를 받아왔을 때 Promise로 데이터를 화면에 표시하거나 연산을 수행하는 등 특정 로직을 수행한다.
  - 데이터 통신과 관련한 여러 라이브러리 대부분에서 Promise를 활용하고 있으며, 액시오스에서도 Promise 기반의 API를 지원한다.
액시오스 공식 깃허브 리포지토리(https://github.com/axios/axios)에서 안내하는 문서 역시 뷰 리소스보다 더 상세하게 기술되어 있다. 따라서 원하는 기능에 대해 손쉽게 API 형식과 코드 예제를 참고할 수 있다.

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

Promise based HTTP client for the browser and node.js - axios/axios

github.com

액시오스 설치 및 사용하기

액시오스 설치와 사용법은 CDN을 이용하여 설치하는 방법과 NPM을 이용하여 설치하는 방법(ES6 기준)이 있다.
- NPM을 이용한 설치 방법 : https://github.com/axios/axios#installing

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

Promise based HTTP client for the browser and node.js - axios/axios

github.com

액시오스의 CDN은 아래와 같다.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

액시오스는 뷰 리소스처럼 HTTP 통신에 대해 간단하고 직관적인 API를 제공한다. 그리고 API 형식이 다양하여 단순 호출 이외에도 여러 설정값을 추가하여 함께 호출할 수 있다.
액시오스의 API 형식과 설명은 아래와 같다.

//HTTP GET 요청
axios.get('URL 주소').then().catch();

//HTTP POST 요청
axios.post('URL 주소').then().catch();

//HTTP 요청에 대한 옵션 속성 정의
axios({
    method: 'get',
    url: 'URL 주소',
    ...
});

API 유형		처리 결과
axios.get('URL 주소').then( ).catch( )		해당 URL 주소에 대해 HTTP GET 요청을 보낸다. 서버에서 보낸 데이터를 정상적으로 받아오면 then( ) 안에 정의한 로직이 실행되고, 데이터를 받아올 때 오류가 발생하면 catch( )에 정의한 로직이 수행된다.
axios.post('URL 주소').then( ).catch( )		해당 URL 주소에 대해 HTTP POST 요청을 보낸다. then( )과 catch( )의 동작은 위 내용과 동일하다.
axios({ 옵션 속성 })		HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있다. 데이터 요청을 보낼 URL, HTTP 요청 방식, 보내는 데이터 유형, 기타 등등.

더 많은 API 형식을 알고 싶다면 다음 링크를 참고하라.
- https://github.com/axios/axios#axios-api

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

Promise based HTTP client for the browser and node.js - axios/axios

github.com

액시오스를 이용한 아래의 예제를 살펴보자.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue with Axios Sample</title>
    </head>
    <body>
        <div id="app">
            <button v-on:click="getData">프레임워크 목록 가져오기</button>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <!-- 뷰 리소스 CDN -->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            new Vue({
                el: '#app',
                methods: {
                    getData: function() {
                        // 액시오스 GET 요청 API
                        axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
                        .then(function(response) {
                            console.log(response);
                        });
                    }    
                }
            });
        </script>
    </body>
</html>

위 코드는 뷰 리소스 실습 예제와 마찬가지로 [프레임워크 목록 가져오기] 버튼을 클릭해서 HTTP GET 요청을 보내고 데이터를 받아와서 로그에 출력하는 예제이다.
이전 예제 코드와 비교하면 라이브러리를 로딩해 오는 CDN 주소와 GET 요청을 보내는 API 형식 부분만 다르다.
코드를 실행해 보면 응단 데이터가 담긴 객체 모양의 앞의 예제와 다르다.

response 객체를 확인해 보면 data 속성이 일반 문자열 형식이 아니라 객체 형태이기 떄문에 별도로 JSON.parse( )를 사용하여 객체로 변환할 필요가 없다.

지금까지 뷰의 HTTP 통신 라이브러리인 뷰 리소스와 액시오스에 대해 살펴보았다.

해당 글은 [Do it! Vue.js 입문] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

'개발 공부 > Do it! Vue.js 입문' 카테고리의 다른 글

5장. 화면을 개발하기 위한 기본 지식과 팁 - 템플릿 & 프로젝트 구성 - 2 (1)	2025.05.26
5장. 화면을 개발하기 위한 기본 지식과 팁 - 템플릿 & 프로젝트 구성 - 1 (0)	2025.05.25
4장. 상용 웹 앱을 개발하기 위한 필수 기술들 - 라우터 & HTTP 통신 - 1 (1)	2025.05.23
3장. 화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트 - 3 (2)	2025.05.22
3장. 화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트 - 2 (1)	2025.05.21

ABOUT ME

애딤프의 블로그

4장 - 2

04-2 뷰 HTTP 통신

<웹 앱의 HTTP 통신 방법>

<뷰 리소스>

<액시오스>

액시오스 설치 및 사용하기

'개발 공부 > Do it! Vue.js 입문' 카테고리의 다른 글

티스토리툴바

ABOUT ME

4장 - 2

04-2 뷰 HTTP 통신

<웹 앱의 HTTP 통신 방법>

<뷰 리소스>

<액시오스>

액시오스 설치 및 사용하기

'개발 공부 > Do it! Vue.js 입문' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바