자바스크립트 배우는 사람이라면 만들어보는 to do list... 나도 했다...!
📆 배포 사이트
DEMO는 여기에서 확인하실 수 있습니다.
API를 이용한 to do list를 만들어보기 전, 로컬 스토리지를 이용한 grocery를 만든 프로젝트랑 비슷하게 만들면 되지 않을까? 했는데 전혀 달랐다. html, css는 비슷하게 만들었긴 해
비동기, fetch, .. 아직도 잘 모르는 것 투성이지만 '일단' 만들었다.
✅ 배운 것
CRUD
CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다. 사용자 인터페이스가 갖추어야 할 기능(정보의 참조/검색/갱신)을 가리키는 용어로서도 사용된다.
분명 최우영 강사님 시간에 들은 얘기같았는데 이렇게나 새로운 이유는?
dayjs
날짜를 쉽게 가져올 수 있는 라이브러리.
Date() 생성자를 써서 가져오려고 하니 처리해줘야 할 단계가 제법 귀찮았다 많았다.
그에 반해 간단하게 날짜를 가져올 수 있는 dayjs. 설치도 간단하고 빨라서 쓰는데에 좋았다.
sortableJS
drag and drop을 쉽게 할 수 있도록 도와준다.
🐞 어려웠던 점
변수
변수명 통일하기, 오타 만들지 않기. 가장 기초적인 것인데도 하다보면 어느새 내 마음대로 만들고 있었다 (;;) 함수 제대로 만든것 같은데 왜 안돌아가지? 하고 한참을 헤매다 보면 결국 html에서 - 를 쓰고 스크립트 파일에 _ 로 가져온다던지..
예를 들어, 처음에는 delete 함수가 실행이 안되어서 할 일이 쌓이고 쌓여서 결국 200개를 돌파하는 상황이 발생했었다.
133개를 돌파했을 때의 상황.. deleteAll 로 지우려고 원기옥 모으는 중
로직
내가 지금 무슨 기능을 구현하고 있는지, 큰 틀을 세부적으로 구상하는 것이 힘들었다.
이미 추가한 to do item의 edit icon을 누르면, input에 focus가 되고 submit 버튼의 textContent가 edit이 되어 submit되도록 구현했는데, forEach 문으로 edit 버튼을 찾았기 때문에 반복문을 돌면서 선택하지 않은 다른 아이템들까지 수정되는 상황이 벌어졌다. submit 버튼은 이미 그려져 있는 요소이므로 render 밖으로 빼내도 되었기 때문에 오류를 고칠 수 있었다.
함수 재활용
중복적으로 써야하는 코드는 재활용하려고 노력했으나 생각보다 쉽지 않았다.
함수 짧게 쓰기
render 함수를 통해 to do 항목들을 그려주므로 edit, delete, info 에 관한 함수들을 render 함수 안에 넣을 수 밖에 없었다. 따라서 함수 길이가 상당히 길어지게 되었는데, (거의 100줄..?ㅜ) 쪼개려니 자꾸 오류가 나서 그냥 놔뒀는데, 다른 방법이 있을지 궁금하다.
👀더 알고 싶은 것
폴더 구조
- src
js(API, fetch.js...) .css 구현하는 로직 - public
정적인 index, image
내 마음대로 폴더 명을 지어서 넣는 것이 아니라 이것도 어떠한 규칙이 있다는 것을 알게 되었다. 나는 이번에 src 폴더밖에 만들지 않았지만 좀 더 알아봐야겠다!
REST API
