Practice) To do List

design mock-up product

Github

 

설명

자바스크립트 강의를 수강하며, 클론코딩을 통해 학습한 강의 내용은 이해할 수 있었다. 하지만 배운 내용을 사용하여 스스로 기능을 구현하기에는 한계가 있다고 느꼈다. 그래서 학습한 내용을 복습한다는 생각으로 동일한 주제로 디자인하여 하나씩 구현해 보고자 시작하게 되었다. 그 첫 번째가 todo list이다.  
 

KPT(: Keep, Problem, Try)

버튼 이미지 넣기
: 별 버튼과 쓰레기통 버튼의 기능 구현이 잘 되지 않아 한참을 고생했다. 버튼 요소 내에 이미지를 넣었더니 버튼의 기능이 구현되지 않아서 이다. 오직 이미지와 버튼 사이의 공간을 클릭했을 때만 기능이 구현되었다. 해당 부분에 대해 구글링도 해보고 관련 강의도 다시 봤지만 해결되지 않아 조언을 구해 해결했다. 

  let target;
  if (e.target.tagName === 'BUTTON') {
    target = e.target;
  } else if (e.target.parentElement.tagName === 'BUTTON') {
    target = e.target.parentNode;
  }

아이콘을 눌렀을 때, img tag 또는 button tag가 잡히므로 상황에 맞게 target을 변경해 주는 방식으로 구현해 해결할 수 있었다. 
(이후, 아이콘을 버튼 중앙에 위치시키는 부분에 문제가 생겨 img tag 대신 background-img 속성을 이용하는 것으로 변경했다.)
 

input checkbox
checkbox에서 삽질을 너무 많이 해서 자기반성의 시간을 가질 수밖에 없었다. 체크박스의 상태에 따라 input tag에 checked 가 들어가는 걸 몰랐다.... 기억이 안 났으니 그냥 모른다고 하자. 분명 HTML/CSS를 할 때 직접 사용도 했고 상태에 따라 스타일링도 했는데, 블로깅도 했는데... 기억이 안 났다. 
기존 checkbox 대신 svg 코드로 상태를 표현하고자 했다. 기존의 checkbox는 'display: none'을 하여 화면에서 가려주었고 label tag에 스타일링하였다. db.json에 상태를 업데이트시켜 주고자 label tag에 checked 상태를 변수로 넣어주려 했지만 동작하지 않았다. 해당 값을 'console.log()'로 출력하니 undefined가 출력되었다. 몇 시간 씨름했지만 해결하지 못해 조언을 구했다. checked는 type이 'checkbox'인 input tag가 가지는 속성인 줄 몰랐냐고 안 배웠냐고 혼났다. (덕분에 checked 속성은 오래오래 기억할 수 있을 것 같다) 해당 부분은 input 대신 button으로 만들어 상태에 따라 boolean으로 데이터를 전달하는 방식으로 처리했다. 
 

회고
생각보다 시간은 오래 걸렸지만, 원하는 기능을 가진 product를 만드는 것에 흥미를 느껴 집중하여 만들 수 있었다. 부족한 점이 많아 수많은 에러를 만났지만, debugging 해 가며 에러를 해결하는 것도 나름 재밌었다. 물론 스스로 해결할 수 없는 부분들도 있었고 한 에러로 몇 시간을 고생하기도 했다. 하지만 구글링과 주변의 도움을 받아 문제를 해결할 수 있었고 문제를 해결하는 방법을 배울 수 있어 유익한 시간이었다.