소개
HTML과 CSS강의를 듣고서 이렇게 끝나면 안되겠다 생각해서 복습하는 의미로 todo-list를 만들어보았습니다.
처음에는 간단하게 JS를 사용하여 LocalStorage를 사용하려 했는데 시작하다 보니 JS부분이 생각보다 많아 졌네요.
디자인
HTML 마크업과 CSS를 다뤄 웹페이지를 만들 수 있어 직접 디자인을 해보자 생각하였느데 생각보다 제가 생각보다 디자인 감각이 부족하더라구요.. :(
그리고 Figma를 직접적으로 다뤄야하기 때문에 공부할 여유와 시간이 부족하여 템플릿 디자인을 참고해서 Figma를 통해 간단히 수정하여 클론코딩을 진행하였습니다.
참고 : Figma-todo-templete
SCSS
강의에서 SCSS를 배웠었는데 과제를 할때 CSS로만 작성을 하게 되어 SCSS가 필요성을 더욱 간절히 느낀거 같습니다.
this와 비슷하게 자신을 선택할 수 있는 & 선택자는 개발 생산성을 더욱더 키워주었습니다.
CSS에서 개발자가 중복해서 작성해야 하는 부분을 tree 구조를 통해서 손 쉽게 작성할 수 있었고 부모와 자식 개념으로 조금더 구조화된 스타일 작업을 할 수 있었습니다.
JS
서버가 따로 구현되어 있지 않기 때문에 LocalStorage를 사용하여 Todo를 저장하는 방법으로 구현하였습니다.
처음에는 LocalStorage로 구현이 간단하게 될거 같았는데 작은기능이면서도 생각보다 신경쓸게 많았습니다.
UUID
서버 또는 데이터베이스를 연동하여 사용하면 PK(UUID) 값이 생성되어 각 데이터를 관리하게 됩니다.
js에서 라이브러리를 사용할 수도 있지만 순수 자바스크립트로 구현하고자 하여 Math.random 함수를 사용하여 UUID를 생성하였습니다.
문자열 저장
LocalStorage는 key value로 브라우저 내부에 저장되게 됩니다.
Map 또는 Object와 같이 key : value로 데이터를 저장하고 불러 오게 됩니다.
제가 저장해야 하는 데이터는 Todo obj를 가지고 있는 배열을 저장했어야 했습니다.
LocalStorage는 문자열만을 저장할 수 있기에 따로 포멧팅 작업이 필요 했습니다.
JSON.stringify()
- JSON 객체를 문자열로 변형시켜주는 함수입니다.
JSON.parse()
- 문자열을 JSON 객체로 변형시켜주는 함수 입니다.
keyEvent 딜레이
각각의 버튼과 텍스트 입력이 실시간으로 상호작용하도록 구현하려고 했기 때문에 todo 입력 이벤트와 동시에 저장이 되도록 구현하려고 했습니다.
그런데 key-event가 동작할때마다 저장을 하는 것은 나중에 서버 또는 데이터 베이스와 연동하였을때 문제가 있을거라 생각하여 다른 방법을 생각하여야 했습니다.
포탈사이트의 연관검색어 알고리즘이 입력의 지연시간을 주어 입력이 끝나면 동작하도록 구현되어 있다고 들었던 기억이 있어 지연시간을 추가하여 구현하였습니다.
- 딜레이 알고리즘은 구글링을 통해 구현하였는데 콜백 함수에 대한 이해가 아직 부족하여 추가로 공부가 필요할거 같습니다.
구현
깃허브 https://github.com/bbung95/todo-app
호스팅 https://golden-faloodeh-5e4aa9.netlify.app/
마무리
기능적인 구현과 완성이 목표였기 때문에 코드를 전반적으로 깔끔하게 작성하지 못한거 같습니다.
중복코드와 DOM제어 부분에서 리펙토링할 수 있는 부분이 많이 있다 생각하여 리펙토링과 추가 기능을 천천히 진행해보겠습니다.
간단히 배포도 진행하고 생각했던 기능과 디자인을 전체적으로 구현해보고 복습할 수 있어서 좋았습니다 😀
