Vue.js28 [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. [Vue.js] 20. Google OAuth 2.0 사용하기 (3) 지난 시간에 이어서 Goolge OAuth 2.0을 web application에 적용하는 방법을 알아보겠습니다. 전체적인 단계는 아래의 순서로 살펴보겠습니다. Create user authorization credentials web application에 적용해서 Login / Logout 구현하기 Token 전송 및 Google API 호출 / 사용하기 현재까지 진행된 단계를 살펴보면, Create user authorization credentials을 수행하였고 web application에서 Google OAuth로 Login 단계를 진행하여 해당 web application에서 개별 사용자의 접근 정보를 사용할 수 있도록 승인하는 부분까지 구현이 되었습니다. 이를 통해서, Google에 개인.. 2021. 4. 14. 이전 1 2 3 4 ··· 7 다음
