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 함수를 ..
Non-Prop 속성 (fallthrough 속성) props 또는 event 에 명시적으로 선언되지 않은 속성 또는 이벤트를 말한다.예를 들면 class, style, id가 있다. 😄 속성 상속, 병합컴포넌트가 단일 루트 요소로 구성되어 있으면 non-prop 속성은 Root 요소의 속성에 자동으로 추가된다.즉, 자식 컴포넌트는 부모 컴포넌트의 요소를 상속받는다. 부모 컴포넌트에서 class와 style을 자식 컴포넌트 속성에 추가했을때자식 컴포넌트에 이미 class와 style 속성이 정의되어 있다면 병합한다. click me자식 컴포넌트에서 btn 클래스의 button 생성 부모 컴포넌트에서 large 클래스의 자식 컴포넌트를 가져왔다. click me렌더링된 최종 DOM자식 컴포넌트에 작성한..
propsprops는 컴포넌트에 등록할 수 있는 사용자 정의 속성이다.사용자 정의 속성을 선언하면 이 컴포넌트를 사용하는 부모 컴포넌트에서 데이터(속성)를 전달할 수 있다. 😆 props 선언선언 방법1. 문자열 배열 선언props: ['title'] 컴포넌트에 props 옵션을 사용하여 선언 선언 방법2. 객체 문법 선언props: {title: String, likes: Number} 객체 문법을 사용하여 속성 타입과 함께 선언 모든 기본 생성자 또는 사용자 정의 타입을 정의할 수 있다. 😆 props 속성default : 기본값 선언, 속성값이 비어있거나 undefined를 전달 받는 경우 기본값 사용.requied : 속성이 필수 값이라면 true로 설정validator : 유효성 검사,..