10/13

* Vue 인프런 강의 복습

- ref : https://www.inflearn.com/course/vuejs/

* Vue-Router 동적 라우트 매칭

• 코드 예시

{ path: '/user/:id', component: User }

• /user/foo, /user/bar와 같이 같은 패턴에 따라서 동일한 컴포넌트를 재사용해야하고, 매칭된 id값에 따라서 데이터를 받아와서, 정보를 변경하고 싶을때 사용한다.

  => 요약 : 동일한 컴포넌트를 재사용하는데, 데이터를 세그먼트에 따라 동적으로 변경하고 싶을때 사용한다!

• 여기서 id를 동적 세그먼트라고하고, 동적 세그먼트는 항상 "콜론"으로 시작해야한다.

• 동적 세그먼트(id)의 값은 this.$route.params를 통해 가져올 수 있다.

• 만약, /user/bar => /user/foo로 바로 이동한다면, 동일한 컴포넌트가 재사용되기 때문에, Vue의 라아프사이클 훅이 진행되지 않습니다.
  이때, $route 변경을 "watch"를 통해 감지하면 id값의 변화를 감지할 수 있다.

* Vue 중첩 라우팅

• 중첩된 라우팅 : 컴포넌트 하위에 또다른 컴포넌트를 라우팅을 통해 매칭시키는 방법

• 소스 예제

routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // /user/:id/profile 과 일치 할 때
          // UserProfile은 User의 <router-view> 내에 렌더링 됩니다.
          path: 'profile',
          component: UserProfile
        },
        {
          // /user/:id/posts 과 일치 할 때
          // UserPosts가 User의 <router-view> 내에 렌더링 됩니다.
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]

• 이번 프로젝트의 경우, /b/:bid/c/:cid 형태로 Board 컴포넌트 안에 Card 컴포넌트를 중첩시켰다.
  = > 이유는 Board안에 렌더링 되어있는 리스트를 클릭해서 카드 컴포넌트를 렌더링하는데, Board 컴포넌트 상위에 모달 창으로 띄우기 위해서 중첩 라우팅을 사용했다.
  => Board 컴폰펀트 안에 <router-view></router-view>를 작성하면, 라우팅에 따라서 Card컴포넌트가 매칭된다.

• 중첩 라우팅 사용할때 발생한 에러

//Card.vue
watch: {
	//1. 정상 동작
        $route(to, from) {
            this.cid = to.params.cid;
        },
        //2. 에러 발생
        $route : (to, from) => {
          this.cid = to.params.cid;
        }
},

• Board에서 router-link를 클릭해서, 주소를 /b/1/c/1 => /b/1/c/2로 변경했다.
  이때, Card컴포넌트에서 $route의 변경을 감지하고 있지 않다면, 컴포넌트가 재사용되고, 라이프 사이클 훅이 돌지 않기때문에 변경된 "cid"값을 감지 하지 못했다.
• 따라서 Watch를 이용해서 $route의 변경을 감지했다.
• 1번과 2번의 결정적인 차이점 : 1번의 경우는 this가 Vm(Vue 인스턴스)이지만 2번의 경우 애로우 펑션을 사용해서 this가 Vm에 매칭되지 않았다. 따라서 cid 프로퍼티를 찾지 못했고, 에러가 발생했다.
  => 애로우 펑션 사용이 원인!
  => 정확히는, 애로우 펑션의 경우 "this" 값이 없기 때문에, 상위 컨텍스트의 "this"를 사용한다.

Home.vue 데이터불러오기

• 흐름 : 컴포넌트에 렌더링할 데이터 선언 => api 호출 함수 선언 =>
  라이프 사이클 훅에서 함수 호출(데이터 가져오기) => 데이터가 변경되므로 뷰가 다시 렌더링 => 컴포넌트가 그려짐

• 새로고침 시, token값이 있음에도 Home.vue 컴포넌트에서 api 호출이 안되는 에러 발생

//@/store/index.js
//store 객체를 import 한 모든 곳에서 store를 사용할 수 있다.
const store = new Vuex.Store({});


if (sessionStorage.getItem("token")) {
    const token = JSON.parse(sessionStorage.getItem("token"));
    store.commit("LOGIN", token);
}

• Store객체가 설정될때, 세션 스토리지에서 token값이 있으면, axios config에 베어러 토큰 값을 설정해준다.

• 문제 원인

1. 새로 고침 시 토큰값을 Axios config에 설정해주는 함수가 빠져있었다.
2. 로그인 시 받은 token값을 JSON.stringify()를 통해 sessionStorage에 설정했는데, 가져올 때 JSON.parse()를 통해 값을 변경하지 않아서, Api 호출 시 Unauthorized 에러가 발생했다.

Reference

1. Vue 동적 라우트 매칭 : https://router.vuejs.org/kr/guide/essentials/dynamic-matching.html
2. Vue 중첩 라우팅 : https://router.vuejs.org/kr/guide/essentials/nested-routes.html
3. Vue 라우팅 : https://jeonghwan-kim.github.io/2018/04/07/vue-router.html