7. 쓰로틀링과 디바운싱의 개념과 사용하는 이유 및 대표적인 사용처에 대해서 설명해주세요.
- 의도 : 성능 최적화 및 각 개념을 어디에 적용하면 좋을지 확인하는 질문.
두 개념 모두 특정 함수의 실행 빈도를 조절하는 기술이다.
먼저 쓰로틀링의 경우에는 일정 간격마다 함수를 실행하도록 횟수를 제한하는 기술입니다. 예를 들어 스크롤 이벤트처럼 순식간에 여러 번 실행되는 이벤트는 성능 저하를 일으키기 쉬운데요. 여기에 쓰로틀링을 적용해주면 스크롤할 때마다가 아닌 설정한 간격마다 함수를 실행하기에 불필요한 호출을 줄여 성능을 향상시킬 수 있습니다.
그리고 디바운싱은 연속된 함수의 호출이 들어올 경우 무시하고 있다가 제일 마지막에 호출된 함수만을 실행하도록 하는 기술입니다. 대표적인 사용처는 검색어 자동 완성입니다. 유저의 인풋 중간 결과는 중요하지 않기에 전부 스킵해버리고, 마지막 결과 값에 대해서만 자동 완성 결과를 보여주면 불필요한 검색 요청을 줄여 성능을 향상시킬 수 있습니다.
다시 말해 지속된 이벤트의 호출에서 중간 호출도 중요하면 쓰로틀링을, 마지막 호출만이 중요하면 디바운싱을 사용하는 것이 좋습니다.
8. 이벤트 버블링과 캡처링에 대해 설명해주세요.
- 의도 : 버블링과 캡처링으로 이벤트를 제어할 수 있는지 확인하는 질문
이벤트 버블링과 캡처링은 모두 이벤트가 전파되는 방식을 뜻합니다. 다만 서로 그 방향이 다르다. 버블링은 마치 거품이 수면으로 떠올라가듯이 이벤트가 전파되는 겁니다. 그래서 하위 요소에서 상위 요소로 이벤트가 전파되는 것을 버블링이라고 한다.
반대로 캡처링은 포착한다고 생각하시면 됩니다. 마치 카메라가 내가 보는 시야의 일부분을 포착해서 담듯이 이벤트가 전파되는 겁니다. 그래서 이번엔 상위 요소에서 하위 요소로 이벤트가 전파되는 것을 캡처링이라고 합니다. 이러한 특성을 잘 활용한다면 이벤트 위임을 구현할 수 있습니다.
9. 이벤트 위임에 대해 설명해주세요.
- 의도 : 이벤트 버블링과 캡처링에 대해 잘 이해하고 있는지 재확인 및 위임을 이용해 최적화를 할 수 있는지 확인하기 위한 질문
이벤트 위임은 하위 요소의 이벤트를 상위 요소로 위임하는 걸 뜻합니다. 하위 요소가 많을 경우, 이벤트를 등록하고 관리하는 건 힘든 일이 될 수 있습니다. 그래서 버블링과 캡처링을 활용해 상위 요소에 이벤트를 위임하고, 이벤트 함수 내에서 하위 요소를 판단하여 이벤트를 처리하면 성능을 최적화할 수 있는 장점을 가진 게 바로 이벤트 위임입니다.
10. 자바스크립트의 this가 어떤 값을 가지는지 각 상황을 가정하여 설명해주세요.
- 의도 : 각 상황에 따라 this의 변화를 이해하고 있는지 확인하기 위한 질문
모범 답안:
this는 호출되는 상황마다 서로 다른 값을 참조하고 있어 혼동하기 쉬운 값입니다. 우선 일반 함수를 호출할 때는 전역 객체인window를 뜻합니다.
그리고 객체의 메서드를 호출할 때에는 해당 객체를 의미합니다. 이어서 콜백 함수는 전달하는 곳은 상관이 없고, 함수가 실제로 호출되는 상황에 따라 달라집니다.
만약 호출하는 상황이 일반 함수라면 전역 객체를 가리키겠죠? 마지막으로 화살표 함수는 생성된 함수의 스코프에 따라 달라집니다.
예를 들어 객체의 메서드에서 화살표 함수를 만들어서 this를 호출했다면 생성된 함수의 스코프는 객체 스코프이므로 여기서this는 객체를 뜻하게 됩니다.
이러한this의 특징 때문에call,apply,bind같은 걸로this를 고정시켜주기도 하지만, 저는 저포함 동료 분들의 혼선을 피하기 위해this의 사용을 좀 지양하는 편입니다.
