Vue.js study 04.

chaean Lee·2021년 1월 30일

vue

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

04-1 뷰 라우터

✔라우팅이란?

웹 페이지 간의 이동 방법을 말한다. 싱글 페이지 애플리케이션에서 주로 사용하고 있다.

✔싱글 페이지 어플리케이션이란?

페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션이다.

✔뷰 라우터: 뷰에서 라우팅 기술을 구현 할 수 있도록 지원하는 공식 라이브러리 이다.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>뷰 라우터 예제</h1>
        <p>
            <router-link to="/main">Main component</router-link> <!-- 1.url 값을 변경하는 태그-->
            <router-link to="/login">Login component</router-link>
        </p>
        <router-view></router-view><!-- 2.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>
    <script>
        var Main = { template: '<div>main</div>' };// 3. 컴포넌트 정의
        var Login = { template: '<div>login</div>' };

        var routes = [
            { path: '/main', component: Main },// 4. 각url에맞춰 컴포넌트 지정 
            { path: '/login', component: Login }

        ];

        var router = new VueRouter({//5. 뷰라우터정의
         //   mode:'history',  주소에 해시값을없애고싶을떄 
            routes
        });

        var app = new Vue({         //6. 뷰객체에 라우터추가
            router
        }).$mount("#app");  // el 속성과같다 
    </script>
</body>

</html>

✔ 네스티드 라우터: 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>

✔네임드 뷰: 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시한다.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <router-view name="header"></router-view>
        <router-view></router-view> <!-- name이없는경우 defalut-->
        <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, //router-view 의 name속성과 컴포넌트를 연결.
                        footer: Footer
                    }
                }
            ]
        });

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

</html>

04-2 뷰 HTTP 통신

✔뷰 리소스 (잘 안쓰는 추세이지만 사용은 한다.)

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>
    <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').then(function (response) {
                        console.log(response);
                        console.log(JSON.parse(response.data));
                        //// 응답 데이터의 body 값이문자열이기 때문에 JSON.parse() 이용하여 자바스크립트 객체로보기쉽게변환하였다 
                    })
                }
            },
        })
    </script>
</body>

</html>

✔엑시오스(promise 기반의 api형식이 다양하게 제공되어 별도의 로직을 구현 할 필요 없다.)

👍promise 기반의 api란: 서버에 데이터를 요청하면 받아오는 것과 같은 일을 하는 비동기 로직 처리에 유용한 자바 스크립트 객체이다. js는 단일 스레드로 코드를 처리하기 때문에 특정 로직의 처리가 끝날 때까지 기다려 주지 않는다.

js 비동기 이해에 도움이 되는 사이트

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button v-on:click="getData">Get Data!</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            methods: {
                getData: function () {
                    axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json').then(function (response) {
                        console.log(response);
                    })
                }
            },
        })

    </script>
</body>

</html>