[도서] Do it! Vue.js - 라우터&HTTP 통신

Do it! Vue.js 입문 도서를 읽고 중요한 부분만 정리합니다!
구매링크: http://www.yes24.com/Product/Goods/58206961
참고링크1: http://wiki.x2bee.com/pages/viewpage.action?pageId=8553634
참고링크2: http://wiki.x2bee.com/pages/viewpage.action?pageId=8553760

뷰 라우터

<router-link to ="URL 값">: 페이지 이동 태그, <a>로 표시되며 to에 지정된 URL로 이동된다.
<router-view>: 페이지 표시 태그, 변경되는 URL에 따라 컴포넌트를 보여주는 영역이다.

라우팅이란?

웹 페이지 간의 이동 방법, 현재는 SPA(Single Page Application) 형태를 주로 사용한다.

장점: 화면 간의 전환이 매끄러워 사용자 경험을 향상시킬 수 있다.

라우터_예제.html

$mount() API란?

el 속성과 동일하게 인스턴스를 강제로 화면에 붙이는 역할을 한다. (공식문서도 동일)

라우터 URL의 해시 값(#)을 없애는 방법

index.html#/login → index.html/login 으로 수정을 원할 시 mode를 history로 적용시킨다.

var router = new VueRouter({
    mode: 'history',
    routes
});

네스티드 라우터(Nested Router)

라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다.
상위 컴포넌트 1개에 하위 컴포넌트 N개로 구성할 수 있다.

네스티드라우터_예제.html

네임드 뷰(Named View)

특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다.

네임드뷰_예제.html

웹 앱의 HTTP 통신 방법

대표적인 사례로는 제이쿼리의 ajax가 있다. ajax는 서버에서 받아온 데이터를 화면 갱신 없이 일부분만 변경할 수 있는 스크립트 기법이다.

HTTP란?

브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜.

브라우저에서 특정 데이터를 보내달라고 요청(request)를 보내면 서버에서 응답(response)으로 해당 데이터를 보내주는 방식

뷰 리소스

초반에는 코어 팀에서 공식적으로 권하는 라이브러리 였으나, 2016년 말 에반이 공식적인 지원을 중단하였다. HTTP 통신 관련 라이브러리는 뷰 라우팅, 상태 관리와 같은 라이브러리와는 다르게 필수적인 기능이 아니라고 판단했기 때문이다.

사용하는 방법

1. CDN을 이용하여 라이브러리를 로딩하는 방법
2. npm으로 라이브러리를 설치하는 방법 (ES6 기준)

//CDN 사용 시
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>

뷰 리소스_예제.html

엑시오스(Axios)

뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리.

Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 주어진 API 만으로도 간편하게 원하는 로직 구현 가능하다.
뷰 리소스와 다르게 객체 형태로 반환되기 때문에 JSON.parse()를 할 필요가 없다.

Promise 기반의 API 형식이란?

Promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체이다. 따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 표시하는 로직을 처리해야 할 때 Promise를 사용한다.

사용법

뷰 리소스와 동일하게 CDN, NPM으로 설치가 가능하다.

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

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

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

엑시오스_예제.html