watch와 watchEffect의 차이
watch활용 시기: 특정 데이터가 변경되었을 때 실행.데이터 비교: 새로운 데이터와 이전 데이터를 가져옴 (lazy).활용 상황:특정 반응 속성을 관찰하거나, 이전 값에 관심이 있는 경우 사용.함수 또는 하나 이상의 반응 속성을 감시할 수 있음.실행 조건: react
현재화면이 브라우저인지 모바일인지 알려주는 컴포저블 ( CompositionAPI이용 )
(위의 화면은 composition api와 과거 option api의 비교)현재화면이 브라우저인지 모바일인지 변수로 관리VueJS의 Composition API를 사용해서 Composable을 만든 예제export function useWindowSize() {
Nuxt Icon / Iconify 사용법
1. 해당 링크(NuxtIcon)에서 nuxt3의 nuxtIcon 모듈을 설치한다2. 아래 처럼 사용 가능하다 ( npm의 패키지에 해당 아이콘셋이 설치되어있어야함 )사용 예 <Icon name="uil:github" />아이콘셋 설치 예 "@iconify-json
Vue 3 Composition API의 ref함수
Vue 3 Composition API의 ref함수의 정의(타입스크립트) 해석ref()함수의 정의는 아래와 같다function ref<T>(value: T): Ref<UnwrapRef<T>> interface Ref<T> { value: T }해석하자면 아
Slot에 대해서
Vue.js에서 슬롯(Slot)은 컴포넌트 간에 콘텐츠를 전달하고 재사용 가능한 컴포넌트를 만들 때 사용하는 중요한 개념입니다.슬롯은 컴포넌트 내에서 콘텐츠를 삽입하거나 덮어쓸 수 있게 해주며, 컴포넌트의 유연성을 높이는 데 도움을 줍니다.Vue.js에서는 기본 슬롯(
Computed의 장점에 대해서
Computed를 사용하는 장점1.가독성2.캐싱아래의 예제에서 msgFun는 세번 실행되며 msgCaching는 한번 실행된후 캐싱된 값이 3번출력된다즉 msgFun는 3번 msgCaching는 1번이다 ( 캐싱 )그리고 this.msg.split('').reverse
VueJS의 로컬서버가 움직이는 원리
1.vue cli 라이브러리가 webpack-dev-server라는 라이브러리를 의존하고있다2.webpack-dev-server는 모듈 번들링후 배포 내용을 메모리에 저장 후 즉시 로컬서버에 반영하는 라이브러리다3.webpack-dev-server의 라이브러리로 내부