[Do it! Vue.js] 4장

버버니야·2022년 3월 18일

nhn vue

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

04-1 뷰 라우터

라우팅이란?

라우팅이란 웹 페이지 간의 이동 방법
라우팅은 싱글 페이지 애플리케이션 SPA에서 주로 사용된다.

라우팅을 이용하면 화면 간의 전환이 매끄러울 뿐만 아니라 어플리케이션의 사용자 경험을 향상시킨다.

뷰 라우터

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

뷰 라우터를 구현할 때 필요한 특수 태그와 기능

태그	설명
< router-link to="URL값" >	패이지 이동 태그. 화면에서는 < a> 로 표시되며 클릭하면 to에 지정한 URL로 이동
< router-view >	페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역

뷰 라우터 실습

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue Router Sample</title>
    </head>
    <body>
        <div id="app">
            <h1>뷰 라우터 예제</h1>
            <p>
                <router-link to="/main">Main 컴포넌트로 이동</router-link>
                <router-link to="/login">Login 컴포넌트로 이동</router-link>// URL 값을 변경하는 태그
            </p>
            <router-view></router-view> //URL 값에 따라 갱신되는 화면 영역
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script> //라우터 CDN 추가
        <script>
            var Main = { template: '<div>main</div>'};
            var Login = { template: '<div>login</div>'}; // 컴포넌트 정의

            var routes = [
                { path: '/main', component: Main },
                { path: '/login', component: Login }
            ]; // 각 URL에 맞춰 표시할 컴포넌트 지정

            var router = new VueRouter({
                routes
            }); // 뷰 라우터 정의

            var app = new Vue({
                router
            }).$mount('#app'); //뷰 인스턴스에 라우터 추가
        </script>
    </body>
</html>

스크립트 코드에는 현재 Main, Login 컴포넌트를 정의하는 부분
URL 값에 따라 표시될 컴포넌트를 지정하느 routes 부분
뷰 라우터에 routes를 연결하는 부분
뷰 인스턴스를 생성하여 라우터를 삽입하는 부분이 있다.

$mount() API란$ mount() API는 el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 한다.
인스턴스를 생성할 때 el 속성을 넣지 않았더라도 생성하고 나서 $mount()를 이용하면 강제로 인스턴스를 화면에 붙일 수가 있다.

뷰 라우터의 기본 URL 형식은 해시 값을 사용한다.
만약 index.html/login과 같이 해시 값을 없애고 싶으면 히스토리 모드를 활용

네스티드 라우터

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

네스티드 라우터 구현하기

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue Nested Router</title>
    </head>
    <body>
        <div id="app">
            <router-view></router-view>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
        <script>
            var User = {
                template: `
                <div>
                    User Component
                    <router-view></router-view>
                </div>
                `
            };

            var UserProfile = { template: '<p>User Profile Component</p>'};
            var UserPost = { template: '<p>User Post Component</p>'};

            var routes = [
                { path: '/user', component: User,
            children: [
                {
                    path: 'posts',
                    component: UserPost
                },{
                    path: 'profile',
                    component: UserProfile
                }
            ] }
                
            ];

            var router = new VueRouter({
                routes
            });

            var app = new Vue({
                router
            }).$mount('#app');
        </script>
    </body>
</html>

/user 뒤에 /posts와 /profile에 따라 화면이 달라진다.

네임드 뷰

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

네임드 뷰 구현하기

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue Nested Router</title>
    </head>
    <body>
        <div id="app">
            <router-view name="header"></router-view>
            <router-view></router-view>
            <router-view name="footer"></router-view>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
        <script>
           
            var Body = { template: '<div>This is Body</div>'};
            var Header = { template: '<div>This is Header</div>'};
            var Footer = { template: '<div>This is Footer</div>'};

            

            var router = new VueRouter({
                routes: [
            {
                path: '/',
                components: {
                    default: Body,
                    header: Header,
                    footer: Footer
                }
            }   
            ]
            });

            var app = new Vue({
                router
            }).$mount('#app');
        </script>
    </body>
</html>

< router-view>에서 사용한 name 속성은 예약어가 아니라 사용자가 임의로 정의할 수 있는 값이다. name속성을 지정하지 않았을 때의 기본 컴포넌트는 default로 접근한다.

04-2 뷰 HTTP 통신

웹 앱의 HTTP 통신 방법

HTTP는 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜이다.
브라우저에서 특정 데이터를 보내달라고 request를 하면 서버에서 response로 해당 데이터를 보내주는 방식으로 동작한다.

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

뷰도 ajax를 지원하기 위한 라이브러리를 제공한다. -> 액시오스 (axios)

액시오스

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

Promise 기반의 API 형식
Promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체.

액시오스 설치 및 사용하기

액시오스 설치 방법에는 CDN을 이용하는 방법과 NPM을 이용한 방법이 있다.

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

액시오스 CDN
위 코드를 HTML 파일에 추가하면 라이브러리를 로딩하여 사용할 수 있는 상태가 된다.

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

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

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

axios API 형식

API 유형	처리 결과
axios.get('URL 주소').then().catch	해당 URL 주소에 대해 HTTP GET 요청, 정상적으로 받아오면 then()안에 로직이 오류가 발생하면 catch()안의 로직이 수행
axios.post('URL 주소').then().catch	해당 URL 주소에 대해 HTTP POST 요청, 정상적으로 받아오면 then()안에 로직이 오류가 발생하면 catch()안의 로직이 수행
axios({ 옵션 속성 })	HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있따.