ksundev 님의 블로그

할일 추가 & 할일 삭제 책임 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는 프레젠터 컴포넌트라고 부르면 됩니다. 다음 포스트로 이동하여 바로..

Vue.js 컴포넌트 사용법: 컴포넌트 생성과 등록개요Vue.js에서 컴포넌트를 사용하면 코드를 재사용 가능한 단위로 나누어 관리할 수 있습니다. 이 글에서는 컴포넌트를 생성하고, import하고, 등록하는 방법에 대해 알아보겠습니다.1. 컴포넌트 파일 생성디렉토리 구조src/├── App.vue└── components/ └── AppHeader.vue새로운 컴포넌트 파일 생성/components 폴더 아래에 새로운 Vue 컴포넌트 파일을 생성합니다.AppHeader.vue 앱 헤더2. 컴포넌트 Import 방법부모 컴포넌트에서 자식 컴포넌트를 사용하려면 먼저 import해야 합니다.Import 경로 설명./components/AppHeader.vue: 현재 파일 기준으로 components..