computed와 methods의 차이

Vue.js에서 자주 쓰이는 computed와 methods를 들어본 적이 있을겁니다.가끔 이 둘 중에서 무엇을 사용해야 할 지 헷갈리는 경우가 있더군요.그래서 정확하게 알고 사용하기 위해 이 둘의 차이가 무엇인 지 알아봅시다. 1. computed (계산 속성)computed는 특정 값이 다른 데이터에 의존해 계산될 때, 사용됩니다.종속된 데이터가 변경될 때에만 계산이 되는 거에요.Vue는 computed 속성을 캐시하기 때문에, 관련된 데이터가 변경되지 않는 한 계산된 값을 재사용해요. 이를 통해 Vue 컴포넌트의 상태에 따라 동적으로 변하는 값을 쉽게 관리하여 성능을 최적화할 수 있어요. 예를 들어봅시다.export default { data() { return { firstName..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 11. 8.
• textsms

router-link와 router-view

Vue.js에도 라우터 기능이 존재합니다. 라우터 기능을 담당하는 컴포넌트는 바로 router-link와 router-view입니다.이 둘은 Vue.js에서 라우터를 사용하여, SPA(Single Page Application)를 구현할 때 사용해요.※ SPA(Single Page Application) : 한 페이지 내에서 URL과 데이터만 변경하며, 화면을 동적으로 갱신하는 웹 애플리케이션 하지만, 이 컴포넌트들을 사용하려면, Vue Router를 설치해야 합니다.(저는 npm을 사용했어요.)npm install vue-router 바로 자세히 알아봅시다. 1. router-linkrouter-link는 Vue Router와 함께 동작하여, 페이지간의 탐색을 쉽게 만들어 줘요.이는 태그 같이 사용자가..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 11. 7.
• textsms

v-if와 v-show의 차이

Vue.js를 사용하면, 디렉티브를 사용한 경험이 있으실 거에요.요소를 조건에 따라 표시하거나 숨기는 디렉티브인 v-if와 v-show는 둘 다 비슷한 기능이라고 생각될 수 있겠지만, 렌더링 방식에서 차이가 있습니다. 그 차이점에 대해 알아봅시다. 1. v-ifv-if는 조건이 true일 때만 해당 요소를 DOM에 추가하고, false일 때는 DOM에서 제거해요.사용자 인증 상태에 따라 요소를 렌더링하는 등 자주 변경되지 않는 조건에 적합합니다.조건이 자주 변경될 경우, 성능이 떨어질 수 있어요. 요소가 추가되거나 제거될 때마다 렌더링 과정이 필요하기 때문입니다. 예를 들어 봅시다. 메시지 전환 보이는 메시지 숨겨진 메시지 isVisible: {{ isVisible }} 위 코..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 11. 5.
• textsms

Event Bus

Vue에서 부모 자식 관계가 아닌 아예 동떨어져 있는 컴포넌트 끼리 통신을 하기 위해선 어떻게 해야 할까요?그럴 때 사용하는 것이 Event Bus입니다! 이것이 무엇인지 바로 알아봅시다. 1. Event BusEvent Bus란? 컴포넌트 간의 통신을 쉽게 하기 위해 사용되는 패턴이에요.이는 중앙 집중식의 이벤트 관리 시스템으로, 다양한 컴포넌트가 서로 데이터를 주고받거나 이벤트를 전송할 수 있도록 해요.그렇기에 부모-자식 관계가 없는 컴포넌트 사이에서 데이터를 전달 or 상호작용을 할 때 유용합니다. 2. Event Bus 생성Event Bus를 구현하기 위해 새 Vue 인스턴스를 생성합니다.src/event-bus.jsimport Vue from 'vue';export const EventBus =..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 10. 29.
• textsms

scrollBehavior

홈페이지에서 페이지 이동 간에 스크롤을 특정 위치에 놓고 싶을 경우, 사용할 수 있는 방법이 있습니다.그것은 바로 scrollBehavior인데요. 이것이 무엇이고, 어떻게 사용하는 지 알아봅시다! 1. scrollBehaivorscrollBehaivor은 페이지 간 스크롤 위치를 제어하는 데 사용되는 옵션입니다. 이를 통해 사용자가 페이지를 이동할 때, 스크롤 동작을 커스터마이즈 할 수 있어요. 2. 기본 사용법사용 방법은 다음과 같아요. (저는 Vue를 사용했습니다.)import Vue from 'vue';import Router from 'vue-router';import Home from './components/Home.vue';import About from './components/About..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 10. 22.
• textsms

Vue.js의 생명주기(Lifecycle)

Vue.js의 생명주기에 대해 자세히 알아봅시다!  1. Vue.js의 생명주기(Lifecycle)Vue.js의 생명주기는 컴포넌트가 생성되고 소멸될 때까지 발생하는 일련의 단계를 의미해요.Vue 컴포넌트는 각 단계마다 특정한 생명주기 훅(Lifecycle hook)을 호출할 수 있으며, 이를 통해 특정 단계에서 로직을 실행하거나 상태를 관리할 수 있어요.  2. Vue.js 생명주기 단계생명주기 단계는 다음 그림과 같이 순서대로 나뉘어 있습니다. 그러면 한 단계씩 알아봅시다. 2-1. beforeCreate (생성 전)beforeCreate는 Vue 인스턴스가 초기화되기 전 상태입니다.아직 데이터 or 메서드 등이 정의되지 않았기 때문에, 이 단계에서 Vue 인스턴스에 접근할 수 없어요.즉, 컴포넌트의..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 10. 16.
• textsms