Template refs☁ refs를 사용하는 이유vue의 선언적 렌더링 모델 대부분은 직접적인 DOM의 작업을 대신 수행한다. 하지만 때론 기본 DOM 요소에 직접 접근해야 하는 경우, ref 속성을 사용해서 쉽게 접근할 수 있다. 특수 속성 ref에 의해 마운트된 DOM 요소 또는 자식 컴포넌트에 대한 참조를 얻을 수 있다. ☁ refs 접근하기composition API로 참조를 얻으려면 동일한 이름의 참조를 선언해야 한다. 또한 컴포넌트가 마운트된 후에 접근이 가능하다.template 안에서 input으로 refs 참조에 접근하려는 경우 렌더링 되기 전에는 참조가 null이다.template의 내장 객체 $refs로 refs 참조에 접근할 수 있다. {{ item }}..
Lifecycle Hooks🌱 Vue의 Lifecycle라이프 사이클은 Vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 말한다.라이프 사이클 훅은 라이프 사이클 단계에서 사용자가 로직을 추가할 수 있는 단계별 기능이다.라이프 사이클을 잘 알아둬서 낄끼빠빠를 잘하도록 하자 🌱 Options API 와 Composition API 에서의 Lifecycle Hooks Options API Composition API (setup 함수 내부) X setup beforeCreate 필요없음 (setup 함수 내에서 사용하면 된다) created 필요없음 (setup 함수 내에서 사용하면 된다) beforeMounted onBeforeMount mounted onMoun..
Slots🐔 Slots 기본적인 사용 방법slot은 컴포넌트의 재사용성을 높여준다.slot을 통해 하위 컴포넌트를 확장하거나 재정의할 수 있다. 구독하기 slot을 통해 특정 컴포넌트에 콘텐츠를 전달할 수 있다.콘텐츠를 위치시키고 싶은 곳에 slot 배치하고, 사용하는 쪽에서 콘텐츠를 넣으면 된다. 구독하기최종적으로 화면에는 이렇게 구성이 된다. 🐔 Slot의 Fallback Content 기능 기본 slot은 Fallback Content를 제공하는데 상위 컴포넌트에서 콘텐츠가 적용되지 않을때에 대한 default 콘텐츠를 말한다.사용하는 방식은 그냥 slot에 작성하면 된다 🐔 Slot의 Named Slotsslot 요소에 이름을 부여하여 여러개의 ..
noopener & noreferrer 속성 추가하는 이유✔️ a 태그href 속성을 통해 다른 페이지로 연결할 수 있는 하이퍼링크를 만든다.그냥 사용할 경우 target이 _self (기본값)라서 url을 현재 브라우징에 표시한다.하지만 target="_blank" 로 지정할 경우 새로운 브라우저(새 탭)에 표시한다.// a태그 활용 (target X)그냥 열기// a태그 활용2 (target은 _blank)새 창으로 열기 이렇게 새로운 브라우저에 표시하게 되었지만rel 지정 없이 사용하게 되면 웹사이트가 window.opener API 악용 공격에 취약해진다. 새로 열린 페이지는 원본 페이지를 참조하고 있기 때문에 window.opener 에 의해 부분적으로 액세스 하여 피싱 페이지로 변경될 수 있다..
Watch와 WatchEffect로 감시하자반응형 상태 변경을 감지하여 다른 작업을 수행해야 하는 경우 활용한다. 👀 watch 함수const message = ref('Hello World');// message를 감시한다.watch(message, (newValue, oldValue) => { console.log('newValue: ', newValue); console.log('oldValue: ', oldValue);});첫번째 매개변수는 newVaule, 두번째 매개변수는 oldValue가 온다. newValue는 다양한 타입이 될 수 있다. (ref, reactive, computed, getter 함수, array 등) 👀 모든 중첩된 속성을 감지하는 watch 함수 co..