ksundev 님의 블로그

할일 완료 상태 토글 기능 구현하기이번 포스트에서는 할 일의 완료 상태를 토글하는 기능을 구현해보겠습니다. 특히 Vue.js의 반응형 시스템과 관련된 중요한 개념인 RMT 패턴에 대해서도 함께 알아보겠습니다.1. 현재 상황과 해결해야 할 문제현재 TodoList 컴포넌트의 상태현재 TodoList.vue는 프레젠테이션 컴포넌트로 변경되어 데이터 관리 기능이 App 컴포넌트로 이동했습니다. 하지만 완료 상태 토글 기능은 아직 구현되지 않았습니다.해결해야 할 문제체크 아이콘 클릭 시 완료 상태 변경완료된 할 일의 시각적 표시 (취소선, 색상 변경)localStorage에 변경된 상태 저장2. App 컴포넌트에 토글 메서드 추가하기App.vue에 toggleComplete 메서드 추가 ..

개요Vue 3의 Single File Component(SFC)에서 부모-자식 컴포넌트 간의 데이터 통신은 props와 emit을 통해 이루어집니다. 이번 포스트에서는 실제 예제를 통해 이 두 개념을 자세히 살펴보겠습니다.Props: 부모에서 자식으로 데이터 전달Props란?Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. 자식 컴포넌트는 props를 통해 받은 데이터를 읽기 전용으로 사용할 수 있습니다.예제 코드 분석부모 컴포넌트 (App.vue) 자식 컴포넌트 (AppHeader.vue) {{ appTitle }} 타이틀 변경Props 사용법부모에서 props 전달: :appTitle="message" 형태로 v-bind를 사용자식에서 props 정의: prop..

Vue.js Event Emit: 자식에서 부모로의 컴포넌트 통신Vue.js에서 컴포넌트 간 통신의 두 번째 방법인 Event Emit에 대해 알아보겠습니다. Props가 부모에서 자식으로 데이터를 전달하는 방식이라면, Event Emit은 자식에서 부모로 신호를 보내는 방식입니다.Event Emit이란?Event Emit은 자식 컴포넌트가 부모 컴포넌트에게 이벤트를 발생시켜 통신하는 방법입니다.특징방향: 자식 컴포넌트 → 부모 컴포넌트용도: 버튼 클릭, 입력값 변경 등의 사용자 액션 알림방식: $emit() 메서드를 사용해 이벤트 발생실제 코드 예제 3계층 구조 분석이 코드는 3개의 계층으로 구성되어 있습니다:1️⃣ 최상단: Vue.createApp (#app)Vue.createApp({ c..