Framework 11

[Spring Boot] Spring AOP를 활용한 Logging

기본적으로 함수 시작 전, 종료 후, 에러 발생 후 시점을 기준으로 자동으로 로그를 생성하도록 Aspect를 만들어서 설정할 수 있습니다. execution() 안에서 로그를 자동으로 남길 범위를 정할 수 있습니다. 로깅이 필요하지 않은 함수들은 @NoLogging 어노테이션을 만들어서 처리할 수 있습니다. (민감 정보를 가지고 있거나 로깅이 필요하지 않는 함수 등) Advice 실행 시점 설명 @Before 함수 시작 전 함수가 속한 클래스 이름, 함수 이름, 함수로 들어온 파라미터(args) 등을 로그로 남깁니다. @AfterReturning 함수 시작 후 함수가 속한 클래스 이름, 함수 이름, 함수가 반환한 값(result) 등을 로그로 남깁니다. @AfterThrowing 에러 발생 후 함수가 속..

[Spring Boot] 자주 쓰이는 Spring Boot Annotation (Controller, Service, Model)

🚀 Controller Annotation Annotation 영역 Description @RestController Class Spring의 컴포넌트 스캔 대상이 되도록 하고 HTTP 요청과 응답을 자동으로 매핑되도록 하는 등 Spring에서 Controller로 동작할 수 있도록 기본적인 동작을 담고있는 어노테이션입니다. @Controller와 @RequestBody가 합쳐진 어노테이션으로 RESTful 웹 서비스에서 주로 사용됩니다. @RequiredArgsConstructor Class Spring 4.3부터는 @Autowired를 통한 의존성 주입보다 생성자를 통한 의존성 주입을 권장하고 있습니다. @RequiredArgsConstructor를 사용하면 생성자 코드를 따로 적지 않아도 됩니다. ..

[Spring Boot] @ExceptionHandler, @ControllerAdvice (Exception 공통 처리)

🚀 Exception 공통 처리 보통 예외는 3가지 방법으로 처리할 수 있다. 예외 복구 : 예외가 발생하면 예외 상황에 알맞게 처리하여 복구한다. (try, catch) 예외 회피 : 예외를 직접 처리하지 않고 예외를 상위 메소드에 위임한다. (throw) 예외 전환 : 예외를 위임하되 발생한 예외를 그대로 위임하는 것이 아닌 적절한 예외로 전환하여 위임한다. (restTemplate.doExecute) 이때 예외 복구에 대한 범위는 아래와 같다. 메소드 영역 : 메소드 영역은 종속된 복구 기능으로 단순히 try, catch 사용하면 된다. 클래스 영역 : 클래스 내 공통 예외 복구는 @ExceptionHandler를 사용하면 된다. 전역 영역 : 여러 클래스의 공통 예외 복구는 @ControllerA..

[Spring Boot] Filter, Interceptor, AOP 차이 및 정리

Spring Boot를 사용하면 애플리케이션의 공통 기능을 개발하고 관리하는데 매우 효과적인 다양한 기능을 제공한다. 예를들어 로그인 관련 (세션 체크) 처리, 권한 체크, XSS(Cross Site Script) 방어, PC와 모바일웹의 분기처리, 로그, 페이지 인코딩 변황 등이 있다. 이러한 기능 중에는 Filter, Interceptor, Aspect-Oriented Programming (AOP) 등이 있다. 각각의 기능은 애플리케이션의 요청 처리 과정에서 앞, 중간, 뒤에 추가하여 특정한 작업을 수행하도록 해주며, 코드의 재사용성과 모듈성을 높여준다. (모든 페이지마다 공통 업무에 관련된 코드를 작성하면 중복된 코드가 많아지고 서버에 부하를 줄 수도 있으며 소스 관리도 어렵다.) Intercep..

[Spring Boot] 정적 파일 로드 시 URL에 Jsessionid 붙는 경우 해결

프로젝트에서 배포된 QA 환경의 로그인 화면이 최초 로딩 시에 화면 깨짐 현상이 발생했다. 새로고침이나 재접속할 경우에는 정상적으로 로딩이 되는 이상한 현상이 지속됐다. 1. 원인 파악 😵 처음에는 css의 경로가 문제라 판단되어 절대경로로도 바꾸고 '/'을 붙여도 보며 시도해보았으나 현상은 동일했다. 한 시간동안 삽질한 끝에 원인을 파악했는데, 개발자 도구 (F12)로 HTML의 Element를 보니 URL 뒤에 jsessionid가 붙어있었다!! 이는 Tomcat 서버에서 Spring Framework에서 태그를 사용할 경우 최초 호출시 URL에 Jsessionid가 붙여지는 현상 때문이였다. 이는 버그가 아닌 의도적으로 설계된 것이다. (Tymeleaf 템플릿 엔진을 사용중이였다) 그럼 왜 이렇게 ..

