ksundev 님의 블로그

이번 포스트에서는 Vue.js에서 Modal 기능을 구현하는 방법을 알아보겠습니다. 특히 Vue의 강력한 Slot 시스템과 내장 Transition 컴포넌트를 활용한 Modal 구현에 대해 중점적으로 다뤄보겠습니다.1. 현재 상황과 해결해야 할 문제컴포넌트 구조 개선: UI와 비즈니스 로직 분리이전 포스트들과 마찬가지로, 이번에도 컴포넌트의 책임을 명확히 분리했습니다:TodoInput 컴포넌트: UI 구현만 담당 (프레젠테이션 컴포넌트)App 컴포넌트: 비즈니스 로직과 데이터 관리 담당 (컨테이너 컴포넌트)Modal 컴포넌트: 재사용 가능한 UI 컴포넌트해결해야 할 문제빈 입력 시 사용자에게 알림 표시재사용 가능한 Modal 컴포넌트 구현Vue의 Slot 시스템을 활용한 유연한 Modal 설계2. Vue..

할일 전체 초기화 기능 구현하기이번 포스트에서는 할 일 목록을 전체적으로 초기화하는 기능을 구현해보겠습니다. 특히 Vue.js에서 자식 컴포넌트가 부모 컴포넌트의 데이터를 변경하는 방법과 이벤트 기반 통신 패턴에 대해 알아보겠습니다.1. 현재 상황과 해결해야 할 문제컴포넌트 구조 개선: UI와 비즈니스 로직 분리이전 포스트들과 마찬가지로, 이번에도 컴포넌트의 책임을 명확히 분리했습니다:TodoFooter 컴포넌트: UI 구현만 담당 (프레젠테이션 컴포넌트)App 컴포넌트: 비즈니스 로직과 데이터 관리 담당 (컨테이너 컴포넌트)이러한 분리를 통해 코드의 재사용성과 유지보수성을 크게 향상시킬 수 있습니다.현재 TodoFooter 컴포넌트의 상태현재 TodoFooter.vue는 프레젠테이션 컴포넌트로 구현되어..

할일 완료 상태 토글 기능 구현하기이번 포스트에서는 할 일의 완료 상태를 토글하는 기능을 구현해보겠습니다. 특히 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는 프레젠터 컴포넌트라고 부르면 됩니다. 다음 포스트로 이동하여 바로..

Vue.js 동적 앱 만들기 - TodoFooter 컴포넌트 구현이번 포스트에서는 TodoFooter.vue 컴포넌트를 구현하여 모든 할 일을 한 번에 삭제하는 기능을 만들어보겠습니다.1. 간단한 구조의 Footer 컴포넌트TodoFooter 컴포넌트는 매우 간단한 구조로 되어 있습니다. 전체 할 일 목록을 초기화하는 기능만 담당합니다. 전체 초기화 템플릿 구조 분석단일 기능: "전체 초기화" 버튼 하나만 포함클릭 이벤트: @click="clearTodo"로 클릭 시 메서드 호출2. methods에 전체 삭제 기능 구현하기TodoFooter 컴포넌트는 단 하나의 메서드만 가지고 있습니다.export default { methods: { clearTodo() { localStor..

Vue.js 동적 앱 만들기 - TodoList 컴포넌트 구현저번 포스트인 TodoInput.vue에 이어서 이번 포스트에서는 Todo(할일)를 나타낼 리스트를 완성해보겠습니다.1. data()에 할 일 목록을 저장할 배열 정의하기TodoList 컴포넌트에서는 여러 개의 할 일을 관리해야 하므로 배열을 사용합니다.export default { data() { return { todoItems: [], // 할 일 목록을 저장할 배열 }; }, // ... 나머지 코드};todoItems 배열의 역할할 일 목록 저장: 여러 개의 Todo 객체를 배열 형태로 관리합니다동적 렌더링: 배열의 각 요소를 화면에 동적으로 표시합니다상태 관리: 할 일의 추가, 삭제, 완료 상태 변경을 추적합..

(TodoHeader.vue는 기능이 딱히 없으므로 css 적용까지만 했습니다.)Vue.js 동적 앱 만들기 - TodoInput 컴포넌트 구현지금까지는 정적 HTML만 완성했기 때문에 앱이 동작하지 않을 것입니다.이제 data와 methods를 추가하여 동적인 앱으로 만들어봅시다!이번 포스트에서는 TodoInput.vue 컴포넌트에 대해서만 다루겠습니다.1. data()에 입력값을 받을 변수 지정하기Vue.js에서 사용자 입력을 처리하기 위해서는 먼저 data() 함수에 입력값을 저장할 변수를 정의해야 합니다.export default { data() { return { newTodo: "", // 사용자 입력값을 저장할 변수 }; }, // ... 나머지 코드};왜 data(..

저희의 목표인 이 앱을 만들기 위해선 기능도 중요하지만 어느 정도는 스타일링이 필요하겠죠?각 컴포넌트별로 style을 작성해봅시다.참고로 각 아이콘들은 Font Awesome의 아이콘을 활용하였습니다. (자세한건 찾아보기) 이 부분이 폰트아이콘 입니다. # Header TODO List! 앱 타이틀만 보여줄 컴포넌트라, JS 부분은 필요 없네요. 헤더는 이대로 완성입니다.# Input # List 임시항목1 # Footer 전체 초기화 이번 포스트는 여기까지입니다.스타일을 완성했으니 다음 포스트에서 Vue를 통해 기능을 추가해봅시다!