Vue #5 - 뷰 라우터

라우팅이란?

---

라우터를 이해하기 위해서는 먼저 라우팅이 무엇인지 알아야한다. 라우팅이란 웹 페이지 간의 이동 방법을 말한다. 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션에서 주로 사용하고 있다. 싱글 페이지 애플리케이션은 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션이다.

 

라우팅을 이용하면 화면 간의 전환이 매끄러울 뿐만 아니라 애플리케이션의 사용자 경험을 향상시킬 수 있다. 일반적으로 브라우저에서 웹 페이지를 요청하면 서버에서 응답을 받아 웹 페이지를 다시 사용자에게 돌려주는 시간 동안 화면 상에 깜빡거림 현상이 나타난다. 이런 부분들을 라우팅으로 처리하면 깜빡거림 없이 화면을 매끄럽게 전환할 수 있을 뿐만아니라 더 빠르게 화면을 조작할 수 있어 사용자 경험이 향상된다.

 

뷰뿐만 아니라 리액트와 앵귤로 모두 라우팅을 이용하여 화면을 전환하고 있으며, 프런트엔드 프레임워크를 사용하지 않고 일반 HTML 파일들로도 라우팅 자바스크립트 라이브러리를 이용하여 라우팅 방식의 페이지 이동을 구현할 수 있다.

뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리다. 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동할 수 있다.

 

네스티드 라우터

---

네스티드 라우터는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다. 네스티드라는 단어에서 추측할 수 있듯이 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조다.

 네스티드 라우터는 화면을 구성하는 컴포넌트의 수가 적을 때는 유용하지만 한 번에 더 많은 컴포넌트를 표시하는 데느 한계가 있다. 이 문제를 해결할 수 있는 방안으로 네임드 뷰가 있다.

 

네임드 뷰

---

네임드 뷰는 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다. 네이티드 라우터는 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식이지만 네임드 뷰는 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시한다.

 

 

뷰 HTTP 통신

---

웹 앱의 HTTP 통신 방법

웹 앱에서 서버에 데이터를 요청하는 HTTP 통신은 필수로 구현해야 하는 기능이다. 과거의 웹 사이트가 정적인 텍스트나 간단한 이미지를 나타내는 데 그쳤다면 이제는 사용자와의 상호 작용에 따라 데이터를 동적으로 화면에 표시해 줘야 하기 때문이다.

 

HTTP는 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜이다. 브라우저에서 특정 데이터를 보내달라고 요청을 보내면 서버에 응답으로 해당 데이터를 보내주는 방식으로 동작한다. 서버에 '해당 데이터를 보내주세요.' 라는 메시지를 보내는게 바로 'HTTP 요청을 보낸다'와 같은 의미다.

 

웹 앱 HTTP 통신의 대표적인 사례로는 제이쿼리의 ajax가 있다. ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법이다. ajax가 대중화되면서 많은 웹 앱에서 ajax를 사용하고 있다.

 

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

 

 

 

뷰 리소스

---

뷰 리소스는 초기에 코어 팀에서 공식적으로 권하는 라이브러리였으나 2016년 말에 에반이 공식적인 지원을 중단하기로 결정하면서 다시 기존에 관리했던 PageKit 팀의 라이브러리로 돌아갔다. 그 이유는 HTTP 통신 관련 라이브러리는 뷰 라우팅, 상태 관리와 같은 라이브러리와는 다르게 프레임워크에 필수적인 기능이 아니라고 판단했기 때문이다. 그럼에도 불구하고 뷰 리소스는 아직 계속 사용할 수 있는 라이브러리다.

 

 

액시오스

---

액시오스는 현재 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리다. 에반도 뷰 리소스 라이브러리를 공식 라이브러리에 제외하면서 액시오스를 언급했다. 액시오스는 깃허브 리포지토리의 별이 3만 개가 넘는데, 이는 뷰 리소스의 8천 개에 비해 압도적으로 많다. 일반적으로 오픈 소스 라이브러리의 장래성은 깃허프 리포지토리가 얼마나 활성화되어 있느냐로 판단할 수 있다.

 

액시오시는 Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요가 없이 주어진 API만으로도 간편하게 원하는 로직을 구현할 수 있다.

 

Promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체다. 자바스크립트는 단일 스레드로 코드를 처리하기 때문에 특정 록직의 처리가 끝날 때까지 기다려주지 않는다. 따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할 때 주로 Promise를 활용한다. 그리고 데이터를 받아왔을 때 Promise로 데이터를 화면에 표시하거나 연산을 수행하는 등 특정 로직을 수행한다.

 

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

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

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

위 코드는 HTTP GET 요청을 보내고 데이터를 받아와서 로그를 출력한다. 리소스와 비교하면 라이브러리를 로딩해 오는 CDN의 주소와 GET 요청을 보내는 API 형식 부분만 다르다.