[ 엘리스 SW 엔지니어 트랙 ] 39일차 TLDR

📍 39일 차 12.17. 금. 프로젝트 4일 차 TLDR

728x90

1. addEventListener의 event 타입 전달 시 on 접두사를 제외하고 사용한다.(예. onchange -> change, onclick -> click, oninput -> input)
2. event 중 change 이벤트는 요소가 포커스를 잃을 때까지 이벤트가 실행되지 않고 다른 곳을 클릭하면 이벤트가 트리거 되는 반면, input 이벤트는 요소가 변경될 때마다 이벤트가 트리거 된다.
3. 자동완성 기능에 addEventListener를 적용할 때 change와 datalist+option을 사용하면 debounce를 적용하지 않아도 된다. (change 이벤트는 요소의 포커스가 잃을 때 적용되기 때문에 글씨가 입력하는 중간에 이벤트가 발생하지 않는다.) 하지만, UI수정이 자유롭지 못하다. 반면, input 이벤트에 자동완성 기능을 직접 구현한다면, debounce로 최적화를 시켜주자(input 이벤트는 입력할 때마다 이벤트가 일어나기 때문) UI수정은 datalist+option방법보다 비교적 자유롭다.
4. debounce: 일정 시간 안에 연속적인 이벤트가 발생하면 일정 시간 이후에 한 번만 실행된다. 예를 들어 input 값을 api 통신할 때
5. trigger: 일정 시간안에 연속적인 이벤트가 발생하면 일정 시간 내 딱 한 번만 이벤트가 실행되는 기법
6. 배열의 값을 변경해서 적용할 때는 map을, 배열을 순회하면서 변수를 뽑아내려고 하면 forEach를 사용하자