VueJS Axios, Vue-router

Axios

HTTP 통신 : axios

• Vue에서 권고하는 HTTP 통신 라이브러리는 Axios이다.
• Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘 되어있고, API가 다양하다.
• axios.get(URL) << Promise 객체를 return >> then, catch 사용가능
• https://github.com/axios/axios

Promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 라이브러리이다. 자바스크립트는 단일 스레드로 코드를 처리하기 때문에 특정 로직의 처리가 끝날 때까지 기다려 주지 않는다. 따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타나는 로직을 실행해야 할 때 주로 Promise를 활용한다. 그리고 데이터를 받아왔을 때, Promise로 데이터를 화면에 표시하거나 연산을 수행하는 등 특정 로직을 수행한다.

Axios 설치

• CDN 방식

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

• NPM 방식
  • npm install axios

Vue-router

Vue-router

• 라우팅 : 웹 페이지 간의 이동 방법.
• Vue.js의 공식 라우터.
• 라우터는 컴포넌트와 매핑.
• Vue를 이용한 SPA를 제작할 때 유용.
• URL에 따라 컴포넌트를 연결하고 설정된 컴포넌트를 보여준다.
  https://router.vuejs.org/kr

Vue-router 설치

• CDN 방식
  • <script src= "https://cdn.jsdelivr.net/npm/vue/dist/vue.js></script>"
• NPM 방식
  • npm install vue-router

Vue-router 연결

• 'routes' 옵션과 함께 router instance 생성.
  router01

<script>
      // 라우트 컴포넌트
      const Main = {
        template: "<div>메인 페이지</div>",
      };
      const Board = {
        template: "<div>자유 게시판</div>",
      };
      const QnA = {
        template: "<div>질문 게시판</div>",
      };
      const Gallery = {
        template: "<div>갤러리 게시판</div>",
      };

      // 라우터 객체 생성
      const router = new VueRouter({
        routes: [
          {
            path: "/",
            component: Main,
          },
          {
            path: "/board",
            component: Board,
          },
          {
            path: "/qna",
            component: QnA,
          },
          {
            path: "/gallery",
            component: Gallery,
          },
        ],
      });

      // Vue 인스턴트 라우터 주입
      const app = new Vue({
        el: "#app",
        router,
      });
    </script>

vue-router 이동 및 렌더링.

• 네비게이션을 위해 router-link 컴포넌트를 사용.
• 속성은 'to' prop를 사용.
• 기본적으로 <router-link>는 <a> 태그로 렌더링.

router02, router03 참조.

이름을 가지는 라우트.

• 라우트는 연결하거나 탐색을 수행할 때, 이름이 있는 라우트를 사용.
• Router Instance를 생성하는 동안 routes 옵션에 지정.
  router04 참조.

프로그래밍 방식 라우터.

• <router-link>를 사용하여 선언적 네비게이션용 anchor 태그를 만드는 것 외에도 라우터의 instance method를 사용하여 프로그래밍으로 수행.

$router.push('home')
$router.push({ path: 'home'})
$router.push({ name: 'boardview', params: { no: 3}})
$router.push({ path: '/board', query: {pg: 1}})

router05 참조

중첩된 라우트.

• 앱 UI는 일반적으로 여러 단계로 중첩된 컴포넌트 구조임.
• URL의 세그먼트가 중첩된 컴포넌트의 특정 구조와 일치하는 것을 활용.

router06 참조

라우트 리다이렉트.

const router = new VueRouter({
  mode: 'history',
  routes: [
    ...,
    {
      path: '/board',
      name: 'board',
      component: Board,
      redirect: '/board/list',  // or redirect: {name: 'list'}
      children: [
        ...,
      ],
    },
  ],
});