😊 2021.04.26

1. 사이드 프로젝트

🎉 TODO

1. Vue SearchPgae
   • 최초 검색 로직 [✔]
   • 네비게이션 가드를 통한 쿼리 스트링 체크, 리다이렉션 [✔]
   • searchText 변경 감지를 통한 searchPage내 재 검색 [✔]

🎉 TIL

1. ✨✨ Vue Router 네비게이션 가드

0. 사용 배경

• "/search" 경로로 이동하면 SearchPage 컴포넌트가 router-view에 렌더링된다.
• /search 경로로 완전히 이동해서 컴포넌트가 렌더링되기 이전에 $route.query에 있는 값을 체크해서 리다이렉션 혹은 컴포넌트 및 스토어 최초 설정 로직을 실행하기 위해서 네비게이션 가드를 사용했다.

1. 라우터 별 가드와 컴포넌트 가드

• 라우터 별 가드 : 라우터 설정 객체에 직접 정의한다.

• 컴포넌트 가드 : 컴포넌트 안에 네비게이션 가드를 정의할 수 있다.

• 네비게이션 가드 안에서 컴포넌트의 메소드에 접근할 수 있어야하기 때문에 컴포넌트 가드를 사용했다.
• 컴포넌트 가드 beforeRouteEnter의 인자로 전달되는 next() 함수에 콜백 함수를 전달할 수 있고, 이 콜백 함수의 인자로 전달되는 vm을 통해서 현재 컴포넌트 인스턴스에 접근할 수 있다.

2. 적용한 소스

//SearchPage.vue
beforeRouteEnter(to, from, next) {
   // /search?q=searchText
   const searchText = to.query.q;

   // 1.
   if (!searchText && (searchText !== 0 || searchText !== "0")) {
      return next("/");
   }

   // 2.
   next((vm) => {
      // vm은 현재 컴포넌트(SearchPage) 인스턴스이다.
      vm.SET_SEARCH_TEXT(searchText);
      vm.openSearchForm();
   });
},

1. searchText의 값이 없을 경우 메인 페이지로 리다이렉션한다. next()를 호출한 이후에도 아래의 소스가 실행되므로 return next()를 통해서 함수를 종료한다.
2. 네비게이션 이동에 성공했을 경우 next() 함수 안에있는 콜백함수가 실행되고, 인자로 전달된 vm은 현재 컴포넌트(SearchPage)의 인스턴스이다. 인스턴스의 메소드에 접근해서 최초 설정 로직을 실행한다.

3. ✨✨ 에러

• beforeRouteEnter 훅의 콜백 함수 보다 컴포넌트의 created훅이 먼저 실행된다. => 공식 문서에 따르면 beforeRouteEnter의 콜백 함수가 네비게이션 시나리오 중에서 가장 마지막으로 실행된다.
• beforeRouteEnter 훅에서 최초 설정을 하고, created 훅에서 설정된 데이터를 통해 API를 요청하려고 했는데, created 훅이 먼저 실행되어서 에러가 발생했다.
• 따라서, beforeRouteEnter 훅 안에서 API 요청 함수를 실행시키는 방법으로 해결했다.

4. 참고
   : https://joshua1988.github.io/web-development/vuejs/vue-router-navigation-guards/#%EB%84%A4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98-%EA%B0%80%EB%93%9C%EB%9E%80
   : https://router.vuejs.org/kr/guide/advanced/navigation-guards.html

2. ✨(자주 까먹는 Vue router 로직) $route.query 업데이트하기

: https://stackoverflow.com/questions/40382388/how-to-set-url-query-params-in-vue-with-vue-router

$router.push({
    path: "",
    query: {},
});

// 또는
$router.replace({
    path: "",
    query: {},
});

$router.replace(), $router.push() 두개 모두 사용 가능하다.

2. TIL

1. 배열 내에 중복된 데이터 있는지 체크

: https://stackoverflow.com/questions/7376598/in-javascript-how-do-i-check-if-an-array-has-duplicate-values

function checkForDuplicates(array) {
  let valuesAlreadySeen = []

  for (let i = 0; i < array.length; i++) {
    let value = array[i]
    if (valuesAlreadySeen.indexOf(value) !== -1) {
      return true
    }
    valuesAlreadySeen.push(value)
  }
  return false
}

2. Vuex의 템플릿, DOM 렌더링 기본

: https://kr.vuejs.org/v2/guide/render-function.html

3. Object.values(object)

obejct의 value로 이루어진 배열을 리턴

4. Array.prototype.every(everyFunction);

배열의 모든 요소들이 특정 조건을 만족하는지 체크