Vue.js30 [Vue.js] 23. v-navigation-drawer 에 link 구현 참으로 오랫만에 글을 쓰는것 같습니다. 지난 번에는 Vue.js를 이용해서 원하는 페이지의 전체 큰 틀을 만들어보는 내용을 작성했었는데... 이번에는 그 내부로 좀 더 들어가서 navigation bar에서 표시되는 내용을 꾸며 보도록 하겠습니다. 보통 navigation bar에는 개인 사용자의 기본 정보와 제공되는 페이지 link 가 표시되는데, 최종 목표는 아래와 같이 nav bar를 제공하고, 각 link가 정상적으로 동작하게 하는것으로 하겠습니다. 1. Vuetify를 통한 Navigation Bar적용 확인 Vuetify에서는 Navigation Bar를 적용하기 위해서 v-navigation-drawer를 사용합니다. 해당 내용은 기존에 작성했던 내용이 있어서 링크를 걸어놓겠습니다. 2021.. 2022. 2. 18. [Vue.js] 22. use Vuex 이번에는 Vuex에 대해서 알아보겠습니다. Vuex는 vue.js로 제작한 web application에 대한 상태를 관리할 수 있도록 기능을 제공하는 Library입니다. 해당 application내 모든 components에 대한 공용저장공간이라고 생각하면 될 것 같습니다. 예를들면, 이전에 JWT를 구현하기 위해서 사용한 Session Storage도 공용저장공간의 역할을 수행하지요. SPA로 제작하는 web application의 경우에는 다양한 components가 동일한 data를 참조해야 할 수 있습니다. 해당 data는 유기적으로 변하지만 어느 시점에서는 모두 동일하게 보여야 하는 것이죠. 이를 좀더 구체화된 단어로는 state(상태)라고 Vuex에서는 정의합니다. 그리고 이 state를 .. 2021. 4. 29. [Vue.js] 21. axios interceptors Spring Boot에서 기존에 JWT를 통한 인증을 포함하는 RestAPI를 구현할 때, Interceptor라는 것이 있었습니다. 이 기능은 httpRequest와 httpResponse를 진행하기 전에 잠시 application에서 가로채서 특정 동작을 수행 후 다시 동작을 수행하게 해주는 기능입니다. Spring Boot에서는 HandlerInterceptor interface를 implements하고 관련된 method를 @Override하여 사용했습니다. Controller에서 해당 요청을 처리하기 전에 동작하는 preHandle( ), 이후에 동작하는 postHandle( ) 이런식으로 구성이 되어 있습니다. 그렇다면, SPA를 제공하는 vue.js와 같은 곳에서는 이런 기능을 사용할 수 없.. 2021. 4. 27. [Spring Boot] 34. JWT 인증 갱신처리 (3) 이제 JWT를 통한 인증처리의 마지막 단계입니다. Back-End에서 Access Token과 Refresh Token을 발급하여, Front-End를 통해서 개별 사용자 환경에 해당 Token들을 저장하는 로직을 구현하였고, 더 나아가 Front-End에서는 사용자의 Token의 Expiration을 확인하여 조건에 따라서 Token을 전달하는 로직까지 구현하였습니다. 중간에 Refresh Token에 대한 DB에 저장하는 로직 등 추가적인 내용도 여럿 있었습니다. 최종적으로 Access Token의 만료로 Back-End에 Refresh Token을 전달할 때, Back-End에서 처리하는 로직에 대해서 구현해 보도록 하겠습니다. 이를 위해서는 Front-End와 Back-End에 각 각 로직이 모두.. 2021. 4. 26. 이전 1 2 3 4 ··· 8 다음
