custom event
페어였던 소피아 덕분에 커스텀 이벤트를 처음 사용해보았다. 애매하게 이해한 채 사용을 했는데 리뷰어님께 좋은 답변을 받아 남겨본다. 의존성을 없애기 위해서 사용한다 정도로 이해했는데 예시를 들어주셔서 조금 더 이해에 도움이 되었다. 커스텀 이벤트에 대해서는 조금 더 공부해보고 정리해봐야겠다.
미래를 생각하자!
step2를 제출하고 스스로 코드를 리뷰해보니 아쉬운점이 너무 많았다. 특히 이벤트 관련해서 위임을 사용할 수 있지만 이를 사용하지 않아서 복잡해진 코드들이 많았다. 결과적으로 탭의 개수가 더 늘어나도, 초기 선택 탭이 달라져도 유연하게 반응할 수 있는 코드로 변경하면 좋겠다는 리뷰를 받게되었다. 이에 대해서는 크게 고민하지 않고 작은 기능 구현에만 집중했었다. 확장성에 대해 고민을 하니 코드가 보기 좋아졌다. 작은 기능에 집중하기보다는 여러가지를 고려하고 시작해야겠다.
closest
기준 Element 에서부터 closest() 메소드를 통해 자신부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때까지 탐색한다(문서 루트까지 이동). 이 중 가장 가깝게 조건에 만족한 부모 요소가 반환되며, 조건에 만족한 요소가 없으면 null 값을 반환한다.
비디오의 값을 가져오기 위해서 parentNode를 사용했는데 closest를 사용하면 원하는 부모를 찾기가 더 쉬워진다.
https://developer.mozilla.org/ko/docs/Web/API/Element/closest
input type="search"
input에 x버튼을 추가하여 이를 클릭할 시 input 값들이 모두 삭제되게 하고 싶었다. 커스텀으로 만들 수 있지만 생각보다 조금 귀찮았다ㅎ 찾다보니 input tag 자체에서 이를 지원해준다고 한다. type="text"와 동일하게 작동하면서 입력값을 넣을 시 x 버튼이 생성된다. 앞으로도 자주 사용해야겠다
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
'우테코' 카테고리의 다른 글
| [Level 2] 미션 1: 페이먼츠 1, 2단계 (0) | 2022.05.16 |
|---|---|
| [Level 1] 미션 4: 자판기 미션 1단계 (0) | 2022.04.01 |
| [Level 1] 미션 3: 나만의 유튜브 강의실 미션 1단계 (0) | 2022.03.13 |
| [Level 1] 미션 2: 로또 미션 2단계 (1) | 2022.03.06 |
| [Level 1] 미션 2: 로또 미션 1단계 (2) | 2022.02.27 |