[미니 프로젝트 1] ToDoList

짜스의 하루 ·2024년 5월 14일

project

강의를 들으면서 스크립트 기본도 정리하고, 작은 미니프로젝트도 함께 해보았다

첫번째 프로젝트 : TodoList 만들기 ✔️

강의를 듣고 처음에 html, css를 따라다가, 디자인이나 내가 하고 싶은 디자인으로 변경하면 좋을 것 같다는 생각이 들어서 방향을 조금 틀어보았다!

1 . html

간단하게 구성해 보았다.

font-awesome의 아이콘을 사용해 보았다.
이미지를 다운로드 하지 않고, 나의 키트를 불러온 뒤, 필요한 곳에 html, JS에 불러와서 사용했다.
구글 폰트를 가져와서 사용해 보았다.
다운로드 하지 않고, @import를 사용해서 폰트를 불러온 뒤, css에서 적용해 사용했다.
<div class="card"> : To Do 애플리케이션의 카드 컨테이너를 나타낸다.
card안에 section, footer 등 영역을 나누었다.

2. css

css의 코드는 길기 때문에
중요한 부분이나 설명이 필요한 부분만 언급하겠다

@import로 불러온 폰트를 css에 속성과 함께 정의해두고, 아래와 같이 필요한 곳에 불러다 써보았다.

배경을 이미지를 불러와서 적용하였는데,
이때 이미지는 픽사베이 (https://pixabay.com/ko/)를 사용하였다.

3 . JavaScript

1. 할 일 리스트 추가 기능

버튼이 클릭되면, 입력 상자의 값이 비어 있지 않은 경우에만 실행된다.
--> 입력 상자의 값이 비어 있지 않으면, 새로운 li 요소를 생성하고 입력 상자의 값을 텍스트로 설정한다.
삭제 아이콘을 생성하고, 해당 아이콘에 클래스를 추가하여 font-awesome에서 스타일을 불러온다.
li 요소에 삭제 아이콘을 추가한다.
이벤트 리스너를 추가하여 삭제 아이콘이 클릭되면 해당 li 요소를 삭제하도록 구현한다.
새로운 li 요소를 할 일 목록에 추가하고, 입력 상자를 비운다.
목록에 있는 항목의 개수를 업데이트하는 함수를 호출하여 목록의 개수를 실시간으로 업데이트한다.

--> 이 코드는 사용자가 입력 상자에 할 일을 추가하고, 그 아래에 목록으로 표시하고, 삭제할 수 있는 기능을 제공한다.

2 . 전체 삭제 버튼 및 리스트 개수 업데이트:

"전체 삭제" 버튼이 클릭되면, $todoList에 있는 모든 자식 요소를 제거한다.
--> 즉, 모든 할 일을 삭제한다.
삭제 후에는 updateListCount() 함수를 호출하여 목록의 개수를 업데이트한다.

3 . 리스트 업데이트 함수 (updateListCount()):

현재 할 일 목록에 있는 항목의 개수를 세어서 변수 itemCount에 저장한다.
$listCount 요소의 내용을 itemCount + ' tasks'로 업데이트하여 현재 목록의 개수를 표시한다.
만약 항목이 없는 경우(개수가 0인 경우), $listCount의 내용을 'tasks'로만 표시한다.

4 . 입력 상자(keyup 이벤트)에 대한 활성/비활성 상태 변경:

입력 상자에 텍스트를 입력할 때마다(keyup 이벤트) 입력 상자의 값이 비어 있는지 확인한다.
값이 비어 있지 않으면 $addBtn에 'active' 클래스를 추가하여 버튼을 활성화한다.
값이 비어 있으면 'active' 클래스를 제거하여 버튼을 비활성화한다.

--> 이 코드는 사용자가 입력 상자에 텍스트를 입력하면 추가 버튼이 활성화되고, 전체 삭제 버튼을 클릭하면 모든 할 일이 삭제되며 목록의 개수가 업데이트된다.

(추가 ‼️) localStorage 사용해서 데이터 저장

새로운 할 일을 추가할 때:
사용자가 입력 상자에 할 일을 입력하고 추가 버튼을 클릭하면, 현재 시간을 키(key)로 사용하여 할 일 내용을 로컬 스토리지에 저장한다.
--> 할 일은 todoList 배열에도 추가되면서, 이 배열은 페이지가 새로고침되어도 유지된다
할 일을 삭제할 때:
삭제 버튼을 눌렀을 때, 동시에 해당 할 일을 todoList 배열에서도 제거하고, 이 변경 사항을 로컬 스토리지에 반영한다.
페이지 로드 시 초기화:
페이지가 로드될 때 저장된 할 일 목록을 로컬 스토리지에서 불러와서 화면에 표시한다.
이를 통해 사용자는 새로고침 이후에도 이전에 추가한 할 일 목록을 볼 수 있다!
--> 삭제를 하지 않는 이상, 삭제되지 않는다!

전체 삭제 버튼을 클릭할 때 :
할 일 목록을 비우고(todoList 배열을 비움) 로컬 스토리지에서도 해당 데이터를 삭제한다.
이후에 updateListCount() 함수를 호출하여 목록 개수를 업데이트한다.
페이지 로드 시 초기화:
DOMContentLoaded 이벤트를 사용하여 페이지가 로드되면 실행된다.
로컬 스토리지에서 저장된 할 일 목록을 가져와서 storedList 변수에 저장한다.
storedList가 존재하면(null이 아니면) todoList 배열에 저장한다.
todoList 배열을 반복하면서 각 할 일 항목을 화면에 추가한다.
동시에 삭제 아이콘에 클릭 이벤트 리스너를 추가하여 해당 할 일을 삭제하고 목록을 업데이트한다.

4. 실행 결과

5 . 후기😎

사실 전에 todoList를 만들어보려고 시도(?) 했던 적이 있어서 기본적인 기능은 그래도 기억을 더듬어서 잘 해보았지만,
목록 리스트 갯수를 불러오고, 삭제하면 다시 줄어들고, 전체 삭제를 하면 tasks 를 뜰 수 있도록 만드는 곳에서 시간이 많이 걸린 것 같다 😂

그래도 블로그도 이것 저것 찾아보고, 지피티한테도 물어보면서 (물론 강의의 도움을 많이 받았지만)
코드를 깔끔하게 짜보고,