[JS] To Do List 프로젝트 +)글래스모피즘

3주차 과제로 간단한 투두리스트 앱을 만들어보게 됐다. 분명히 3주차에 바닐라 JS 초반 강의를 들으면서 오 투두리스트를 구현해보면 좋겠는데 생각했지만 이렇게까지 본격적이게 과제로 주어질 줄은 몰랐는데 만들어보고 싶다고 생각한 거라 몰라도 이렇게 저렇게하면서 재밌게 만들었던 것 같다. HTML/CSS로 보이는 것만 구현한다거나 JS를 공부하면서도 사실 SPA로 무언가를 이렇게 처음부터 끝까지 만들어본 경험은 처음이었기 때문에(물론 강의에서 알려주신 대부분의 내용을 기반으로 시작했음에도) 정말 엉망진창이었는데 여러 사람들의 도움을 받아가며.. 그래도 해냈다!

📝 구현 사항

• 유저로부터 입력받은 투두리스트의 내용을 유효 평가 후 Local Storage에 저장
• 유저가 특정 리스트를 클릭할 때마다 해당 리스트의 상태를 완료/미완료 상태로 toggle
• 리스트가 업데이트 될 때마다 완료된 리스트/전체 리스트 숫자 평가해서 렌더링
• 삭제 버튼을 누르면 Local Storage에서 해당 리스트 제거

대표적으로는 이렇게 네 가지였다.

📝 어려움을 겪었던 문제

• 추가한 리스트가 전부 로컬 스토리지에 저장됐음에도 불구하고 새로 접속해서 리스트를 추가하기만 하면 스토리지에 저장된 데이터가 모두 초기화 되는 이슈
  ▶ 접속 후 초기값을 매번 빈 배열로 세팅해 생기는 문제였기 때문에 아래와 같이 수정하여 해당 문제를 해결했다. 지금 보니 엄청 바보 같은 실수였다.

// 이전 코드
todoLists: [],

// 변경 코드
todoLists: initialState.length > 0 ? initialState : [],

• 리스트를 삭제 하면 화면에서는 삭제되지만 스토리지에는 계속 잔류하는 이슈
• 리스트의 상태가 toggle을 통해 완료 상태로 변경하기만 하면 기존에 스토리지에 있던 데이터들이 렌더링되지 않고 새로 값을 입력 받아야만 하는 이슈
  ▶ 해당 문제는 기존 코드에서 setItem 메소드가 실행될 때마다 기존에 가지고 있던 데이터들이 배열로 저장되기는 하나 todoLists(내가 할당했음..)라는 새로운 키를 가진 밸류로써 새롭게 스토리지에 저장되는 문제가 있었기 때문으로 추정되어 아래와 같은 코드로 수정하여 해결

// 이전 코드
localStorage.setItem(
       "todo-list",
       JSON.stringify({
         todoLists: this.state.todoLists,
       })
     );
     
// 변경 코드
const newState = [...this.state.todoLists];
localStorage.setItem("todo-list", JSON.stringify(newState))

📝 사용한 CSS 스타일

• :focus

input이나 div textarea에 입력 값을 받을 때 아무리 border: none;으로 설정해놓아도 클릭하면 보더가 생기는데 디자인적으로 굉장히 좋지 않다고 여겼다. 사실 CSS도 잘 쓸 줄 모르는 모지리라서 CSS에서 기본 스타일 외에 동작할 때 사용하는 건 커서가 올라오면 스타일을 변경해주는 :hover밖에 몰랐는데 찾아보니 :focus도 있어서 아래와 같이 처리해주었다.

    input:focus {
      outline: none;
    }

• autocomplete="off"
input form에 입력할 때마다 이전에 입력했던 기록(아마도 자동 완성 기능)들이 지저분하게 보이는 게 너무 싫었는데 이건 애초에 input 요소에 autocomplete 속성을 off로 처리해주면 깔끔하게 보이지 않았다.

• Glassmorphism CSS Generator : [링크]
  
  상위 요소의 배경을 하위 요소에 있는 이미지나 색상을 블러처리 된 형태로 만들어주는 Glassmorphism CSS Generator(*글래스모피즘 CSS 생성기)이다. backdrop-filter: blur() saturate() 를 이용해서 값을 생성해주는데 요즘 UI 트렌드에 아주 적합하다고 생각되어 적용해봤다. 제너레이터 사용도 간단하고 직관적이기 때문에 유사한 스타일이 필요할 때 사용해보면 좋을 것 같다.

사실 스타일을 제대로 입힐 생각은 없었는데 다른 분들이 제출하신 작업물들이 너무 멋져서 나도 지지 않겠어! 하는 마음으로 내 나름대로 스타일을 입혀봤다.

*글래스 모피즘 Glassmorphism : 2020년에 유행했던 뉴 모피즘 이후에 등장한 UI 디자인 트렌드로 그림자를 통해 요소 간의 차이를 주고 특정한 이미지나 색상 패턴 위에 약간 불투명한 플라스틱 혹은 유리 따위가 얹어져있는 것처럼 보이게 구현하는 스타일.