Vue 강의 들으면서 내용 정리하기 !

• 추후 업데이트 할 예정

섹션10 : 브라우저 저장소를 이용한 인증값 관리

🔎새로고침할때 문제점 해결하기

• 토큰저장하고, 라우터 저장할때 단순히 자바스크립트에 저장하는게 아니라 브라우저 저장소를 이용해서 토큰값을 저장하면 새로고침을 하더라도, 브라우저 저장소에서 토큰값을 꺼내와서 사용가능.

이때 쿠키를 저장하는 방법 👇

쿠키 패널에서 확인하는 방법

• 하지만 이렇게 되어도 새로고침할땐 값이 리셋된다. 그 이유는 스토어에 값이 전달 되지 않았기 때문인데 그때 cookies 의 { getAuthFromCookie, getUserFromCookie } 를 사용한다

❗️❗️컴포넌트단의 무거운 비지니스 로직이 많이 노출되기 보다는 다른파일에 코드로 옮기는 것이 좋다

• store > index > actions 로 넘기는것이 좋다

• index의 LOGIN 비동기처리 끝나고나면 라우더로 메인페이지로 진입을 하기 때문에 await 가 꼭 필요하다.

• await 를 빼게되면 순서처리가 맞지 않는다

• 그 이유는 토큰을 받아서 스토어에 저장한 후 라우터로 진입을 해야하는데 await가 없으면 dispatch 가 끝나기도 전에 라우터에 진입하게 되서 비동기처리가 되지 않는다.

• await 필수!!

섹션12 : 중간정리

🔎뷰 라우터 및 컴포넌트 설계

• 코드스플리팅

• 페이지 컴포넌트를 정의하는 것이 아니라, 화살표 함수에 import 조합을 해서 url을 요청하는 시점에 해당 자원을 서버에서 당겨온다.

브라우저 저장소를 이용한 인증 값 관리

• 쿠키와 로컬스토리지의 차이점은 ?
• 쿠키는 토큰, 특정 값에 대한 만료기간을 설정가능 / 로컬스토리지는 설정 할 수 없다.

섹션13 : API 함수 모듈화

인스턴스 생성 함수 분할

• 하나의 파일에서 모든것을 관리하게 되면 실제로 작업할때 불편하게 된다.(실제로는 몇백줄이 되기 때문에)
• 따라서 모듈화를 이용, 인스턴스 조합으로 데이터 성격별로 파일을 쪼개는 것이 효율적