테이로그
close
프로필 배경
프로필 로고

테이로그

  • 전체보기
    • 👨‍💻 소개
    • 🧠 저장
      • HTML&CSS
      • Javascript
      • Typescript
      • Vue
      • React
      • Git
      • Http
      • etc.
    • 📃 기록
      • 개발자 일지
      • 프로젝트
      • 강의
      • 일상
    • 기타
    • 👨‍🎨 디자인
  • 홈
  • 소개
  • 일지
Vue의 Lifecycle Hooks

Vue의 Lifecycle Hooks

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..

  • format_list_bulleted 🧠 저장/Vue
  • · 2024. 5. 23.
  • textsms

Vue에서 Slot을 통한 컴포넌트 재사용

Slots🐔 Slots 기본적인 사용 방법slot은 컴포넌트의 재사용성을 높여준다.slot을 통해 하위 컴포넌트를 확장하거나 재정의할 수 있다. 구독하기  slot을 통해 특정 컴포넌트에 콘텐츠를 전달할 수 있다.콘텐츠를 위치시키고 싶은 곳에 slot 배치하고, 사용하는 쪽에서 콘텐츠를 넣으면 된다. 구독하기최종적으로 화면에는 이렇게 구성이 된다.  🐔 Slot의 Fallback Content 기능 기본 slot은 Fallback Content를 제공하는데 상위 컴포넌트에서 콘텐츠가 적용되지 않을때에 대한 default 콘텐츠를 말한다.사용하는 방식은 그냥 slot에 작성하면 된다  🐔 Slot의 Named Slotsslot 요소에 이름을 부여하여 여러개의 ..

  • format_list_bulleted 🧠 저장/Vue
  • · 2024. 5. 20.
  • textsms

a 태그에 rel="noopener noreferrer" 속성을 추가하는 이유

noopener & noreferrer 속성 추가하는 이유✔️ a 태그href 속성을 통해 다른 페이지로 연결할 수 있는 하이퍼링크를 만든다.그냥 사용할 경우 target이 _self (기본값)라서 url을 현재 브라우징에 표시한다.하지만 target="_blank" 로 지정할 경우 새로운 브라우저(새 탭)에 표시한다.// a태그 활용 (target X)그냥 열기// a태그 활용2 (target은 _blank)새 창으로 열기 이렇게 새로운 브라우저에 표시하게 되었지만rel 지정 없이 사용하게 되면 웹사이트가 window.opener API 악용 공격에 취약해진다. 새로 열린 페이지는 원본 페이지를 참조하고 있기 때문에 window.opener 에 의해 부분적으로 액세스 하여 피싱 페이지로 변경될 수 있다..

  • format_list_bulleted 🧠 저장/HTML&CSS
  • · 2024. 5. 17.
  • textsms
Vue의 Watch와 WatchEffect 로 반응형 상태 감지 | 최초 즉시 실행 방법

Vue의 Watch와 WatchEffect 로 반응형 상태 감지 | 최초 즉시 실행 방법

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..

  • format_list_bulleted 🧠 저장/Vue
  • · 2024. 5. 14.
  • textsms
Vue3 Provide와 Inject를 활용하여 Prop Drilling를 해결하기

Vue3 Provide와 Inject를 활용하여 Prop Drilling를 해결하기

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

  • format_list_bulleted 🧠 저장/Vue
  • · 2024. 5. 11.
  • textsms
  • navigate_before
  • 1
  • ···
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • ···
  • 30
  • navigate_next
전체 카테고리
  • 전체보기
    • 👨‍💻 소개
    • 🧠 저장
      • HTML&CSS
      • Javascript
      • Typescript
      • Vue
      • React
      • Git
      • Http
      • etc.
    • 📃 기록
      • 개발자 일지
      • 프로젝트
      • 강의
      • 일상
    • 기타
    • 👨‍🎨 디자인
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바