해당 페이지는 연습용으로 질문만 있고 정답은 다음 글에서 공개합니다

• HTML 코드
• CSS 코드
• 전체 JS 코드

<aside> ☝ 로직

</aside>

1. 할 일 목록을 저장할 빈 배열을 선언

let todos = [];

2. DOMContentLoaded 이벤트가 발생하면, 즉 문서 로딩이 완료되면 함수들을 실행

<aside> ☝ 로직

1. 기존에 todos에서 로컬스토리지에 저장된 값이 있다면 꺼내오고 없다면 빈 배열을 할당
2. 렌더링 함수를 호출 (밑에서 구현 예정) </aside>

3. 할 일을 추가하는 함수

<aside> ☝ 로직

1. addTodo 함수 구현
2. input을 가져오고, 새로운 투두에 그 인풋의 값을 넣어줌
3. 만약 새로운 투두가 있다면, 투두리스트에 추가해주고
4. 로컬 스토리지에도 추가해줌
5. 렌더링 함수를 호출하고, 인풋의 값은 비워줌 </aside>

4. 할 일 목록을 렌더링하는 함수

<aside> ☝ 로직

1. list를 가져오고, list의 HTML을 빈 값으로 할당
2. todos배열을 순회하면서, li 요소를 생성
3. li 요소의 값은 todo로 채워줌
4. delete 버튼을 생성하고 값은 Delete로 채워줌
5. delete 버튼을 클릭했을 때 removeTodo 함수를 호출
6. removeTodo 함수는 (밑에서 구현 예정)
7. li 요소의 자식으로 버튼을 추가하고
8. list의 자식으로 li를 추가 </aside>

5. 할 일을 삭제하는 함수

<aside> ☝ 로직

1. index를 인자로 받아옴
2. 배열의 메소드를 호출해서 인자로 넣어준 index를 삭제
3. 로컬 스토리지에도 업데이트
4. 렌더링 함수를 호출 </aside>