[JS] JS로 실사용 가능한 Todo List Browser App 만들기

서론

---

코딩 공부를 시작하며 어렴풋이 세운 목표가 있다면, 언젠간 머리속에 있는 아이디어들을 자유롭게 코드로 구현하겠다는 것이었다. 그래서 현재 참여 중인 교육 프로그램의 커리큘럼 외에도 유튜브를 통해 여러 훌륭한 센세이들의 프로젝트 실습 강의를 자주 수강했다. 덕분에 자바스크립트가 손에 익어갈 무렵, 문득 이렇게 학습하는 것이 올바른지에 대한 의문이 들었다. 물론, 튜토리얼 영상을 보고 따라했다 한들 내 실력 밖의 결과물을 코드로 구현해내고 나면 뿌듯함이 찾아오긴 한다. 하지만 정작 비슷한 내용의 프로젝트를 튜토리얼 영상 없이 재구현해야 한다면, 나만의 생각을 가지고 프로젝트에 접근하는 것이 아니라, 영상 내용을 어떻게든 떠올려 보며 남의 생각을 쫓아가기 바쁠 것 같다는 생각이 들었다. 간단한 프로젝트를 구현해보더라도 온전히 나만의 생각을 코드로 구현해보고 싶었다. 그래서 코딩 프로젝트의 가장 기본이 되는 To-do List를, 어떠한 영상도 참고하지 않고, 내가 실사용할 수 있게끔 만들어 보기로 다짐했다.

결과: 주요 기능 요약

---

💡Add/Remove Task & Toggling Todo List

• Input field에 내용을 입력하고 Enter를 누르면 새로운 할 일이 자동 추가된다.
• 각 할 일 우측에 위치한 x 버튼을 누르면 할 일은 목록에서 제거된다.
• 페이지 오른 쪽에 위치한 To-do List는 할 일이 한 개 이상 존재할 때만 펼쳐진다.
• 모든 할 일을 제거한 경우 To-do List는 다시 사라진다.

💡Clock

• 페이지 내 위치한 시계는 1초마다 재 렌더링 되어 현재 시간을 표시한다.
• 새로운 탭을 열거나 페이지를 새로고침해도 시간은 00:00:00으로 리셋되지 않는다.
• 실시간 시계 아래는 현재 날짜와 요일이 month-dd-day 형태로 표시된다.

💡Toggle Each Task's Completion Status

• 할 일에 Hover하는 경우 할 일의 배경색은 연초록색으로 변경된다.
• 할 일을 클릭하는 경우 할 일이 조금 더 진한 초록색으로 변경되고, 새 탭을 열거나 새로고침해도 초록색으로 남아있는다.
• 할 일을 다시 클릭하면 초록색에서 원래 회색 색상으로 돌아온다.

💡Progress Bar

• 전체 할 일 중 완성된 것이 몇 프로 되는지 표시해주는 Progress Bar가 페이지 하단에 위치해 있다.
• To-do List에서 할 일을 클릭해서 .active클래스를 toggle할 때마다 Bar의 넓이는 재 계산된다.
• 마찬가지로 할 일 추가 및 삭제시에도 Bar의 넓이는 재 계산되어 화면에 렌더링 된다.
• 할 일을 추가하지 않은 상태에서는 전체 초록색으로 표시되게 했다.

💡No Repeats

• 이미 등록되어 있는 할 일을 다시 추가한 경우 "This task already exists." 라는 alert 창이 뜬다.

💡Scrollable

• 할 일이 많아서 화면 밖으로 나가게 되는 경우 Todo List 부분만 스크롤 할 수 있도록 변경된다.

코드 설명

---

1. 새로운 '할 일'이 추가되었을 때

• Input field에 Submit 이벤트가 발생하면, 즉 새로운 할 일이 추가되면 현재 localStorage에 저장되어 있는 이미 추가된 할 일들을 받아와서 alreadyIncluded 배열에 담아주고 새로 추가된 값과 비교해준다.
• 똑같은 할 일이 이미 추가되어 있는 경우 alert창을 통해 "This task already exists." 라는 메세지를 띄우고, 새로 추가된 값이 고유한 경우 새로운 taskEl을 생성해준다. 이때 taskEl은 task와 status 값을 가지고 있는데, task는 말 그대로 할 일, status는 완료 상태이다. 따라서 새로 추가된 할 일을 task로, false를 status로 입력하면 된다.
• 이후 생성된 taskEl은 taskArr배열에 넣고, 배열을 다시 localStorage에 담아준 뒤 현재 Input Field의 값을 초기화 시켜준다.

