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

 
 
 

➜ ListItem.ts

➜ FullList.ts

➜ ListTemplate.ts

➜ Main.ts

 
 
 

DOMList 인터페이스

import FullList from "../model/FullList";

interface DOMList {
    ul: HTMLUListElement, // HTML 문서에서 <ul> 요소를 나타내는 인터페이스
    clear(): void,
    render(fullList: FullList): void,
}

1. ul
- 타입: HTMLUListElement
- ul은 HTML 문서에서 <ul> 요소를 나타내는 인터페이스이다. Todo 항목들을 표시하기 위해 사용할 <ul> 요소를 가리킨다. DOMList를 구현하는 클래스에서 이 ul 속성에 해당하는 HTML 요소를 선택하여 Todo 항목들을 렌더링할 수 있다.
 
 

2. clear()
- clear() 메서드는 DOMList에 연결된 Todo 리스트를 비운다. 이는 기존의 Todo 항목들을 삭제하여 화면에서 모든 항목을 지운다. 사용자가 Todo 리스트를 초기화하고자 할 때 이 메서드를 호출하여 화면에서 Todo 항목들을 제거할 수 있다.
 
 

3. render(fullList: FullList)
- 매개변수: fullList - FullList 클래스의 인스턴스인 FullList 객체
- render() 메서드는 fullList로 전달된 FullList 인스턴스의 Todo 항목들을 ul에 렌더링한다. 즉, fullList에 저장된 Todo 항목들을 HTML로 표현하여 화면에 표시하는 역할을 한다. ul에 해당하는 HTML 요소를 찾고, fullList의 항목들을 순회하며 각 항목을 리스트 형태로 화면에 추가한다. 이를 통해 Todo 리스트가 HTML 문서에 동적으로 생성되고 보여질 수 있게 된다.
 
 

4. DOMList 인터페이스 정리

DOMList 인터페이스는 Todo 리스트를 HTML로 렌더링하고 화면에 표시하기 위한 기능과 속성들을 정의한다. ul 속성은 HTML 문서에서 <ul> 요소를 나타내는 인터페이스를 가리키며, clear() 메서드는 화면에서 Todo 항목들을 모두 삭제하여 Todo 리스트를 비우는 역할을 한다. render() 메서드는 FullList 클래스의 인스턴스를 받아서 해당 Todo 항목들을 ul에 동적으로 렌더링하여 화면에 보여주는 기능을 담당한다. 
 
 

---

 
 

ListTemplate 클래스

export default class ListTemplate implements DOMList {

    ul: HTMLUListElement

    static instance: ListTemplate = new ListTemplate()

    private constructor() {
        this.ul = document.getElementById("listItems") as HTMLUListElement //타입단언
    }

    clear(): void {
        this.ul.innerHTML = ''
    }

1. ul
- 타입: HTMLUListElement
- ul은 Todo 항목들을 표시하기 위해 사용할 <ul> 요소를 나타내는 속성이다. ListTemplate 클래스는 이 ul 속성에 해당하는 HTML 요소를 선택하여 Todo 항목들을 렌더링할 수 있다.
 
 

2. instance
- 타입: ListTemplate
- Singleton 패턴을 구현하기 위해 ListTemplate 클래스 내에 정적 속성으로 선언되었다. 이 속성은 ListTemplate 클래스의 유일한 인스턴스를 가리키며, 애플리케이션 전역에서 항상 동일한 인스턴스에 접근하고자 할 때 사용된다.
 
 
 
3. clear()
- clear() 메서드는 ul 요소의 내부 HTML을 모두 비운다. 즉, 화면에서 모든 Todo 항목을 지워 Todo 리스트를 비우는 역할을 한다. 사용자가 Todo 리스트를 초기화하고자 할 때 이 메서드를 호출하여 화면에서 Todo 항목들을 제거할 수 있다.
 
 

4. render(fullList: FullList)

render(fullList: FullList): void {
        this.clear()

        fullList.list.forEach(item => {
            const li = document.createElement("li") as HTMLLIElement
            li.className = "item"

            const check = document.createElement("input") as HTMLInputElement
            check.type = "checkbox"
            check.id = item.id
            check.tabIndex = 0
            item.checked = item.checked
            li.append(check)

            check.addEventListener('change', () => {
                item.checked = !item.checked
                fullList.save()
            })

반응형

- 매개변수: fullList - FullList 클래스의 인스턴스인 FullList 객체
- render() 메서드는 fullList로 전달된 FullList 인스턴스의 Todo 항목들을 ul에 렌더링한다. 즉, fullList에 저장된 Todo 항목들을 HTML로 표현하여 화면에 표시하는 역할을 한다.
 
 

---

< render() 메서드 동작 단계 >

1. 기존의 Todo 항목들을 모두 제거하기 위해 clear() 메서드를 호출. 이를 통해 이전에 렌더링되어 있던 Todo 항목들이 ul 요소에서 모두 제거.
 

2. fullList.list.forEach() 메서드를 사용하여 fullList에 저장된 Todo 항목들을 순회.
2-1. 각 Todo 항목마다 새로운 <li> 요소를 생성. 이를 위해 document.createElement("li")를 사용.
2-2. <li> 요소에 item 클래스를 추가하여 CSS 스타일링을 위한 클래스를 할당. 이를 위해 li.className = "item"를 사용.
 

3. Todo 항목의 상태를 나타내기 위해 체크박스를 생성. 이를 위해 document.createElement("input")를 사용하고, type 속성을 "checkbox"로 지정.
3-1. 체크박스에 고유한 id를 할당하여 label 요소와 연결. 또한, 체크박스의 초기 상태는 Todo 항목의 checked 속성.
3-2. Todo 항목의 checked 상태가 변경될 때마다 change 이벤트를 감지하여 fullList.save()를 호출하여 변경된 상태를 저장.
 

            const label = document.createElement("label") as HTMLLabelElement
            label.htmlFor = item.id
            label.textContent = item.item
            li.append(label)

            const button = document.createElement("button") as HTMLButtonElement
            button.className = 'button'
            button.textContent = 'X'
            li.append(button)

            button.addEventListener('click', () => {
                fullList.removeItem(item.id)
                this.render(fullList) //render: HTML 요소로 변환하여 화면에 보여줌
            })

4. label 요소를 생성하여 Todo 항목의 내용을 텍스트로 표시.
4-1. 이를 위해 document.createElement("label")를 사용.
4-2. textContent를 Todo 항목의 item 속성으로 설정.
 
 
5. Todo 항목을 삭제하기 위한 삭제 버튼을 생성.
5-1. 이를 위해 document.createElement("button")을 사용, 클래스를 추가하여 CSS 스타일링을 할당.
5-2. 삭제 버튼에 click 이벤트를 감지하여 해당 Todo 항목을 fullList.removeItem()를 통해 삭제하고,
5-3. this.render(fullList)를 호출하여 변경된 Todo 리스트를 다시 렌더링.
 
 

            this.ul.append(li)

6. 마지막으로 생성된 <li> 요소에 체크박스, 레이블, 삭제 버튼을 추가하고, 이를 ul 요소에 추가.