| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
Tags
- URL
- component
- emit
- 행렬
- TODO
- goroutine
- Dictionary
- PROPS
- localStorage
- todo-list
- Vue.js
- toggle
- channel
- Matrix
- Refactoring
- reactivity
- graceful shutdown
- method
- cli
- CDN
- golang
- map
- Vue
- go
- SFC
- App.vue
- Server
- websocket
- container
- goroutines
Archives
- Today
- Total
ksundev 님의 블로그
[TODO App][Refactoring] 현재 앱의 문제점 본문
지금까지의 앱에는 사실 문제점이 있었습니다.
# 문제점
새로운 todo를 추가하고 바로 화면에 반영되는 것이 아닌,
새로고침을 해야지만 화면에 반영되는 문제점입니다.
추가할 때 바로 localStorage에는 저장이 되지만 바로 re-rendering이 되지 않고 있습니다.
뿐만 아니라 전체초기화를 해도 마찬가지로 바로 사라지지 않습니다.

# 개선방향

이제 이런 구조로 변경하여 todo 추가 및 삭제를 모두 App 컴포넌트가 담당하도록 하겠습니다.
참고로 이런 비즈니스 로직(데이터 조작에 관련된)을 담당하는 곳을 컨테이너라고 부릅니다.
여기서는 App이 컨테이너가 되겠죠. Input, List, Footer는 프레젠터 컴포넌트라고 부르면 됩니다.
다음 포스트로 이동하여 바로 리팩토링을 시작해볼까요?
'[개발] Vue.js > 중급' 카테고리의 다른 글
| [TODO App][Refactoring] App 컴포넌트를 컨테이너로 만들기 2 (0) | 2025.07.07 |
|---|---|
| [TODO App][Refactoring] App 컴포넌트를 컨테이너로 만들기 1 (0) | 2025.07.07 |
| [TODO App] 동적 앱 만들기 (TodoFooter.vue) (0) | 2025.07.06 |
| [TODO App] 동적 앱 만들기 (TodoList.vue) (0) | 2025.07.06 |
| [TODO App] 동적 앱 만들기 (TodoInput.vue) (2) | 2025.07.06 |