vue2 watch와 computed의 차이점

vue를 배우기 시작했을 무렵 watch와 computed의 역할에 대해서 감이 잡히지 않았다. watch.. 단어 그대로 감시하고 있다는 점이 더 직관적이라 computed 더 쉽게 사용할 수 있는 걸 watch로만 개발하기도 했다. (졸라 혼남) 아무튼 지금은 어느정도 감이 잡혔지만 명확하게 설명할 수 있지는 않았기에 watch 와 computed의 차이점에 대해 정리할 필요가 있었다. watch와 computed의 차이점 watch와 computed는 둘 다 상태 변화를 감지하고 그에 따른 행동을 수행하는 데 사용되는 옵션이다. 그러나 각각의 목적과 동작 방식에는 몇 가지 차이가 있다. watch watch 옵션은 데이터의 변화를 감지하고, 특정 데이터가 변경될 때 특정 동작을 수행할 수 있게 한다..

• format_list_bulleted Vue
• · 2024. 1. 24.
• textsms

vue2 네비게이션 가드 간단 정리

네비게이션 가드 네비게이션 가드는 주로 탐색을 리디렉션하거나 취소하여 탐색을 막는데 사용된다. 주로 사용자의 권한과 인증 정보를 확인하여 특정 페이지에 접근하지 못하게 할 때 사용한다. 가드 연결 방법은 전역, 경로별, 컴포넌트 내부가 있다. 1. 전역으로 연결하기 비포 가드 beforeEach() : 라우터 인스턴스의 beforeEach() 메서드에 콜백함수를 전달하여, 비포 가드를 전역으로 등록할 수 있다. 탐색이 트리거 될 때마다 등록 순서대로 비포 가드가 호출된다. 가드는 비동기식으로 해결될 수 있고 탐색은 모든 훅이 해결되기 전까지 대기중으로 간주한다. const router = createRouter({ ... }) router.beforeEach((to, from, next) => { // ..

• format_list_bulleted Vue
• · 2024. 1. 21.
• textsms

컴포넌트 디자인 패턴 (common, slot, controlled, renderless) 간단 정리

아웅 정리할수록 복잡하고 더 헷갈리네ㅎ 이런 것들 언젠가 편하게 사용하겠지?ㅜ 아무튼 common, slot, controlled, renderless 디자인 패턴에 대해 알아보자 컴포넌트 디자인 패턴 Common 간단하고 기본적인 컴포넌트 등록과 컴포넌트 통신 AppContent, Appheader 컴포넌트를 불러옴 이벤트, props 활용 before after 버튼을 클릭하면 내용이 바뀌도록 구현해보자 // CommonView.vue import한 AppHeader 컴포넌트와 AppContent 컴포넌트 간 데이터를 이벤트, props로 주고받고 있다. // AppHeader.vue {{ name }} AppHeader에서는 userName을 props로 받아서 그대로 표시 // AppContent..

• format_list_bulleted Vue
• · 2024. 1. 12.
• textsms

mixin 간단 정리

mixin vue 컴포넌트에 비슷한 기능들을 재사용할 수 있는 방법 재사용 로직은 data, methods, created 등과 같은 컴포넌트 옵션 mix 형식 // mixin 정의 var mixins = { // 컴포넌트 옵션 (data, methods, created 등) }; // mixin 주입 new Vue({ mixins: [mixins] }) 만들면서 이해해보자 /mixin1 링크 이동 시 A 페이지, /mixin2 링크 이동 시 B 페이지를 띄우며 각 페이지의 데이터를 mixin 을 통해 불러오자 일단, route 연결 // routes/index.js export const router = new VueRouter({ routes: [ { path: '/mixin1', name: 'mix..

• format_list_bulleted Vue
• · 2024. 1. 9.
• textsms

하이오더컴포넌트(HOC) 간단 정리

Higher Order Component (HOC) 함수형 기반 재사용 방식이다. 컴포넌트 로직을 재사용할 수 있다. 컴포넌트를 인자로 받고 컴포넌트를 반환하는 컴포넌트이다. 예를 들어 ... /hoc1 링크로 이동하면 A페이지, /hoc2 링크로 이동하면 B페이지가 나오는 구조일 때 A, B페이지가 거의 똑같다면 각각 view를 만들기보단 컴포넌트의 컴포넌트를 만들고 용도에 맞게 컴포넌트를 return 하는 식으로 만들어보자. 즉, 한 컴포넌트 로직을 그대로 재사용하기! 코드를 보면서 이해해보자 // routes/index.js import Vue from 'vue'; import VueRouter from 'vue-router' import createView from '../views/HocView..

• format_list_bulleted Vue
• · 2024. 1. 3.
• textsms