질문 출처 : 프론트엔드 개발자 기술면접 인터뷰 질문 모음(업데이트)
1. 이벤트 버블링에 대해서 말해주세요.
이벤트 버블링은 DOM 요소에서 이벤트가 발생할 때, 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 현상을 의미합니다. 이러한 전파 과정은 해당 이벤트가 일어난 자식 요소부터 최상위 요소까지 전파됩니다. 그래서 의도하지 않은 동작이 발생할 수 있는데, 이러한 이벤트 버블링을 방지하기 위해서 이벤트 객체의
stopPropagation()메소드를 이용하면 이벤트 버블링을 막을 수 있습니다.
이벤트 버블링은 기본적으로 child → parent로 일어나는데 반대로 구현하는 법은 무엇인가요?
이벤트 버블링과 반대로 이벤트가 부모 요소에서 자식 요소로 전파되는 것은 이벤트 캡쳐링이라고 합니다. 이벤트 캡쳐링을 구현하려면, addEventLister 메소드의 세 번째 매개변수로 true 나 { capture: true } 를 설정해주면 됩니다.
이벤트 버블링을 막기 위한 방법은?
이벤트 버블링을 막기 위해서는 event.stopPropagation()을 사용하면 됩니다. 이 경우 클릭한 타깃에만 이벤트가 발생하고 상위 요소로 이벤트가 전파되는 것을 막을 수 있습니다.
2. 타입스크립트에 대해서 사용해본적이 있나요? 타입스크립트를 사용하면 좋은 점에 대해서 말씀해주세요.
타입스크립트의 장점은 크게 2가지가 있다고 생각합니다.
첫 번째로, 타입스크립트는 정적 타입 체크를 지원하여, 컴파일 단계에서 타입 에러를 미리 발견할 수 있습니다. 이로 인해 런타임 시에 발생할 수 있는 타입 관련 버그를 사전에 방지하게 해줍니다.
두 번째로, 타입스크립트는 코드의 가독성을 향상시켜 코드의 의도를 명확하게 전달하고 이해할 수 있도록 해주며, 코드의 유지보수성 또한 향상시킵니다.
3. 실행 Context에 대해서 설명해주세요.
실행 컨택스트는 코드가 실행되는 환경을 의미합니다. 실행 컨택스트는 변수, 함수, 객체 및 스코프 등의 정보를 저장하며, 실행되는 코드에 대한 환경을 제공합니다.
함수가 실행되면 함수 실행에 해당하는 실행 컨택스트가 생성되고, JavaScript 엔진의 콜 스택에 차곡차곡 쌓입니다. 실행 컨택스트가 생성될 때 스택의 가장 위에 쌓이게 되며, 해당 실행 컨택스트가 완료될 때마다 스택에서 제거됩니다. 이러한 스택 구조를 통해 전체 코드의 환경과 순서를 보장하게 됩니다.
실행 컨택스트에는 두 가지 유형이 있습니다.
- 전역 실행 컨택스트(Global Execution Context)는 JavaScript 코드가 실행되기 전에 생성됩니다. 전역 스코프를 생성하며, 전역 객체와 this 값을 설정합니다.
- 함수 실행 컨택스트(Functional Execution Context)는 함수가 호출될 때마다 생성됩니다. 함수 내부에서 선언된 변수, 함수, 매개변수 등의 정보를 저장하며, 해당 함수 스코프를 생성합니다. 함수 실행이 완료되면 해당 실행 컨택스트는 스택에서 제거됩니다.
4. 이터러블, 이터레이터 프로토콜에 대해서 말씀해주세요.
이터러블이란 반복이 가능한 객체를 말합니다.
이터러블은Symbol.iterator메소드를 가지고 있는데, 이 메소드는 이터레이터를 반환하여, 이터러블 객체의 각 요소를 반복할 수 있도록 해줍니다.이터레이터는 이터러블 객체에서 값을 순차적으로 가져오는 법을 정의합니다. 이터레이터는
next()메소드를 호출할 때마다 이터러블 객체에서 다음 값을 가져오고, 가져올 값이 없을 경우 done 프로퍼티가 true인 객체를 반환합니다.이터러블과 이터레이터 프로토콜을 사용하여, 다양한 자료구조를 반복할 수 있습니다. 예를 들어, 배열, 문자열, Map, Set, NodeList 등의 객체는 모두 이터러블 입니다. 따라서 for..of 루프나 전개 연산자, 구조 분해 할당 등을 사용하여 이러한 객체를 반복하고 다룰 수 있습니다.
5. 제네레이터에 대해서 말씀해주세요.
제너레이터는 이터레이터를 생성하는 함수입니다.
제너레이터 함수는 일반 함수와 다르게 실행 중에 중단할 수 있고, 다시 실행할 수 있는 함수입니다.
제너레이터 함수는function*키워드로 생성할 수 있으며,yield키워드를 사용하여 값을 반환합니다. 제너레이터 함수를 호출하면 이터레이터 객체가 반환되며, 이터레이터의next()메소드를 호출하여 제너레이터 함수를 실행할 수 있습니다.
function* generateSequence() {
yield 1;
yield 2;
yield 3;
}
const sequence = generateSequence();
console.log(sequence.next().value); // 1
console.log(sequence.next().value); // 2
console.log(sequence.next().value); // 3
새로운 지식배워갑니다 !!!