Q. callback, promise, async/await의 차이점을 설명해보세요.
자바스크립트에서 비동기 처리를 하는 방법은 callback, promise, async/await이 있습니다. callback은 ES6 이전에 사용되던 처리 방식으로, callback 함수 내부에 다시 callback 함수를 사용하는 방식인데, callback의 개수가 많아지면 callback hell이 발생하게 되는 문제점이 있습니다. 이러한 callback의 단점을 보완하기 위해 ES6에 promise가 도입되었는데, callback에 비해 코드가 간결해지긴 하나, 모든 에러 처리가 마지막 .catch에서 처리가 되므로 어디에서 발생한 에러인지 명확히 알 수 없는 문제점이 있습니다. async/await은 promise의 단점을 보완하고자 ES8 버전에서 도입된 방법인데, promise와 동일한 동작이지만, 일반 함수처럼 동기적으로 작성할 수 있어 코드 가독성이 향상되고, try~catch 문으로 예외처리도 할 수 있다는 점이 장점입니다.
Q. 이벤트 버블링, 캡쳐링에 대해 설명해보세요.
HTML 요소에 이벤트가 발생할 경우 전파되는데, 전파 방향에 따라 버블링과 캡쳐링으로 구분됩니다. 버블링은 이벤트가 발생한 요소부터 window까지 이벤트가 전파되는 것이고, 캡쳐링은 window 부터 이벤트가 발생한 요소까지 이벤트가 전파되는 것입니다. 이벤트 전파 흐름은 크게 캡쳐링, 타겟, 버블링 3가지로 구분할 수 있는데, 처음에 캡쳐링이 일어난 후 타겟에 도달하면 이벤트가 다시 window 방향으로 버블링이 일어납니다.
FE developer