Front-end 개발

Vue로 컴포넌트를 만들다 보면, 부모에서 내려준 props 값이 변경되지 않거나 자식 컴포넌트에서 반영되지 않는 문제를 자주 만나게 됩니다. 이번 글에서는 그 원인과 해결책을 정리합니다.1. props는 단방향 데이터 흐름Vue의 **props는 단방향(One-way)**입니다.부모 → 자식으로만 데이터가 전달자식이 props를 직접 수정하면 Vue 경고 발생즉, props는 “읽기 전용” 속성으로 생각해야 합니다. 부모 값 변경 자식에서 받은 값: {{ count }}✅ 부모의 parentCount가 변경되면, 자식의 count도 자동 반영됩니다.2. 반영되지 않는 흔한 원인(1) 객체/배열을 직접 변경이름 변경👉 Vue 3의 **reactivity 시스템(Proxy 기반)**에서는 객체 속..

📌 제목Vue 3 Composition API와 watchEffect 심화 사용법 — 반응형 데이터 추적과 성능 최적화📝 본문Vue 3의 Composition API는 기존 Options API보다 더 유연하고 재사용 가능한 로직 구성이 가능합니다.특히 watchEffect를 활용하면 반응형 데이터를 자동으로 추적하고, UI 업데이트를 효율적으로 처리할 수 있습니다.이번 글에서는 watchEffect의 기본 사용법부터 심화 패턴과 성능 최적화까지 자세히 설명합니다.1️⃣ Composition API와 반응형 데이터ref: 단일 원시 값 반응형reactive: 객체, 배열 등 복합 구조 반응형computed: 종속성 기반 계산값watch / watchEffect: 데이터 변경 추적import { ref..

📄 본문Vue 3가 출시되면서 가장 큰 변화 중 하나는 Composition API의 도입입니다. 기존 Options API와는 구조와 작성 방식이 많이 달라져, 처음 Vue 3를 접하는 개발자라면 혼란을 겪을 수 있습니다.이번 글에서는 Vue의 두 가지 API 방식인 Composition API와 Options API의 차이점을 비교하고, 각각의 장단점과 활용 예제를 소개합니다.✅ Options API란?Vue 2에서 주로 사용된 방식으로, 컴포넌트를 정의할 때 data, methods, computed, watch 등 옵션을 명확하게 구분하여 작성합니다. {{ message }} Update 📌 장점구조가 명확해 초보자가 이해하기 쉬움Vue 2 경험자에게 익숙한 방식빠르게 작성 가..