[Vanilla Javascript Study] # 2. TodoList 업그레이드

2주차에는 TodoList를 업그레이드하는 작업을 거쳤다.

[필수 구현사항]

• 미션1 html에 있던 스크립트를 TodoList.js로 분리합니다
• new TodoList()를 실행했던 구문은 index.js로 분리합니다
• index.html에서 해당 스크립트를 로드합니다

[추가 구현사항]

✎ 데이터 모델, LocalStorage 활용

• 데이터 모델에 isCompleted 추가

[{
  text: 'todo text',  // 할 일 이름
  isCompleted: false, // 완료 여부
}]

• todo data가 변경될 때 마다 localStorage에 저장
• 웹페이지에 처음 들어올 때 localStorage에 저장된 data가 있으면 불러오고, 없으면 빈 data로 시작
• 새로고침 시에도 작성해 둔 todo 유지

✎ TodoInput 컴포넌트 추가 

• App 컴포넌트 추가 
• 할 일을 입력하는 TodoInput 컴포넌트 추가
• App 컴포넌트에서 TodoInput과 TodoList컴포넌트를 관리하도록 구조 변경

✎ ES6 모듈시스템

• 현재까지 작성한 자바스크립트를 모듈 시스템으로 변환
• 로컬 웹 서버 설치
  1. node.js 설치
  2. http-server 설치 `npm install http-server -g`
     https://www.npmjs.com/package/http-server
  3. 터미널에서 `npx http-server -c -1` 입력해 localhost:8080 띄우기

✎ TodoCount 컴포넌트 추가

• TodoList의 총 개수와 완료된 개수를 표시하는 TodoCount 컴포넌트 작성

✎ Event Delegate 기법 활용

• todo 데이터의 변동에 따라 해당 아이템을 렌더링하는 DOM이 늘어나는데, todo가 삭제될 때 todo DOM의 각종 이벤트를 매번 다시 걸어야 하는데, Event Delegate 기법을 이용하면 쉽게 처리가 가능

[결과물 github link]

GitHub - jazzo5947/Vanilla-JS-Study: Vanilla JS Study Managed by David