Vue 애플리케이션이 커지면 여러 컴포넌트가 같은 데이터를 함께 사용해야 하는 경우가 많아진다.예를 들어 다음과 같은 데이터가 있다.로그인 사용자 정보장바구니알림 개수다크모드 설정날씨 단위이런 데이터를 부모에서 자식으로 계속 Props로 전달하면 구조가 복잡해질 수 있다.App ↓Layout ↓Header ↓Menu ↓UserInfo중간 컴포넌트가 데이터를 사용하지 않더라도 계속 전달해야 하는 문제가 생긴다.이럴 때 사용하는 것이 Pinia다.Pinia는 Vue 애플리케이션에서 여러 컴포넌트가 함께 사용하는 데이터를 중앙에서 관리하기 위한 전역 상태 관리 라이브러리다.Pinia란?Pinia는 여러 컴포넌트가 같은 상태를 공유할 수 있도록 Store라는 중앙 저장소를 제공한다.구조는 다음과 같다.Compo..

Props / Emits 는 이전 글 참조 [JavaScript][Vue.js] Props와 Emits 정리 - 부모·자식 컴포넌트 통신Vue는 화면을 여러 개의 컴포넌트로 나누어 구성한다.예를 들어 하나의 페이지가 다음과 같이 구성되어 있다고 해보자.ParentComponent ├─ HeaderComponent ├─ SearchBar ├─ WeatherCard └─ FooterComponentdaniellee09.tistory.com Vue에서는 부모와 자식 컴포넌트 사이의 기본적인 데이터 전달 방식으로 Props와 Emits를 사용한다.하지만 컴포넌트 계층이 깊어지면 단순한 Props 전달만으로는 구조가 복잡해질 수 있다. 예를 들어 다음과 같은 구조가 있다고 해보자.GrandParent ↓Par..

Vue는 화면을 여러 개의 컴포넌트로 나누어 구성한다.예를 들어 하나의 페이지가 다음과 같이 구성되어 있다고 해보자.ParentComponent ├─ HeaderComponent ├─ SearchBar ├─ WeatherCard └─ FooterComponent각 컴포넌트는 서로 독립적으로 동작하지만, 실제 애플리케이션에서는 부모와 자식이 데이터를 주고받아야 한다.Vue에서는 이때 기본적으로 다음 두 가지 방식을 사용한다.Props→ 부모 → 자식Emits→ 자식 → 부모즉,데이터는 부모에서 자식으로 내려가고, 이벤트는 자식에서 부모로 올라간다.이 구조를 보통 Props Down, Events Up이라고 한다.Props란?Props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법..

Vue의 컴포넌트는 단순히 화면에 나타나기만 하는 것이 아니라, 생성되고 화면에 붙고, 데이터 변화에 따라 갱신되고, 마지막에는 화면에서 제거되는 과정을 거친다. 이 전체 과정을 Component Lifecycle이라고 한다.쉽게 정리하면 다음과 같다.생성 ↓마운트 ↓업데이트 ↓언마운트그리고 Vue는 각 단계마다 특정 시점에 원하는 코드를 실행할 수 있도록 Lifecycle Hook을 제공한다.대표적으로 다음과 같은 함수들이 있다.onMounted()onUpdated()onUnmounted()즉, Lifecycle은 컴포넌트의 전체 생명주기이고, Lifecycle Hook은 그 생명주기의 특정 시점에 실행되는 함수라고 보면 된다.Component Lifecycle이란?컴포넌트는 화면에 등장하기 전부터 내..

Vue 3에서 컴포넌트의 로직을 작성하는 대표적인 방식이 Composition API다.Composition API는 컴포넌트에서 사용하는 데이터, 함수, 계산된 값, 감시 로직 등을 하나의 기능 단위로 묶어서 작성하는 방식이다.Vue 2에서는 주로 Options API를 사용했지만, Vue 3에서는 Composition API와 현재 값: {{ count }} 2배 값: {{ doubleCount }} 증가 감소 카운터와 관련된 상태와 함수가 하나의 영역에 모여 있다.[카운터 기능]countincrement()decrement()doubleCount이처럼 기능과 관련된 로직을 하나의 묶음으로 구성하는 것이 Composition API의 핵심이다.기존 Options API와 ..

Vue에서 을 작성하다 보면 일반 HTML에서는 볼 수 없었던 속성들이 등장한다.v-htmlv-bindv-ifv-showv-for이처럼 v-로 시작하는 Vue 전용 특수 속성을 Directive(디렉티브)라고 한다.Directive를 사용하면 HTML 태그와 JavaScript 데이터를 연결하여 화면의 내용, 속성, 스타일, 조건, 반복 등을 동적으로 제어할 수 있다. Vue의 Directive에서 특히 중요한 점은 다음과 같은 코드에서"imageUrl"이 단순한 문자열이 아니라 JavaScript 표현식이 실행되는 영역이라는 것이다.즉 Vue의 Template은 단순한 HTML이 아니라 JavaScript 데이터와 연결되어 동적으로 변경되는 화면이라고 볼 수 있다.데이터를 화면에 출력하는 방법Vue에서..

Vue가 왜 필요한지, 어떤 방식으로 화면을 관리하는지부터 이해하는 것이 중요하다.이번 글에서는 Vue를 본격적으로 사용하기 전에 알아두면 좋은 기본 개념을 정리한다.1. Vue.js란Vue.js는 사용자 화면을 만들기 위한 JavaScript 프레임워크다. 일반적인 HTML과 JavaScript만으로도 웹 화면을 만들 수 있다.예를 들어 버튼을 누를 때 숫자를 하나 증가시키는 기능을 만든다고 해보자.0증가JavaScript에서는 다음과 같이 DOM을 직접 찾아 수정할 수 있다.let count = 0;const countElement = document.querySelector("#count");const button = document.querySelector("#button");button.addE..

JavaScript를 공부하다 보면 반드시 만나게 되는 개념 중 하나가 비동기 처리(Asynchronous Processing)다.setTimeout, Promise, async/await, Event Loop처럼 여러 개념이 한꺼번에 등장해 어렵게 느껴질 수 있다.하지만 비동기 처리의 핵심은 생각보다 단순하다.시간이 오래 걸리는 작업을 기다리는 동안 프로그램 전체를 멈추지 않고 다른 작업을 수행하는 것이 개념을 중심으로 JavaScript의 비동기 처리 방식이 뭔지 살펴보자.JavaScript의 동기와 비동기먼저 일반적인 JavaScript 코드는 위에서 아래로 순서대로 실행된다.console.log("1");console.log("2");console.log("3");결과는 다음과 같다.123앞의 코..