[Vue.js] 쿠키 사용
쿠키 생성 화면을 새로고침 했을 때 Vuex의 state는 비워지게 되고 Token의 정보도 없어지게되서 게시판을 계속 볼 수 없는 인증상태가 되지 않으므로 그 정보를 cookie에 저장해야한다. cookie를 이용해 브라우저 저장소에 저장하면...
[Vue.js] Loading Spinner 등록
LoadingSpinner.vue 생성 현재는 로컬서버에서 데이터를 불러와 시간이 짧게 걸린다. 하지만 사이트가 구현이 되면 서버에서 데이터를 불러오는 시간이 걸릴 수도 있다. 그래서 데이터 로딩 될 때 로딩상태를 나타내는 로딩스피너를 추가한다. componets/common/에...
[Vue.js] 로그인 인증 토큰, HTTP헤더에 토큰삽입
인증 토큰 메인페이지에서 할 일 리스트를 조회하려면 유저의 권한이 필요하기 떄문에 로그인 토큰이 필요하다. 로그인 인증 토큰은 로그인 성공시 반환하는 promise의 data안에 들어서 반환 된다. 그 token을 받아서 할 일...
[Vue.js] Axios Interceptor
axios interceptor 서버에서 요청이나 받는 응답을 처리하기 전에 추가 로직을 넣을 수 있는 것이 axios interceptor다. Axios Interceptor 공식 문서 서버 요청에 로직 추가 axios.interceptors.request.use와 서버 응답에 로직 추가 axios.interceptors.response.use...
[Vue.js] template, v-if 와 v-else
v-if 디렉티브는 조건에 따라 블록을 렌더링하기 위해 사용된다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다. v-else-if는 이름에서 알 수 있듯, v-if에 대한 “else if 블록” 역할을 합니다. 또한 여러...