목표
쉬프트 클릭을 통해 목록에서 여러 개를 선택할 수 있게 해보자.
레이아웃 베끼기 😅
강의에 준비된 예시 텍스트를 이용하기 위해 HTML은 자료를 그대로 사용했다.
스크립트와 스타일은 직접 작업했다. 가끔 제목과 파비콘을 정하는 데 너무 많은 시간을 쓰는 거 같기도 하다.
스크립트 작성
querySelectorAll을 이용해서 체크박스를 모두 배열로 받아온 후 클릭 이벤트를 감지해줬다. 이미 선택된 박스가 있고 쉬프트를 누른 채 추가로 선택한 경우에만 동시에 체크하는 함수로 넘어가고, 그 외에는 하나만 선택하는 경우로 보았다.
하나만 선택하는 상황에서는 클릭한 박스만 선택되도록 하고 지금 클릭한 박스를 시작점으로 기록해 둔다. 다른 박스의 선택을 해제하는 기능은 작동을 테스트하는 과정에서 확인하기 쉽도록 넣어보았다.
이미 선택된 박스가 있는 상태에서 쉬프트를 누른 채 하나를 더 선택하면 그 사이에 있는 것들까지 모두 선택되어야 한다. 이걸 어떻게 구현해야 하나 꽤 고민을 했는데 querySelectorAll이 알아서 배열로 정리해 주기 때문에 순서를 생각할 필요가 없고, 쿼리나 이벤트나 HTML 요소를 노드로 다루기 때문에 비교연산이 가능하다는 점이 핵심이었다. 그래서 배열을 순회하면서 체크 여부를 검사하는데, false인 상태에서 선택된 박스를 만나면 체크를 시작하고, 다시 선택된 박스를 만나면 체크를 끝내는 식으로 구현하면 되었다. 아이디어만 잘 떠올리니 코드로 옮기는 건 어렵지 않았다.
CSS 작성
강의에서 보이는 예시를 토대로 따라서 만들어 보았다.
색이나 크기 같은 걸 빼면 거의 비슷하게 만들어진 것 같아 만족스러웠다.
새로 알게 된 점
쉬프트 키를 감지하기 위해 키 이벤트를 등록하려다가 제발 검색부터 좀 하자고 다짐했던 게 생각나 찾아본 게 다행이었다. 클릭 이벤트에서 쉬프트 키를 자동으로 감지해준다는 걸 이용해 한결 간편하게 코드를 짤 수 있었다. 그걸 제외하면 이번 과제는 새로 배워서 활용한 것은 없었고 기능을 구현하기 위한 아이디어가 중요했다.
