[typescript/타입스크립트] ToDo List 미니 프로젝트 - FullList 코드리뷰

 

 

 

➜ ListItem.ts

➜ FullList.ts

➜ ListTemplate.ts

➜ Main.ts

 

 

 

List 인터페이스

import ListItem from './ListItem'

interface List {
    list: ListItem[],
    load(): void,
    save(): void,
    clearList(): void,
    addItem(itemObj: ListItem): void,
    removeItem(id: string): void,
}

1. list: ListItem[]
- list는 Todo 항목들을 저장하는 ListItem객체들로 이루어진 배열이다. Todo 리스트의 모든 항목들은 이 배열에 담겨 관리된다.

2. load()
- load() 메서드는 이전에 저장된 Todo 항목들을 로드해서 _list에 추가하는 기능을 수행한다. 보통 Todo 리스트 애플리케이션이 처음 로드될 때 이 메서드가 호출되어 이전에 저장한 Todo 항목들을 복원하는 데 사용된다.

3. save()
-  save() 메서드는 현재 Todo 항목들을 로컬 스토리지 등에 저장하는 기능을 수행한다. 사용자가 새로운 항목을 추가하거나 삭제할 때마다, save() 메서드를 호출하여 Todo 항목들을 영구적으로 보존하고 다음에 애플리케이션을 로드했을 때 이전 상태를 유지하는 데 사용된다.

4. clearList()
- clearList() 메서드는 Todo 리스트의 모든 항목들을 비우는 기능을 수행한다. 사용자가 Todo 항목들을 모두 삭제하고 초기화하고자 할 때 이 메서드를 호출하여 리스트를 비울 수 있다.

5. addItem(itemObj: ListItem)
- 매개변수: itemObj - 추가할 새로운 Todo 항목을 나타내는 ListItem 객체
- addItem() 메서드는 새로운 Todo 항목을 Todo 리스트에 추가하는 기능을 수행한다. 사용자가 애플리케이션에 새로운 할일 항목을 입력했을 때 이 메서드를 호출하여 새로운 항목을 Todo 리스트에 추가할 수 있다.

6. removeItem(id: string)
- 매개변수: id - 삭제할 Todo 항목의 고유한 식별자인 문자열
- removeItem() 메서드는 주어진 id에 해당하는 Todo 항목을 Todo 리스트에서 삭제하는 기능을 수행한다. 사용자가 특정 항목을 삭제하고자 할 때 이 메서드를 호출하여 해당 항목을 Todo 리스트에서 제거할 수 있다.

 

 

 

FullList 클래스 속성

export default class FullList implements List {

    static instance: FullList = new FullList()

    private constructor(private _list: ListItem[] = []) { }

    get list(): ListItem[] {
        return this._list
    }

1. instance
- 타입: FullList
- Singleton 패턴을 구현하기 위해 FullList 클래스 내에 정적 속성으로 선언되었다. 이 속성은 FullList 클래스의 유일한 인스턴스를 의미하며, 애플리케이션 전역에서 항상 동일한 인스턴스에 접근하고자 할 때 사용된다.

2. _list
- 타입: ListItem[]
- 설명: _list는 ListItem 객체들로 이루어진 배열로, Todo 항목들을 저장하는 용도로 사용된다. _list는 private으로 선언되었기 때문에, 클래스 외부에서 직접 접근하는 것을 막고 Getter 메서드인 list()를 통해 외부에서 _list에 접근할 수 있다.

 

 

 

FullList 클래스 기능

1. load()

load(): void {
        const storedList: string | null = localStorage.getItem("myList")
        if (typeof storedList !== "string") return

        const parsedList: { _id: string, _item: string, _checked: boolean }[] = JSON.parse(storedList)

        parsedList.forEach(itemObj => {
            const newListItem = new ListItem(itemObj._id, itemObj._item, itemObj._checked)
            FullList.instance.addItem(newListItem)
        })
    }

반응형

 load() 메서드는 로컬 스토리지에서 이전에 저장한 Todo 항목들을 불러와 _list에 추가한다. 저장된 항목들은 JSON 형식으로 저장되어 있으며, 이를 파싱하여 ListItem 객체로 변환한 뒤, addItem() 메서드를 사용하여 FullList 인스턴스의 _list에 추가한다.

 

 

2. save()

save(): void {
        localStorage.setItem("myList", JSON.stringify(this._list))
    }

 save() 메서드는 현재 _list에 저장된 Todo 항목들을 로컬 스토리지에 JSON 형식으로 저장한다. 이를 통해 애플리케이션의 상태를 영구적으로 유지하고, 다음에 애플리케이션을 로드했을 때 이전 상태를 복원할 수 있다.

 

 

3. clearList()

clearList(): void {
        this._list = []
        this.save()
    }

 

 

 clearList() 메서드는 _list를 빈 배열로 초기화하고, save() 메서드를 호출하여 Todo 리스트를 비운다. 사용자가 Todo 항목들을 모두 삭제하고 초기화하고자 할 때 이 메서드를 호출하여 리스트를 비울 수 있다.

 

 

 

4. addItem(itemObj: ListItem)

addItem(itemObj: ListItem): void {
        this._list.push(itemObj)
        this.save()
    }

- 매개변수: itemObj - 추가할 새로운 Todo 항목을 나타내는 ListItem 객체
- addItem() 메서드는 주어진 itemObj를 _list에 추가하는 기능을 수행한다. 사용자가 애플리케이션에 새로운 할일 항목을 입력했을 때 이 메서드를 호출하여 새로운 항목을 Todo 리스트에 추가할 수 있다.

 

 

5. removeItem(id: string)

removeItem(id: string): void {
        this._list = this._list.filter(item => item.id !== id)
        this.save()
    }

- 매개변수: id - 삭제할 Todo 항목의 고유한 식별자인 문자열
- removeItem() 메서드는 주어진 id에 해당하는 Todo 항목을 _list에서 삭제하는 기능을 수행한다. 사용자가 특정 항목을 삭제하고자 할 때 이 메서드를 호출하여 해당 항목을 Todo 리스트에서 제거할 수 있다.

 

 

 

FullList 클래스 정리

FullList 클래스는 List 인터페이스를 구현하여 Todo 리스트에 필요한 속성과 기능들을 제공한다. Singleton 패턴을 활용하여 FullList 인스턴스가 단 하나만 존재하도록 유지하고, load()와 save() 메서드를 통해 Todo 항목들을 로드하고 저장한다. clearList() 메서드를 통해 리스트를 초기화하고, addItem()과 removeItem() 메서드를 통해 사용자가 새로운 항목을 추가하거나 기존 항목을 삭제할 수 있도록 한다.