---
# System prepended metadata

title: 3. 할 일 관리 앱 - 조회/삭제 기능 구현
tags: [지호, Vue.js + TypeScript 완벽 가이드]

---

# 3. 할 일 관리 앱 - 조회/삭제 기능 구현

###### tags: `지호`, `Vue.js + TypeScript 완벽 가이드`

---

## 1. 로컬 스토리지 타입 에러 해결법

```javascript=
const todoItems = localStorage.getItem(STORAGE_KEY) || "[]";
const result = JSON.parse(todoItems);
```

<br/>

## 2. 조회 기능 구현

src/App.vue

![image](https://user-images.githubusercontent.com/24283401/163503785-ef60f504-7911-41c0-adf8-cc8c6060f821.png)

src/components/TodoListItem.vue

![image](https://user-images.githubusercontent.com/24283401/163503758-45940f53-2767-457c-b488-4439e7b5e25e.png)

<br/>

## 3. 삭제 기능 구현

@click에 바로 emit 함수를 쓰지 않고 함수 하나를 추가로 만들어서 거기에서 emit을 쓰는 것이 테스팅에 좋다.

![image](https://user-images.githubusercontent.com/24283401/163665349-e353dc02-ce1b-4721-b369-627a5ce8ea7b.png)