happynuri - 행복한 세상

Vue3에서는 store를 사용 할 수 있다.  devTool에서 보면 아래와 같이 로컬 저장소와 세션 저장소가 존재 한다. 로컬 저장소는 키-값 으로 저장된 값을 재 방문시 사용하는 것이 가능 하고  세션 저장소는 브라우저가 닫히면 삭제 되는 것이다.   따라서 저장소를 사용하게 된다면 세션 저장소를 사용 하게 될것이다. 중요한 점은 세션 저장소가 새탭을 열었을때나 SamSite Lax값에 따라서 다른 도메인으로 인식하는 사이트간에는 공유 되지 않는다는것   아래는 도메인이 같으나 같은 세션 저장소를 사용 할 수 없다.a.happynuri.com b.happynuri.com   store를 등록할때는 src 하위에 store 폴더를 추가 하고 아래와 같은 구조를 추가 한다  import VueCooki..

VUE3 2024. 4. 26. 18:29

EventBus는 소규모 프로젝트에서 사용하기 적합하고, 대규모 프로젝트에서는 vuex를 사용한다는데  오늘은 EventBus를 알아 보았다. 컴포넌트A와 컴포넌트B 가 부모 자식 간일때 props를 전달하거나 emit를 이용하는 것 정도는 할 수 있는데  EventBus가 무엇인지 모르는 사람은 이 글이 도움이 될것이다.  props 드릴링이라고 할머니.vue , 엄마.vue, 자식.vue 가 있을 경우에는  할머니.vus에서 자식.vue로 값을 보내거나 할 경우는 필요 없는 props 를 엄마.vue 가 가지고 있어야 하는 불편한 상황을  props 드릴링이라고 하고, 그 상황을 피하기 위해서  형제 간의 vue나 조상 vue에서 한참 밑의 vue 간에 이벤트 통신을 위해서 EventBus를 사용한다..

VUE3 2024. 4. 26. 17:42

Vue2에서 사용하던 $on $off $once를 Vue3에서는 사용하지 못한다 EventBus는  component 간에 이벤트를 통신 할때 사용한다. 기본적으로 상위 컴포넌트를 거쳐야만 하위 컴포넌트에 이벤트를 전달 할수 있는 구조 인데. (props 트롤링) props를 거치지 않고 사용할 수 있는 방법이 EventBus이다. 형제 컴포넌트 간에 통신이 가능 하지만 전역으로 등록 하는 것이다. vuex 라는 것이 대규모 프로젝트에서 적합 하고 EventBus는 적합하지 않다고 하지만  우선 배워본다 EventBus는 게시 / 구독 패턴을 가진다. 게시자가 이벤트를 게시 할 뿐 구독자가 어떤 것인지 파악하지 않고 구독자가 필요시 사용하여 서비스를 받도록 하는 패턴이다. (비동기 이고 단방향 통신이 될..

VUE3 2024. 4. 26. 15:41

provide(제공)/ inject(주입) vue3에서는 props로 부모와 자식간의 연관을 지어 줘야 하고, 만약 할머니 ,나, 손자 의 3대의 관계에서  할머니의 값을 손자에게 넘기려 할때 나는 불필요한 props를 가지고 있게 된다 이런것을 props 드릴링이라고 하고, props 드릴링을 피하기 위해서 provide와 inject를 사용 할 수 있다. Provide(제공) / Inject(주입) | Vue.js (vuejs.org)  할머니template>  div>    child>child>  div>template>script setup lang="ts">import {ref, reactive, onMounted , provide , inject} from 'vue';import child ..

VUE3 2024. 4. 26. 11:20

라우터에서 아래 처럼 등록을 하면 { path: '/nickname/lock/view/:id', name: 'nickname.lock.view', component: () => import('@/pages/nickname/popup/lockHistoryView.vue'), meta: { tenantSelector: true } } 부모창에서 아래 처럼 param을 보내면 router.push({ name: 'nickname.lock.view', params: { id: '11' } }) 이동된 화면에서 아래 처럼 params로 받아서 사용할 수 있음 이것은 post 방식의 param 전송과 아무 관련이 없음 const { id } = route.params 라우터에 아래 처럼 등록 할때 get 방식으로 ..

VUE3 2024. 4. 12. 17:51

vue는 javascipt framework 이다. 사용은 아래와 같이 참조 하여 사용 할 수 있음0 뷰 개발자 도구 google에서 vue.js devtools 검색 후 사용하도록 설정/설치 함 Vue.js devtools - Chrome 웹 스토어 (google.com) Vue.js devtools Browser DevTools extension for debugging Vue.js applications. chrome.google.com 확장프로그램 관리에서 파일 URL에 대한 엑세스 허용을 활성화 하면 vue가 색이 회색에서 초록으로 변경됨 브라우저를 끄고 켠 후 f12 누르면 개발자 도구의 >> 메뉴에서 vue 메뉴가 생겨 있습니다.

VUE3 2023. 11. 13. 14:09