[TIL] 190803

오늘 한 일

• 인프런 [Vue.js 완벽 가이드] 진도율 77% 돌파
• 라우터 네비게이션 가드 학습 및 실습.
• async & await 학습 및 실습.

공부 내용

• 라우터 네비게이션 가드는 페이지를 이동하기 전에 라우터 단에서 한 번 막아주어 무언가 작업할 수 있는 기능이다.
• 컴포넌트 라이프사이클 훅(created)에서 데이터를 받아오면 페이지 이동된 후에도 이전 데이터가 보여지는데 네비게이션 가드로 이것을 해결할 수 있다.
• VueRouter의 해당 path에 beforeEnter 함수를 추가한다. 해당 함수는 (to, from, next) 세가지 인자를 받는다.
• to: 이동할 페이지, from: 현재 페이지, next(): (모든 할 일을 마친 뒤) 다음 페이지로 이동. (실행 안시키면 이동 안함)
• async & await는 비동기 처리를 절차식 프로그래밍 코드처럼 쓸 수 있도록 해주는 아주 유용한 문법이다. (ES8에서 정의된 비교적 최신 문법)
• 비동기 처리가 포함된 function 키워드 앞에 async를 쓰고 해당 함수 내에서 비동기 처리되는 부분 앞에 await를 붙여주면 된다.
• 예외처리는 try catch 구문으로 처리한다.
• 어떤 값을 리턴하든 Promise객체가 리턴된다.
• 화살표 함수에도 가능하다.

async function fetchItemData(id) {
    try {
        const response = await axios.get(`${config.baseURL}item/${id}.json`);   
        return response;
    } catch (error) {
        console.log(error);  
    }
}

// 라우터 네비게이션 가드에 적용한 경우
beforeEnter: async (to, from, next) => {
    const response = await store.dispatch('FETCH_ITEM');
    next();
}