vue.js

[Vue.js] #4 뷰 라우터(Router)란?

로춘남 2021. 11. 10. 21:13
728x90

라우팅이란?

웹 페이지 간의 이동 방법을 말함. 라이팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA, Single Page Application)에서 주로 사용. 화면 간의 전환을 매끄럽게 진행 시킬 수 있음. 서버에서 응답을 받아 웹 페이지 처리하면 화면상에 깜빡거림이 있을수있는데, 라우팅을 사용 할 경우 깜빡거림 없이 매끄럽게 사용 할 수 있다.

 

뷰 라우터란?

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

 

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

태  그 설  명
<rounter-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>
      // 1. URL값을 변경하는 태그
        <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. 뷰 라우터를 인스턴스에 등록
      var app = new Vue({
        router
      }).$mount('#app');
    </script>
  </body>
</html>

네스티드 라우터(Nested Router)란?

라우터로 최소 2개 이상의 컴포넌트를 화면에 나타낼때 사용. 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조로 되어 있다.

네스티드 라우터의 구조. URL에 따라서 컴포넌트의 하위 컴포넌트가 다르게 표시

네스티드 라우터와 기본 라우터의 차이점

최상위(root) 컴포넌트에도 rounter-view가 있고, root의 하위 컴포넌트(User)에도 rounter-view가 있다. → URL에 따라 하위 컴포넌트의 내용이 바뀌게됨.

 

네임드 뷰(Named View)란?

특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식. 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시 가능

네스티드 라우터와 네임드 뷰의 차이

 

[네임드 뷰 구현]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Named View Sample</title>
  </head>
  <body>
      <!--라우터 영역 정의-->
    <div id="app">
      <router-view name="header"></router-view>
      <router-view></router-view> <!--name이 없는 경우 default-->
      <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: [
          {
              //<router-view>의 name 속성과 컴포넌트를 연결
            path: '/',
            components: {
              default: Body,
              header: Header,
              footer: Footer
            }
          }
        ]
      })

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

 

뷰 HTTP 통신

HTTP : 브라우저와 서버 간에 데이터를 주고 받는 통신 프로토콜(protocol)

 

뷰 리소스(resource)

<html>
  <head>
    <title>Vue Resource Sample</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));
                });
          }
        }
      });
    </script>
  </body>
</html>

 

엑시오스(Axios)

뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리. Promise 기반의 API형식이 다양하게 제공되어 별도의 로직을 구현 할 필요없이 주어진 API만으로 원하는 로직 구현 가능.

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

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

//HTTP 요청에 대한 옵션 속성 정의
axios({
	method: 'get',
    url: 'URL주소',
    ...
    });
API 유 형 처 리 결 과
axios.get('URL 주소').then().catch() 해당 URL 주소에 대해 HTTP GET 요청을 보냄. 서버에서 보낸 데이터를 정상으로 받아오면 then()안에 정의한 로직이 실행. 데이터를 받아올 떄 오류가 발생하면 catch()에 정의한 로직이 수행
axios.post('URL 주소').then().catch() 해당 URL 주소에 대해 HTTP POST 요청을 보냄. then()과 catch()의 동작은 위와 동일
axios({ 옵션 속성 }) HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있음. 데이터 요청을 보낼 URL, HTTP 요청 방식, 보내는 데이터 유형, 기타 등등 
<html>
	<head>
		<title>Vue with Axios Sample</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://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>

결과값의 response 객체를 확인해보면 data 속성이 일반 문자열이 아닌 객체 형태이기 때문에 따로 JSON.parse()를 사용하여 객체로 변환할 필요가 없음. (뷰 액시오스가 뷰 리소스보다 사용성이 좋군?)

참조 : Do it! vue.js 입문

728x90
저작자표시 비영리

'vue.js' 카테고리의 다른 글

[Vue.js] #5 뷰 템플릿(template)이란?  (0) 2021.11.11
[Vue.js] #3 뷰 컴포넌트란?  (3) 2021.11.09
[Vue.js] #2 뷰 인스턴스란?  (0) 2021.11.08
[Vue.js] #1 Vue.js 란? 뷰제이에스  (0) 2021.11.08

'vue.js'의 다른글

  • 현재글[Vue.js] #4 뷰 라우터(Router)란?

관련글

티스토리툴바