본문 바로가기

web59

Global Exception 처리 개발 할 때 try-catch{ } 문으로 예외 처리를 하다보면 공통적으로 잡는 Exception 이 보인다. 난 중복된 코드를 싫어하기에 매번 Method 작성할 때마다 같은류의 try catch 가 보이는게 보기 싫었다. 그래서 찾은게 @ControllerAdvice @ControllerAdvice ➔ @ExceptionHandler, @ModelAttribute, @InitBinder 가 적용된 메서드들에 AOP를 적용해 Controller 단에 적용하기 위해 고안된 어노테이션. 클래스에 선언하면 되며, 모든 @Controller에 대한, 전역적으로 발생할 수 있는 예외를 잡아서 처리할 수 있다. @RestControllerAdvice (@ControllerAdvice + @ResponseBody).. 2023. 9. 6.
Nuxt(Vue) 로 admin page 만들기 (2) 이번엔 로그인페이지를 갖다붙여보려한당! 1. page/login.vue 로그인컴포넌트 생성 Admin Login Login Sign Up 2. 기존에 layouts/default.vue 의 컴포넌트가 레이아웃으로 적용되면 안되기에 로그인용 레이아웃을 또 따로 만들어주었다. import { Component, Vue } from 'nuxt-property-decorator'; @Component({ name: 'fullPage' }) export default class fullPage extends Vue {} 3. login.vue 에 레이아웃 변경. export default { name: 'Login', layout : 'fullPage', ..... } 4. http://localhost:3000.. 2023. 9. 5.
Nuxt(Vue) 로 admin page 만들기 (1) Vue가 지원하는 Admin 템플릿들은 꽤나 많다. 나는 그 중에 Vuetify를 써서 구현해보려한다. 해당 페이지에서 공짜로 지원하는거 중 맘에 드는걸로 골라 다운받은 후 프로젝트에 붙여넣었다. https://themeselection.com/vuetify-admin-template-github/ Top 10+ Vuetify Admin Template GitHub 2023 The collection of Vuetify Admin Template Github. Develop interactive web apps with help of these Vuetify Admin dashboards from GitHub. themeselection.com 내가 받은건 Vuetify + Material 기반이다. 다.. 2023. 9. 4.
Nuxt 구조 Nuxt 프로젝트를 최초로 생성하면 아래와 같은 폴더구조로 생성이 된다. 각 폴더별로 어떤 기능을 하는지 알아보자. 위에 나와있지 않더라도 필요에 의해 직접 생성하면 된다. ▪️ components : 재사용이 자주되는 뷰 파일들을 관리한다. ▪️ node_modules : nuxt에 필요한 package들이 있고, npm이나 yarn으로 설치하는 lib 들이 여기에 들어간다. ▪️ pages : 애플리케이션의 view 디렉토리다. 언더바(_)로 파일명이 시작할 경우 동적으로 라우팅된다. 예를들어 특정 id 값을 가진 todo를 보고 싶다면 pages/todo/_id.vue 형태로 구성하면 localhost/todo/1로 접근하면 된다. ▪️ static : 서버 루트에 직접 매핑되어 바뀌지 않을 파일을.. 2023. 9. 1.