Vue/Vue (31) 썸네일형 리스트형 Vuex4에서 state 변경을 감지하는법 (watchEffect) Vue.js 에서 컴포넌트를 나누면서 재사용이 많은 데이터를 Vuex 에 보관하기 시작했고 Vuex의 상태값 변화에 따라 데이터를 갱신해야 하는 일이 생겼습니다. Vue.js 2.0 에서 Vue.js 2 (Vuex 3) 버전에서는 computed와 watch를 사용하여 아래와 같이 state 변경을 감지합니다 ... computed: { getData () { return this.$store.getters.getPlaces } }, watch: { getData (val) { console.log('watched: ', val) } }, ... computed : "반응형 getter" 즉 함수내에 속한 프로퍼티 (state) 의 변경여부를 추적합니다. watch : computed 객체의 변경 (g.. Vuex4 모듈화, store호출 (2) Vuex 모듈화 단일 상태 트리를 사용하기 때문에 APP의 모든 상태가 객체안에 포함됩니다. 따라서 규모가 커지면 저장소도 비대해 질 수 있습니다. 이를 위해 Vuex는 저장소(store) 를 모듈로 나눌 수 있습니다. // Vue3.0 에서의 store/index import { createStore } from 'vuex'; import places from "@/store/module/places"; import station from "@/store/module/staion" export default createStore({ modules: { places, station } }); 파일 구조 module/ : 모듈로 나눈 저장소가 위치한 디렉토리 입니다. index.js : 각 모듈화한 파일들.. Vuex란? (1) Vuex란? Vuex는 Vue.js에 대한 상태관리 패턴 + 라이브러리 입니다 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 합니다 - Vuex 사용이유 공통의 state를 공유하는 여러 컴포넌트가 있으면 중첩되는 prop이 많이 생기게 됩니다. 이는 나중에 유지보수하기 힘든 난해한 코드가 될 수 있습니다 이러한 공통의 state는 동일한 상태로 관리되어야 합니다. Vue.js는 단방향으로 데이터가 흐르기 때문에 여러 컴포넌트가 state를 공유하는 경우 관리가 복잡해질 수 있습니다. - Vuex의 핵심 속성 state : 컴포넌트간 공유할 data 집합입니다 getter : Vuex의 state 변경을 각 컴포넌트에서가 아닌 Vuex에서 수행하도록 하고 Getter로 호출합니다 muta.. Vue3) Vue-Router Vue-Router란? Vue.js에서 페이지 이동을 위한 라이브러리 입니다 Vue.js 공식 라우터 입니다 페이지 이동시 url이 변경되면 완전 새로운 페이지를 불러오는게 아닌, 변경된 요소 컴포넌트만 동적으로 다시 작성하는 SPA을 구현합니다 - 주요기능 동적 라우트 매칭 주어진 패턴을 가진 라우트를 동일 컴포넌트에서 매핑해야 하는 경우가 자주 있습니다. user/100과 user/101 중첩된 라우트/뷰 매핑 중첩 된 라우트 구성을 사용하여 다음과 같은 관계를 표현하는 것이 간단해집니다 라우터 파라미터 쿼리 와일드카드 네비게이션 가드 active CSS 클래스를 자동으로추가해주는 링크 HTML5 히스토리 모드 vue-router의 기본 설정은 hash 모드입니다. URL 해시를 사용하기 때문에 UR.. Vue.js 3.0 시작하기 Vue.js 란? Vue.js 는 웹 페이지 화면을 개발하기 위한 Front-end Framework 입니다. 뷰는 화면단 라이브러리이자 프레임워크라고도 볼 수 있습니다. MVVM 패턴 뷰(Vue.js)는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는화면단 라이브러리 입니다. View : 사용자에게 보이는 화면 DOM : HTML 문서에 들어가는 요소(태그,클래스,속성 등)의 정보를 담고 있는 데이터 트리 DOM Listener : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 Model : 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장 Data Binding : 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화 Vi.. 로그아웃 3 (Springboot + Vue) 추가된 코드 token tokenRepository tokenService CustomLogoutSuccessHandler 코드 동작 로그아웃 후에도 기간이 남은 토큰은 재사용될 가능성이 있다. (토큰은 따로 처리하지 않기때문) 따라서 로그아웃시 로그아웃 핸들러를 통해 토큰을 따로 저장해둔다. 토큰인증필터에서 해당 토큰이 로그아웃 처리된 토큰인지 DB에서 비교하는 코드를 통해 확인가능하다. // CustomLogoutSuccessHandler @Override public void onLogoutSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException, S.. 로그아웃 2 (Springboot + Vue) 코드 동작 로그아웃시 해당 토큰을 블랙리스트에 추가하는 방법으로 로그아웃 토큰을 처리 로그아웃 CustomLogoutSuccessHandler 의 requestHeader에서 토큰을 구한다 (로그인시 구하는 방법과 동일) 토큰에서 만료일을 구한 후 (토큰 id , 토큰 , 토큰 만료일) DB에 저장한다. DB에서는 이벤트 스케줄러를 통해 설정한 시간마다 블랙리스트 토큰의 만료일과 현재 시간을 비교한다. 블랙리스트 토큰의 만료일 < 현재시간 일 때, 해당 토큰을 삭제한다. 인증 필터에서는 해당 토큰이 블랙리스트에 등록되어 있는지 확인한다. 추가한 파일 & 코드 CustomLogoutSuccessHandler - 로그아웃 성공 시 핸들러 실행 Token - 토큰 엔티티 정의 Token.Repository -.. 로그아웃 1 (Springboot + Vue) Vue 에서 로그아웃 버튼을 누르면 userStore의 action으로 dispatch dispatch된 logout action에서 post : /api/logout으로 Springboot 요청 Spring Security에 지정된 로그아웃 Url로 요청이 들어오면 아래 내용의 작업을 수행한다. (WebSecurityConfig) Springboot에서 logout-action으로 응답이 오면 userStore에 있는 state를 초기화 시키는 mutations를 실행 로그인 화면으로 되돌아간다. (Vue) userStore의 state값을 하나하나 초기화 시켰다.. mutations: { resetState: function (state){ state.email = ''; state.token = '.. 이전 1 2 3 4 다음
