ksundev 님의 블로그

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

할일 추가 & 할일 삭제 책임 App 컴포넌트로 옮기기저번 포스트에서 컨테이너 패턴의 개념과 TodoList 컴포넌트의 리팩토링을 다뤘었죠. 이번에는 할일 추가와 삭제 기능을 App 컴포넌트로 옮겨서 완전한 컨테이너 패턴을 구현해보겠습니다.1. 현재 문제점과 해결 방안현재 발생하는 문제저번 포스트에서 언급했듯이, 현재 Todo 앱에는 중요한 문제가 있습니다:새로운 할 일을 추가해도 화면이 즉시 업데이트되지 않습니다.문제의 원인컴포넌트 간 통신 부재: TodoInput에서 할 일을 추가해도 TodoList가 이를 알 수 없습니다localStorage 동기화 문제: 데이터는 저장되지만 화면에 반영되지 않습니다반응형 데이터 부족: 컴포넌트들이 서로의 상태 변화를 감지하지 못합니다2. App 컴포넌트에 할일 추..

컨테이너란?저번 포스트에서 간단히 언급했었죠?컨테이너라는 것은 비즈니스 로직을 관리하고, 하위 컴포넌트들에게 데이터를 전달하는 역할을 하는 컴포넌트입니다.간단히 생각하자면 애플리케이션의 두뇌역할을 한다고 생각하면 됩니다.컨테이너의 주요 특징1) 데이터 관리애플리케이션의 상태(state)를 중앙에서 관리여러 컴포넌트가 공유하는 데이터를 보관데이터의 변경과 업데이트를 담당2) 비즈니스 로직 처리복잡한 계산이나 데이터 처리 로직을 포함API 호출이나 외부 서비스와의 통신이벤트 핸들링과 상태 변경 로직3) 하위 컴포넌트 제어자식 컴포넌트들에게 필요한 데이터를 props로 전달자식 컴포넌트에서 발생한 이벤트를 처리컴포넌트 간의 통신을 중재리팩토링1. TodoList 컴포넌트의 책임(역할) App 컴포넌트로 옮기기..

지금까지의 앱에는 사실 문제점이 있었습니다.# 문제점문제점 : 새로고침을 해야 화면이 바뀐다. 새로운 todo를 추가하고 바로 화면에 반영되는 것이 아닌,새로고침을 해야지만 화면에 반영되는 문제점입니다.추가할 때 바로 localStorage에는 저장이 되지만 바로 re-rendering이 되지 않고 있습니다. 뿐만 아니라 전체초기화를 해도 마찬가지로 바로 사라지지 않습니다.# 개선방향이제 이런 구조로 변경하여 todo 추가 및 삭제를 모두 App 컴포넌트가 담당하도록 하겠습니다. 참고로 이런 비즈니스 로직(데이터 조작에 관련된)을 담당하는 곳을 컨테이너라고 부릅니다.여기서는 App이 컨테이너가 되겠죠. Input, List, Footer는 프레젠터 컴포넌트라고 부르면 됩니다. 다음 포스트로 이동하여 바로..