이것저것 프로젝트한다:: 투두리스트편(2)
레이아웃은 어떻게 정의하더라
저번에 투두 리스트를 이 정도로 만들어두었다. 지금 상태에서 끝내면 클론 코딩 그 이상도 이하도 아니다. 이 투두 리스트를 개선할 방법을 고민해보았다. 지금 상태에서 개선하고 싶은 점은 다음과 같다::
-편집 버튼 추가하기, 편집할 수 있게 만들기.
-focus(커서를 올려두었을 때를 의미한다. onfocus 이벤트라고 한다. onblur는 onfocus와 달리 focus를 잃었을 때 이용 가능하다.)되었을 때 해당 항목 글씨 사이즈 잠시 키우기
-투두 리스트 가로 사이즈 제한하기
-자바 스크립트 코드 쪽의 가독성을 위해 리팩토링하기 (불필요한 부분 삭제, 필요한 부분 함수화)
-엔터만 누르면 바로 항목이 생성되도록 코드 추가
가장 우선시한 것은 코드의 리팩토링이다.
제일 먼저 불필요한 변수 i를 삭제하고 myNodelist.length 대신 ‘let myNodeListItem of myNodeList로 수정하였다. 또, 형식이 중복되는 부분의 경우 하나의 함수로 바꾸어 경제성이 있도록 바꾸었다.
edit 버튼을 추가하며 CSS 역시 약간의 수정을 거쳤다. class Name이 edit일 경우 close의 옆에 위치하도록 CSS 코드를 추가하였다. 색 역시 칠해보았다.
수정한 코드는 다음과 같다::
지금까지 작성한 코드를 문서 하나로 정리하였다. (글리프 사이트의 html 블럭을 이용하면 편하다.)
edit 기능을 prompt 함수로 정리하였더니 glyph에서는 수정되지 않는다는 오류를 발견하였다. 이를 다른 식으로 수정해보아야겠다.
[참고 자료]
- 카테고리
- #기타
댓글 0
추천 포스트
