투두 리스트를 겸한 스탑와치를 어느 정도 완성한 것 같다. 이번에 구현한 기능은 ,
1. 삭제 버튼 누르면 리스트에서 안 보이게 하기
2. 삭제 버튼 누르면 로컬 스토리지에도 업데이트 하기
3. 처음 접속했을 때, 로컬 스토리지에 저장된 데이터가 있으면 가져와서 보여주기
그리고 디자인도 조금 수정했다. ul -> li 안에 span 두 개로 시간과 액션을 마크업했는데, 액션 이름을 아주 아주 아주 길게 작성했더니 그냥 대책없이 길어지기만 했다. 액션 이름을 아주 아주 길게 작성하면
1. ...으로 생략하기
2. 가로 스크롤 넣기
3. 여러 줄로 나오게 하기
4. 애초에 인풋에 넣을 수 있는 글자 수를 제한하기
이렇게 3가지 대응 방법을 생각했는데, 3번이 제일 나을 것 같았다. li를 display: flex 값을 주고 시간, 액션은 span 대신 div로 바꾼 다음 각각 flex-basis를 주었다. 그리고 액션이 들어있는 div는 word-wrap: break-word를 줘서 컨텐츠가 overflow되면 여러 줄로 나오도록 했다.
1. 삭제 버튼 누르면 리스트에서 안 보이게 하기
삭제 버튼마다 addEventListener를 하지 않고 맨 상위 부모에 이벤트 리스너를 붙여서 event delegation으로 삭제 버튼을 누르면 이벤트가 작동하도록 했다. 이벤트 객체를 활용하여 리스트에서 삭제하려는 엘리먼트를 선택(e.target.parentElement...)해서 remove()를 적용했다.
2. 삭제 버튼 누르면 로컬 스토리지에도 업데이트 하기
로컬 스토리지에 저장된 것을 가져온 다음, JSON.parse 해서 배열의 형태로 만든다. 인덱스를 이용하여 해당 배열에서 지우려는 데이터를 없앤 다음(.splice()사용), 이 배열을 다시 로컬 스토리지에 저장하였다.
3. 처음 접속했을 때, 로컬 스토리지에 저장된 데이터가 있으면 가져와서 보여주기
먼저 li 만들어서 ul 밑에 appendChild() 라는 함수를 별개로 만들었다. 그리고 로컬 스토리지에서 저장된 데이터가 있으면 그걸 가져와서 JSON.parse() 해서 배열의 형태로 만든 다음 forEach로 배열 1개 원소 마다 appendChild()하는 함수를 호출하여 하나씩 ul 밑에 li로 보이도록 하였다.
이 정도면 내가 처음에 구현하고 싶었던 기능은 다 구현했다고 생각한다. 추가로 더 구현하고 싶은 것이 있다면 라이트 모드/다크 모드로 전환하는 기능이다. 또한 코드를 좀 더 깔끔하게 개선할 수 있는지도 봐야겠다.