[Spring Batch] Spring Batch 5.0 migration Guide - initial Database schema updates

Spring Batch 5.0 migration Guide - initial Database schema updates Spring Batch가 5.0으로 버전 업하면서 여러 사항들이 변경 됐다. 자세한 내용은 아래 첨부한 링크에서 확인! 그 중 Spring Batch의 메타 데이터 저장 테이블의 Schema가 변경되어 Migration하거나, 초기 시작일 경우 생성하는 방법에 대해 기술하고자 한다. Spring Batch가 제공하는 배치 메타 데이터 저장 테이블에 대한 정보는 아래 첨부한 링크에서 확인! 1. Schema Create 🚀 Spring Batch 작업을 처음 할 경우 Database에서 Schema에 대한 Create 쿼리는 아래와 같다. (Oracle 기준임. 다른 DBMS의 경우 아래..

[Vue.js] Vuex와 State

Vuex란? Vue.js의 상태 관리를 위한 패턴이자 라이브러리입니다. 다른 상태 관리 패턴이나 라이브러리와 비교했을 때 뷰의 반응성(Reactivity) 체계를 효율적으로 활용하여 화면을 업데이트한다는 차이점이 있습니다. 상태 관리란? 상태 관리란 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 패턴을 의미합니다. 뷰와 성격이 비슷한 프레임워크인 리액트(React)에서는 Redux, Mobx와 같은 상태 관리 라이브러리를 사용하고 있고 뷰에서는 Vuex라는 상태 관리 라이브러리를 사용합니다. 상태 관리(State Management)가 왜 필요한가? 컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성합니다. 예를 들면, Header, button, L..

Framework/Vue.js 2023.04.09

[Vue.js] Vue.js 기본 - Vue Template

Vue Template Vue의 Template 문법이란, Vue로 화면을 조작하는 방법을 의미합니다. Template 문법은 크게 1. Data Binding, 2.Directive 으로 나뉩니다. Data Binding : Vue Instance에서 정의한 속성들을 화면에 표시하는 방법입니다. Instance의 속성을 연결할 수 있습니다. 기본 구조 : {{data}} Directive : Vue로 화면의 요소를 더 쉽게 조작하기 위한 문법입니다. 화면 조작에서 자주 사용되는 방식들을 모아 Directive 형태로 제공하고 있습니다. 기본 구조 : v- (ex. v-bind, v-if, v-else, v-show, v-on, v-model 등) !-- seen의 진위 값에 따라 p 태그가 화면에 표시..

Framework/Vue.js 2022.07.25

[Vue.js] Vue.js 기본 - Vue Router, Axios

Router Vue Router는 Vue 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다. 페이지 이동 시 사용하는 기능으로, 프로젝트에 Vue Router를 설치하는 방법은 CDN, NPM 2가지 방식이 있습니다. CDN 방식 Axios Axios는 Vue에서 가장 많이 사용하는 Promise 기반 HTTP 통신 라이브러리입니다. CDN과 NPM 설치 방식 모두 지원하며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양합니다. script 코드를 입력하고 라이브러리를 설치합니다. npm install axios axios의 기본구조는 아래와 같습니다. methods: { fetchData: function() { axios.get(..

Framework/Vue.js 2022.07.25

[Vue.js] Vue.js 기본 - Component 통신

Component 통신 방식 - 부모 / 자식 레벨 Vue Component는 각각 고유한 데이터 유효 범위를 갖습니다. 따라서 Component 간에 데이터를 주고 받기 위해서는 아래와 같은 규칙을 따라야 합니다. 자식 Component → 부모 Component : Event 발생 부모 Component → 자식 Component : Props 전달 즉, 자식 Component는 부모 Component에게 Event를 발생시켜 올려줌으로써, 부모 Component는 자식 Component에게 props 속성을 통해 데이터를 전달하게 됩니다. Props 부모 Component → 자식 Component Props를 이용한 예제는 아래와 같습니다. 위의 예제를 쪼개어 본다면 아래와 같습니다. 1. 부모 ..

Framework/Vue.js 2022.07.24
반응형