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..
Provide와 Inject🗿 Prop Drillingprop drilling이란 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 props 를 사용하는데,규모가 큰 컴포넌트 트리가 있다면 자손 컴포넌트와 연관된 모든 자식들에게 props를 전달해야하는 것을 말함.(드릴로 뚫고 내려가는 것 같아서) 이러한 문제를 해결하는게 vue3의 provide와 injectprovide와 inject를 사용하면 부모의 데이터는 계층 구조 상관없이 전달 가능하다. 🗿 Provideexport default { setup() { provide('message', 'hello!'); },};상위 컴포넌트의 setup 함수 내부에서 provide 함수를 ..