Miracle Morning, LHWN

3. 상용 웹 앱을 개발하기 위한 필수 기술들, 라우터 & HTTP 통신 본문

IT 기술/[Vue] 기본

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

Lee Hye Won 2021. 6. 1. 14:52
라우팅

 

# 라우팅 : 웹 페이지 간의 이동 방법을 말한다. SPA (Single Page Application)에서 주로 사용하고 있다.

→ 화면 간의 전환이 매끄럽다.

→ 어플리케이션 사용자 경험을 향상시킬 수 있다.

→ Vue 뿐만 아니라 React, Angular 에서도 모두 라우팅을 이용하여 화면을 전환하고 있다.

​

※ SPA (Single Page Application) : 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라,

미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 어플리케이션

 

뷰 라우터

 

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

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Router Sample</title>
</head>
<body>
    <div id="app">
        <h1>뷰 라우터 예제</h1>
        <!-- 1. a 태그 버튼으로 변환되어 표시되어 URL 값을 변경하는 태그 -->
        <p>
            <router-link to="/main">Main 컴포넌트로 이동</router-link>
            <router-link to="/login">Login 컴포넌트로 이동</router-link>
        </p>
        <!-- 2. URL 값에 따라 갱신되는 화면 영역 -->
        <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>
        // 3. Main, Login 컴포넌트 정의
        var Main = { template: '<div>main</div>' };
        var Login = { template: '<div>login</div>' };

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

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

        // 6. 새 인스언스를 생성 후 라우터 정보가 담긴 router 추가
        // $mount 는 el 속성과 같이 인스턴스를 화면에 붙여주는 역할
        var app = new Vue({
            router
        }).$mount('#app');
    </script>
</body>
</html>

 

# $mount() API : el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 한다.

만일 인스턴스를 생성할 때 el 속성을 넣지 않았더라도 생성하고 나서 $mount() 를 이용하면 강제로 인스턴스를 붙일 수 있다.

뷰 라우터에서는 el 을 지정하는 방식보다는, 라우터만 지정하여 인스턴스를 생성한 후 인스턴스를 $mount() 를 이용해 붙이는 식으로 안내하고 있다.

저작자표시

'IT 기술 > [Vue] 기본' 카테고리의 다른 글

5. 뷰 HTTP 통신  (0) 2021.06.02
4. 네스티드 라우터와 네임드 뷰  (0) 2021.06.02
2. 뷰 컴포넌트 통신  (0) 2021.06.01
1. 화면을 개발하기 위한 필수단위, 인스턴스와 컴포넌트  (0) 2021.06.01
0. Vue.js란 무엇인가?  (0) 2021.06.01
'IT 기술/[Vue] 기본' Related Articles more
Comments