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

 
 
 

➜ ListItem.ts

➜ FullList.ts

➜ ListTemplate.ts

➜ Main.ts

 
 
 
 

import './css/style.css'
import FullList from './model/FullList'
import ListItem from './model/ListItem'
import ListTemplate from './templates/ListTemplate'

 
css, FullList, ListItem, ListTemplate 파일을 모두 import한다.
 
 
 
 

initApp() 함수

const initApp = (): void => {
  const fullList = FullList.instance
  const template = ListTemplate.instance

 
싱글톤 패턴을 활용해
FullList, ListTemplate 의 유일한 인스턴스를 생성한다.
 
 
 
 
 

initApp() 함수 - 할일 항목을 입력받고 추가하는 기능 구현

const itemEntryForm = document.getElementById("itemEntryForm") as HTMLFormElement
  itemEntryForm.addEventListener("submit", (event: SubmitEvent): void => {
    event.preventDefault()

 
1. itemEntryForm은 Todo 항목을 입력받는 폼 요소를 나타낸다. 해당 폼이 제출될 때(Submit 이벤트 발생)의 동작을 설정.

 
2. event.preventDefault()를 사용하여 폼 제출의 기본 동작을 막는다. 폼 제출 시 페이지가 새로고침되는 동작을 방지.
 
 
 

const input = document.getElementById("newItem") as HTMLInputElement
    const newEntryText: string = input.value.trim()
    if (!newEntryText.length) return

3. input은 새로운 할일 항목을 입력하는 입력 요소(<input>)를 나타낸다. 입력한 값의 앞뒤 공백을 제거하고, newEntryText에 할당.

 
4. if (!newEntryText.length)를 사용하여 입력받은 할일 항목이 공백이거나 비어있는 경우, 즉 유효하지 않은 입력인 경우 함수실행 종료
 
 
 
 

const itemId: number = fullList.list.length
      ? parseInt(fullList.list[fullList.list.length - 1].id) + 1
      : 1

 
5. itemId는 새로운 할일 항목의 고유한 식별자인 숫자로, FullList의 마지막 항목의 id 값에 1을 더한 값. FullList에 항목이 없는 경우(처음 추가할 때) itemId는 1
 

반응형

 
 

const newItem = new ListItem(itemId.toString(), newEntryText)

    fullList.addItem(newItem)

    template.render(fullList)

    input.value = ""

6. newItem은 새로운 할일 항목을 나타내는 ListItem 인스턴스를 생성. newItem은 새로운 할일 항목의 id와 item 속성을 가지게 된다.

 
7. fullList.addItem(newItem)를 사용하여 새로운 할일 항목을 FullList에 추가.

 
8. template.render(fullList)를 사용하여 FullList에 저장된 할일 항목들을 ListTemplate을 통해 화면에 렌더링. 이를 통해 새로운 할일 항목이 화면에 보여진다.
 
9. 마지막으로 입력 요소(<input>)의 값을 비워준다. 이를 통해 새로운 할일 항목을 입력하고 제출한 뒤 입력 폼을 초기화할 수 있다.
 
 
 
 
 

const clearItems = document.getElementById("clearItemsButton") as HTMLButtonElement

  clearItems.addEventListener('click', (): void => {
    fullList.clearList()
    template.clear()

 
10. clearItems는 "clearItemsButton" ID를 가진 버튼 요소(<button>)를 나타낸다. 이 버튼은 할일 항목들을 모두 삭제하는 기능

 
11. clearItems.addEventListener('click', () => {...})는 "click" 이벤트를 감지하여 콜백 함수를 실행하는 이벤트 리스너를 추가.

11-1. 콜백 함수 내부에서는 fullList.clearList()를 호출하여 FullList 객체에 저장된 모든 할일 항목들을 삭제. 

11-2. template.clear()를 호출하여 화면에서 모든 할일 항목들을 제거. 
 
 
 
 

fullList.load()
template.render(fullList)

 
12. fullList.load()는 FullList 객체의 load() 메서드를 호출, 로컬 스토리지에서 저장된 Todo 리스트를 불러오는 역할. 이를 통해 이전에 저장된 할일 항목들을 불러올 수 있다.

 
13. template.render(fullList)는 ListTemplate 객체의 render() 메서드를 호출, FullList에 저장된 할일 항목들을 화면에 렌더링. 이를 통해 로컬 스토리지에 저장된 할일 항목들을 화면에 보여준다.

 
 
 
 

document.addEventListener("DOMContentLoaded", initApp)

document.addEventListener("DOMContentLoaded", initApp)

 
- DOMContentLoaded 이벤트를 감지하여 initApp 함수를 실행한다.

- DOMContentLoaded 이벤트는 초기 HTML 문서가 완전히 로드되고 파싱되었을 때 발생한다.

- 이벤트 리스너를 추가함으로써 애플리케이션이 초기화되고 사용자 인터랙션을 시작할 수 있는 상태가 되도록 한다.
- initApp 함수를 실행하여 초기 애플리케이션 상태를 설정하고, 사용자가 이후 할 일 항목을 추가, 삭제, 렌더링하는 등의 인터랙션을 시작할 수 있게 된다.