개발 무지렁이

[Vue] 인스턴스 방식의 뷰라우터(VueRouter)를 사용한 페이지 이동과 Vue에서 권고하는 비동기 처리 방식, axios 본문

Frontend/Vue

[Vue] 인스턴스 방식의 뷰라우터(VueRouter)를 사용한 페이지 이동과 Vue에서 권고하는 비동기 처리 방식, axios

Gaejirang-e 2023. 10. 7. 18:14

𐂂 뷰라우터 (VueRouter)
페이지 이동과 관련된 기능을 VueRouter로 구현할 수 있다.
(인스턴스 방식으로 VueRouter의 내용들을 뽑아낼 수 있다.
뷰 인스턴스에 라우터를 주입하면 된다.

⚠ 페이지 개수만큼 객체의 개수가 주입된다.

❓ 라우팅
: 어떤 url로 이동했을 때,
어떤 페이지가 뿌려질지에 대한 정보를 말한다.

🦁 router-view
: url에 따라 컴포넌트가 뿌려지는 영역

⚠ 인스턴스에 라우터가 연결되었을 때만 사용가능

📜 vue_router.html

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewprot" 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/dist/vue.js"></script>
      <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
      <script>
        let LoginComponent = {
            template: '<div>login</div>', 
        }

        let MainComponent = {
             template: '<div>main</div>',
        }

        let router = new VueRouter({
            routes: [ //page의 라우팅 정보
              {
                  path: '/login', //page의 url
                component: LoginComponent //해당 url에서 표시될 컴포넌트
              },
              {
                  path: '/main',
                component: MainComponent
              },
            ]
        });

        new Vue({
            el: '#app',
            router: router,
        });
      </script>
    </body>
  </html>
➼ 사용자는 url을 쳐서 이동하지 않는다.
화면에서 페이지를 이동시키는 링크가 필요하다.
router-link 태그는 최종적으로 화면에 앵커(a) 태그로 변환되어 나타난다.

<router-link to="/login">Login</router-link>

𐁍 axios
Vue에서 권고하는 자바스크립트의 HTTP 통신 라이브러리(Promise 기반 API 제공)
(브라우저와 Node.js 환경에서 모두 사용가능)
비동기적으로 HTTP요청을 보내고 응답을 처리할 수 있게 해준다.

🍩 간편한 HTTP 요청
: GET, POST, PUT, DELETE 등의 HTTP 요청을 보내는데 간편한 방법을 제공.

🍩 요청과 응답을 가로채는 인터셉터(interceptor)를 제공
: 이를 사용하여 요청이나 응답을 수정 가능.

🍩 자동 JSON 변환
: 요청과 응답데이터를 자동으로 JSON으로 변환한다.

🍩 간편한 에러처리
: HTTP 요청중 발생하는 오류를 쉽게 처리 가능.
(네트워크 오류, 요청 오류, 상태코드 오류) 등을 처리 가능.


📕 참고 자료 📕
Tistory's Card

📜 axios.html

  <!DOCTYPE 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">
        <button v-on:click="getData">get user</button>
        <div>
          {{ user }}
        </div>
      </div>

      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
      <script>
        new Vue({
            el: '#app',
              data: {
                users: [] 
            },
              methods: {
                getData: function() {
                    let 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>
    </body>
  </html>
🦉 axios.get()
: axios.get()을 호출하기 전의 this와
호출하고 나서의 비동기처리에 의해 들어오는 콜백함수 this가 가리키는 게 다르다.
실행컨텍스트의 내용이 바뀌면서, this가 바라보는 대상이 바뀐다.

'Frontend > Vue' 카테고리의 다른 글

[Vue] 영역별 구성요소를 나타내는 컴포넌트와 컴포넌트 간의 관계 및 데이터 흐름 (with 컴포넌트 통신방식)  (0) 2023.09.30
[Vue] 데이터의 변화를 감지하여 자동으로 화면에 그려주는 Vue.js의 핵심 컨셉(reactivity)과 양방향 Data Binding  (0) 2023.09.17
'Frontend/Vue' Related Articles more
Comments