SeouliteLab

Spring Boot 애플리케이션을 실행할 때 특정한 작업을 수행하고자 할 때, CommandLineRunner 인터페이스를 사용할 수 있습니다. CommandLineRunner는 Spring Boot 애플리케이션이 실행되고 나서 특정한 기능을 실행하는 메서드를 제공합니다.예제: CommandLineRunner를 사용하여 애플리케이션 초기화import org.springframework.boot.CommandLineRunner;import org.springframework.stereotype.Component;@Componentpublic class MyCommandLineRunner implements CommandLineRunner { @Override public void run(Str..

Counter: {{ counter }} Increment Vue.js에서는 데이터의 변경을 감시하고 특정 동작을 수행하는 데 사용되는 watch 속성을 제공합니다. 이를 통해 데이터의 변화를 감지하여 필요한 작업을 수행할 수 있습니다.위 예제는 watch 속성을 사용하여 counter 데이터의 변경을 감시하는 Vue 컴포넌트를 보여줍니다.counter 데이터는 현재 카운터의 값을 저장합니다.watch 속성에는 counter를 감시하는 함수가 정의되어 있습니다. 이 함수는 counter의 값이 변경될 때마다 호출됩니다.변경된 값과 이전 값이 인자로 전달되며, 이를 활용하여 변경된 내용을 콘솔에 출력합니다.버튼을 클릭할 때마다 increment 메소드가 호출되어 counter 값을 증가시킵니다.wa..

{{ message }} Vue.js에서는 서버 사이드 렌더링 (SSR)을 지원하기 위해 onServerPrefetch() 메소드를 제공합니다. 이 메소드는 서버에서 Vue 컴포넌트를 렌더링할 때 호출되는 훅으로, 서버에서 미리 데이터를 가져와 컴포넌트를 렌더링하기 전에 데이터를 준비할 수 있습니다.위 예제는 onServerPrefetch() 메소드를 사용하여 서버 사이드 렌더링 데이터를 획득하는 Vue 컴포넌트를 보여줍니다.onServerPrefetch() 메소드 내부에서는 서버 사이드 렌더링에서 호출되는 비동기 함수를 정의합니다.이 예제에서는 fetchData() 메소드를 사용하여 서버 사이드 렌더링 데이터를 가져옵니다.fetchData() 메소드는 비동기로 데이터를 가져오는 역할을 합니다. 예를 ..

{{ message }} Vue.js 라우터에서 사용되는 onDeactivated() 메소드는 페이지가 비활성화될 때 호출됩니다. 이 메소드는 Vue 컴포넌트의 라이프사이클 훅 중 하나로, 페이지가 활성화에서 비활성화로 전환될 때 수행해야 할 작업을 정의하는 데 사용됩니다.위 예제는 onDeactivated() 메소드를 사용하여 페이지가 비활성화될 때 메시지를 업데이트하는 Vue 컴포넌트를 보여줍니다.deactivated() 메소드 내부에서는 페이지가 비활성화될 때 호출되는 함수를 정의합니다.이 예제에서는 message 데이터를 업데이트하여 페이지가 비활성화되었음을 사용자에게 알립니다.페이지가 비활성화될 때 필요한 작업을 수행할 수 있습니다. 예를 들어, 타이머나 비동기 작업을 정리하거나 컴포넌트의 상..

{{ message }} Vue.js 라우터에서 사용되는 onActivated() 메소드는 페이지가 활성화될 때 호출됩니다. 이 메소드는 Vue 컴포넌트의 라이프사이클 훅 중 하나로, 페이지가 활성화될 때 수행해야 할 작업을 정의하는 데 사용됩니다.위 예제는 onActivated() 메소드를 사용하여 페이지가 활성화될 때 메시지를 업데이트하는 Vue 컴포넌트를 보여줍니다.activated() 메소드 내부에서는 페이지가 활성화될 때 호출되는 함수를 정의합니다.이 예제에서는 message 데이터를 업데이트하여 페이지가 활성화되었음을 사용자에게 알립니다.페이지가 활성화될 때 데이터를 가져오거나 초기화 작업을 수행하는 등의 작업을 수행할 수 있습니다.onActivated() 메소드를 활용하면 페이지가 활성화될..

Vue.js에서는 컴포넌트의 렌더링 트리거를 추적하기 위해 onRenderTriggered 훅을 제공합니다. 이 훅은 컴포넌트의 렌더링이 트리거될 때 호출되는 함수를 등록할 수 있습니다. 주로 렌더링의 원인을 파악하고 성능 문제를 해결하는 데 사용됩니다.아래는 onRenderTriggered 훅을 사용한 Vue 컴포넌트의 예제입니다. {{ message }} 메시지 업데이트 예제 설명위 예제는 "메시지 업데이트" 버튼을 클릭하여 메시지를 업데이트하는 Vue 컴포넌트입니다.message 변수는 컴포넌트에서 사용될 메시지를 담고 있습니다.updateMessage 메소드는 버튼을 클릭하여 새로운 메시지로 업데이트합니다.onRenderTriggered 훅은 렌더링 트리거가 발생할 때 호출되는 함..

Vue.js에서는 컴포넌트의 상태 변화를 추적하기 위해 onRenderTracked 훅을 제공합니다. 이 훅은 컴포넌트의 렌더링 과정에서 추적할 수 있는 상태 변화를 감지하여 작업을 수행할 때 사용됩니다. 주로 특정 데이터나 상태의 변경을 모니터링하고 디버깅할 때 활용됩니다.아래는 onRenderTracked 훅을 사용한 Vue 컴포넌트의 예제입니다. {{ message }} 메시지 업데이트 예제 설명위 예제는 "메시지 업데이트" 버튼을 클릭하여 메시지를 업데이트하는 Vue 컴포넌트입니다.message 변수는 컴포넌트에서 사용될 메시지를 담고 있습니다.updateMessage 메소드는 버튼을 클릭하여 새로운 메시지로 업데이트합니다.onRenderTracked 훅은 렌더링 추적이 시작될 때..

Vue.js에서는 컴포넌트 트리에서 발생한 에러를 캐치하고 처리할 수 있는 onErrorCaptured 훅을 제공합니다. 이 훅은 하위 컴포넌트의 에러를 캐치하여 부모 컴포넌트에서 전역 에러 처리 로직을 적용할 때 유용합니다. 예를 들어, UI에서 에러를 표시하거나 로그를 수집하는 등의 작업을 수행할 수 있습니다.아래는 onErrorCaptured 훅을 사용한 Vue 컴포넌트의 예제입니다. 예제 설명위 예제는 부모 컴포넌트에서 onErrorCaptured 훅을 사용하여 하위 컴포넌트에서 발생한 에러를 캐치하고 처리하는 방법을 보여줍니다.부모 컴포넌트에서 onErrorCaptured 훅을 사용하여 에러가 발생했을 때 실행되는 함수를 정의합니다. 이 함수는 세 개의 인자를 받습니다.error: ..

Vue.js에서는 컴포넌트가 소멸되기 직전에 실행되는 onBeforeUnmount 훅을 제공합니다. 이 훅은 컴포넌트가 DOM에서 제거되기 전에 수행해야 할 작업을 처리할 때 사용됩니다. 주로 이벤트 리스너를 해제하거나 리소스를 정리하는 등의 작업에 활용됩니다.아래는 onBeforeUnmount 훅을 사용한 Vue 컴포넌트의 예제입니다. {{ message }} 컴포넌트 토글 예제 설명위 예제는 "컴포넌트 토글" 버튼을 클릭하여 컴포넌트를 생성하거나 제거하는 Vue 컴포넌트입니다.message 변수는 컴포넌트에서 사용될 메시지를 담고 있습니다.toggleComponent 메소드는 버튼을 클릭하여 컴포넌트를 토글합니다. 컴포넌트가 생성될 때마다 1초마다 콘솔에 메시지를 출력하는 타이머가 시..

Vue.js에서는 컴포넌트가 업데이트되기 전에 실행되는 onBeforeUpdate 훅을 제공합니다. 이 훅은 컴포넌트가 업데이트되기 전에 수행해야 할 작업을 처리할 때 사용됩니다. 주로 이전 상태와 새로운 상태를 비교하거나, 업데이트 전에 데이터를 가공하거나 유효성을 검사하는 등의 작업에 활용됩니다.아래는 onBeforeUpdate 훅을 사용한 Vue 컴포넌트의 예제입니다. {{ message }} 메시지 업데이트 예제 설명위 예제는 "메시지 업데이트" 버튼을 클릭하여 메시지를 업데이트하는 Vue 컴포넌트입니다.message 변수는 컴포넌트에서 사용될 메시지를 담고 있습니다.updateMessage 메소드는 버튼을 클릭할 때마다 counter를 증가시키고, 이를 이용하여 새로운 메시지를 ..