• 이후 마지막에 추가된 할 일 값을 렌더링 해주는 updateTaskList() 함수와 페이지 하단에 위치한 progress bar를 업데이트 해주는 함수updateProgress()를 실행시킨다.

2. 프로그레스 바에 변화가 있을 때

• localStorage에 저장되어 있는 taskEl 배열 중 status값이 true인 것, 즉 완료했다고 표시되어 있는 할 일의 개수를 파악한다. 이후 전체 taskEl 수 대비 true 인 것의 개수를 퍼센트로 환산하고, 이를 progressDone 바의 width 값으로 지정해준다.

3. Todo List에 클릭 이벤트가 발생했을 때

• toDoList에 이벤트 리스너를 추가하고 이벤트 위임을 통해 하위 요소들의 이벤트를 핸들링했다.
• 할 일에 클릭이 발생하는 경우 클래스 변화를 통해 스타일링에 변화를 주었다. 이번 프로젝트의 경우 클릭된 곳의 배경색이 회색에서 초록색으로, 다시 초록색에서 회색으로 변경되게 했다. 다만 클래스 변화만 주고 끝내면 새로고침 하거나 새로운 탭을 열었을 때 클릭 이벤트로 인한 색상 변화가 반영되지 않기 때문에 localStorage의 taskEl status 값을 현 상태에 맞게 업데이트 해준다.
• 삭제 버튼을 클릭하는 경우, localStorage에 저장되어 있는 할 일 배열에서 삭제할 taskEl을 찾고, splice 메서드를 통해 제거한 후 다시 localStorage에 업데이트 해준다.

• 이후 변화가 바로 반영될 수 있도록 toDoList를 초기화하고, 현재 localStorage에 저장되어 있는 값을 toDoList에 모두 입력해주는 initializeTaskList() 함수를 실행시킨다.

4. 시간/날짜

• setInterval을 통해 1초마다 시간을 업데이트 해주는 renderTime() 함수를 실행시켰다.

• 시계 밑에 위치한 mm-dd-day 형태로 날짜를 표시해둔 것의 경우 renderTime() 함수와 비슷하게 접근했다. 다만 getMonth() 등의 메서드를 사용하는 경우 인덱스 값을 반환해주기 때문에 미리 모든 month와 day를 배열에 담아두고, 인덱스 값에 따라 업데이트 되게 했다.
• 요일의 경우 0 ~ 6의 인덱스 값이 반환되는 데, 이때 0은 일요일을 뜻한다.

사용 방법

---

1. Github 레파지토리에서 파일 다운로드하여 원하는 위치에 저장한다.

2. 저장해둔 HTML 파일의 경로를 복사한다.

3. 구글 크롬에서 Custom New Tab URL 익스텐션을 다운로드 한다.

4. 설치된 후 익스텐션 아이콘을 누르고 Options창을 열어준다.

5. URL or Local File Path 란에 파일 경로를 복사 붙이기 해준 후 양 끝에서 따옴표를 제거하고 하단에 위치한 Save 버튼을 누른다.

회고

---

• 비록 난이도가 높은 프로젝트는 아니지만, 코딩공부 시작 후 처음으로 온전히 내 머리속의 내용을 코드로 옮겨 담았다는 점에서 개인적으로는 의미가 크다.
• 주요 기능을 구현하는 과정에서 완전 새로운 메서드나 구현방법을 배웠다기 보다는, 각 기능이 서로 상호작용하는 과정과 구현법을 심도 있고 디테일하게 학습할 수 있었던 점에서 좋았다.
• 특히 코드가 원하는 대로 동작하지 않더라도 남의 생각에 의존하지 않고 스스로 코드를 재분석하고 새로운 방법을 창출해내는 과정에서 큰 뿌듯함을 느꼈다.
• HTML 파일만 열어도 브라우저에서 모든 기능이 적용될 수 있게끔 HTML 파일 안에 <style>, <script> 태그를 통해 모든 CSS 및 JavaScript 코드를 담았다. 코드가 길어지면 길어질 수록 위 아래로 스크롤 해가면서 코딩하는 게 생각보다 시간을 많이 잡아 먹었다.