[Vue] 뷰 라우터, Axios

뷰 라우터

• 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리이다.
• 아래 처럼 CDN 방식으로 라이브러리 사용이 가능하다.

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js">

뷰 라우터 사용법

<div id="app">
    <div>
      <router-link to="/login">Login</router-link>
      <router-link to="/main">Main</router-link>
    </div>
    <router-view></router-view>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
<script>
    var LoginComponent = {
      template: '<div>login</div>'
    }
    var MainComponent = {
      template: '<div>main</div>'
    }

    var router = new VueRouter({
      // 페이지의 라우팅 정보      
      routes: [
        // 로그인 페이지 정보
        {
          // 페이지의 url
          path: '/login',
          // name: 'login',
          // 해당 url에서 표시될 컴포넌트
          component: LoginComponent
        },
        // 메인 페이지 정보
        {
          path: '/main',
          component: MainComponent
        }
      ]
    });

    new Vue({
      el: '#app',
      router: router,
    });
</script>

• 뷰 인스턴스의 router 옵션을 이용하여 등록이 가능하다.
• 라우터의 routes 옵션에는 각 페이지 정보들을 {path, component} 형태의 리스트로 넣어준다.
• 브라우저의 주소 창에서 URL이 변경되면, 앞에서 정의한 routes 속성에 따라 해당 컴포넌트가 화면에 뿌려진다. 이때 뿌려지는 지점이 템플릿의 <router-view>이다.
• 사용자에게 라우터의 링크를 제공할 떄는 <router-link to="이동할 URL">형태의 태그로 화면에 표시해준다. 이때 해당 코드는 화면에서 <a> 태그로 변형되어 뿌려진다.

엑시오스(Axios)

• 뷰에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)이다. Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양하다.
• 아래처럼 CDN 방식으로 라이브러리 사용이 가능하다.

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

엑시오스 사용법

<div id="app">
  	//1. 클릭시, getData 메서드 수행 
    <button v-on:click="getData">get user</button>
    <div>
      {{ users }}
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
      el: '#app',
      data: {
        users: []
      },
      methods: {
        //2. getData 메서드 수행시 users 데이터 업데이트 
        getData: function() { 
          var vm = this;
          axios.get('https://jsonplaceholder.typicode.com/users/')
            .then(function(response) {
              console.log(response.data);
              vm.users = response.data;
            })
            .catch(function(error) {
              console.log(error);
            });
        }
      }
    })
</script>

• 라이브러리를 설치하고나면 axios라는 변수에 접근할 수 있게 된다.
• .then : 비동기 통신이 성공했을 경우, .then()은 콜백을 인자로 받아 결괏값을 처리할 수 있다.
• .carch : .catch() 를 통해 오류를 처리한다. error 객체에서는 오류에 대한 주요 정보를 확인할 수 있다.
• 엑시오스 요청 config 옵션은 다음 링크에서 확인 가능 하다 https://axios-http.com/docs/req_config

출처 : https://joshua1988.github.io/vue-camp/