[Project]Vanilla JS - Todo 리스트 만들기

 

보러가기 - https://github.com/bluepebble25/TodoList

 

1. 구현할 기능

1. 할 일을 입력하고 + 버튼 혹은 엔터키로 할 일을 추가한다.

2. 항목 앞의 체크박스를 클릭해 완료 여부를 toggle한다.

3. 휴지통 버튼을 눌러 항목을 삭제한다.

4. 항목을 더블클릭해서 수정할 수 있다.

5. 상단에 남은 할 일의 개수를 표시한다.

6. delete Checked items 버튼을 클릭해 체크된 항목들을 한꺼번에 삭제할 수 있다.

7. 새로고침해도 목록이 유지된다. (Local Storage)

 

2. 다 만들고 느낀 점

디자인 시스템 필요!

:root {
    /* Color */
    --skyblue-color: #DEEBF7;

    /* Size */
    --base-space: 14px;
    --size-button: 60px;
    --size-checkbox: 28px;
    --size-radius: 8px;
    --font-size: 2rem;
    --font-small: 1.8rem;
}

이런 식으로 css 변수를 정해놓고 하니 편한데 폰트 사이즈나 버튼 사이의 간격이 원하는 것보다 미묘하게 크거나 작을 때 새로 정의하면 끝이 없으므로 X2 혹은 /2처럼 계산을 해 지정했다. 디자인을 ppt로 대충 큰 틀만 그려서 만들었더니 이렇게 되었는데 다음에는 figma로 간격을 미리 계산한 다음 sm, lg 처럼 몇 가지로 범위를 좁혀서 일관적으로 사용해야 겠다. figma를 익히고 디자인 시스템의 네이밍 방식에 대해 찾아보자. 디자인 체계를 정하는 것은 사실 디자이너의 영역이라고 생각하지만, 프론트엔드 개발자로서도 꼭 알아야 하는 내용이라고 생각한다.

 

반응형 디자인의 어려움

반응형으로 만들어서 개발자 도구에서 제공하는 여러 사이즈의 기기로 테스트해보며 만들었다. 근데 위 아래 padding, margin을 %로 줬더니 가로를 줄이거나 늘리면 위 아래 여백도 변하는게 아닌가! 이상해서 CSS 스펙을 뒤져봤더니 상하 여백은 화면 너비에 영향을 받는단다... 이상하고 알수 없지만 이런건 실제로 만들어보지 않으면 모르는 문제이므로 앞으로 이런 일을 마주할 때다 내가 겪은 문제를 블로그에 열심히 기록해야 겠다.

 

3. 기능 구현 방법 정리

1. 할 일을 입력하고 + 버튼 혹은 엔터키로 할 일을 추가한다.
   • click, keypress 이벤트 리스너 등록 - 새 항목의 엘리먼트를 생성하고, 리스트에 자식노드로 추가한다.
2. 항목 앞의 체크박스를 클릭해 완료 여부 toggle
   • Element.classList.toggle()을 이용해 체크박스를 클릭할 때마다 checked 클래스 속성을 추가했다가 제거한다.
   • Element.classList.contains()를 통해 checked 클래스 속성이 있는지 확인하고, css로 효과를 준다.
3. 휴지통 버튼을 눌러 항목을 삭제한다.
   • 삭제할 항목의 텍스트를 가져와서 indexOf로 할 일 배열에서 데이터를 찾아 제거하고, 화면에서 엘리먼트도 제거한다.
4. 항목을 더블클릭해서 수정할 수 있다.
   • 더블클릭을 하면 텍스트가 존재하던 엘리먼트를 display: none으로 숨기고, 그 자리에 기존 텍스트값을 value로 갖는 input 엘리먼트를 추가한다.
   • 1)input의 바깥 영역을 클릭할 때, 2) 엔터키를 누를 때 두 가지 경우에 수정을 종료하는 이벤트를 등록한다. 종료시 input 엘리먼트를 제거하고 숨겼던 엘리먼트와 todoArr, localStorage에 수정사항을 반영하고 엘리먼트를 다시 보이게 한다.
5. 상단에 남은 할 일의 개수를 표시한다.
   • (할 일 배열의 length - 완료된 할 일의 length)을 통해 남은 할 일의 개수를 구하고 화면에 표시한다.
6. delete Checked items 버튼을 클릭해 체크된 항목들을 한꺼번에 삭제할 수 있다.
   • 할 일 목록에서 checked 클래스를 갖고 있는 항목들을 배열에 담은 다음, 할 일 배열에서 해당 항목을 제거하고 노드 리스트에서도 제거한다.
7. 새로고침해도 목록이 유지된다. (Local Storage)
   • 리스트 추가, 삭제, 수정, 순서바꾸기를 할 때 마다 할 일 배열을 업데이트 하고 localStorage와도 동기해준다.
   • Local Storage에 저장할 때는 할 일 배열을 JSON.stringfy()로 문자열화 해야하고, 불러올 때는 JSON.parse()를 통해 객체로 변환해야 한다.
   • 처음 페이지가 로드될 때 localStorage에 할 일 배열이 존재하는지 검사하고, 존재하면 JSON.stringfy()로 배열을 읽어와서 엘리먼트들을 생성해 화면에 보여주고, 존재하지 않으면 빈 할 일 배열을 생성한다.

---

• 드래그로 리스트의 순서 바꾸기(추가 예정)
  • Drag and Drop API 사용