| layout | title | slug | tags | |
|---|---|---|---|---|
post |
2019-02-04-TIL |
190204-TIL |
|
-
투두리스트에 있는 투두를 클릭하면, 해당 투두의 배경 색이 바뀌고 투두 텍스트에 취소선이 그어지길 원했다. 그리고 다시 한번 클릭하면 원상태로 돌아오길 원했다. 처음에 예제 소스코드를 보고 떠올린 방법은 투두를 만드는 함수와 addEventListener("click", function)에서 넘겨주는 함수를 수정하는 것이었다. 투두를 만들 때 기본 flag(false값을 갖는)를 만들어주고, 클릭할 때 해당 flag의 값을 체크하여 false면 true로, true면 false로 변경해서 배경 색 따위의 style을 제어하는 방법이었다. 하지만 이는 몹시 번거롭다. 한 상태에서 다른 상태로 이벤트에 따라 번갈아가며 변하는 일종의 on-off 스위치같은 것인데, 분명 이를 손쉽게 해결하는 방법이 있을 것 같았다.
-
일단 내가 원하는 것은 내가 클릭한 투두가 사라지는 것이다. 삭제 버튼만 사라지거나, 리스트 자체(ol)가 사라지는 것이 아니라 투두(li)만 없애고 싶은 것이다. 이 때 필요한 것은 이벤트 객체다.
event.target.tagName을 통해 이벤트를 발생시킨 요소의 tag명을 알 수 있다. w3school 예제 사이트 -
소스코드를 보니
classList라는 프로퍼티가 있었다. 이 프로퍼티의 메소드 중toggle(class, true|false)가 내게 필요한 메소드였다. 이 메소드는 add, remove같은 메소드처럼 더하거나 삭제하기만 하는 것이 아니라 주어진 클래스가 있으면 해당 요소로부터 삭제하고, 없으면 생성한다. -
문제가 하나 남았다. 클릭했을 때
event.target.tagName이 "LI"인지 확인하여 맞다면 toggle해주는 함수를 실행시키는 addEventListener를 어디다 붙여줄 것인가? 제일 처음 떠올렸던 것은 투두를 만드는 함수에 해당 내용을 포함시키는 것이었다. 즉 만들어지는 모든 투두(li)는 addEventListener를 갖게되는 것이다.
하지만 반드시 그럴 필요가 있는가? 차근차근 생각해보면, 각 투두(li)는 리스트(ol)의 자식 요소들이다. 리스트(ol)에 addEventListener를 붙여도 아무런 문제가 없다. 어차피 클릭 이벤트가 발생할 때 event.target.tagName을 확인할 것이고 유저는 한 번에 하나의 투두를 클릭할 것이기 때문이다. 따라서 투두를 만드는 함수가 아닌 리스트(ol)에 익명함수로 붙여주었다.
- 전반적인 작성이 끝나고 나서 데스크톱에서 확인해보니, 투두리스트 박스가 브라우저 창 가로폭을 꽉 채우는 것이 살짝 불편해보였다. 최대 폭을 조정했다. 또한 기기의 너비에 뷰포트 너비를 맞추기 위해 meta 뷰포트 태그를 추가했다. {% raw %}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
max-width: 600px;
margin: 0 auto;
}
</style>
</head>{% endraw %}
-
한편 데스크톱에서는 문제없이 보였으나 모바일에서 보았을 때 투두 입력란과 add 버튼의 border가 둥글게 보여서, 각각 스타일에
border-radius: 0;을 지정해주었다. -
정말 간단해보이는 웹페이지인데 막상 만들어보려고 하니까 손이 참 많이 갔다. 또한 엄밀히 말해서 완성되었다고 말하기도 힘들다. 창을 닫으면 정보(추가한 투두)가 모두 증발하기 때문이다. 이제 여기에 mySQL과 장고를 붙여볼 생각이다.