나를 위한 면접 (Frontend Developer Interview Questions)
FE Interview Questions를 아는 만큼 답해보았다 지극히 주관적이라 정답이 아닐 수 있습니다
event delegation
사용자의 액션에 의해 이벤트 발생 시 이벤트는 document 레벨까지 버블링 되어 올라간다. 이 때문에 자식 엘리먼트에서 발생하는 이벤트를 부모 엘리먼트에서도 감지할 수 있다. 이러한 동작을 이용해 사용할 수 있는 방법이
event delegation
이다. 특정 엘리먼트에 하나하나 이벤트를 등록하지 않고 하나의 부모에 등록하여 부모에게 이벤트를 위임하는 방법
// 버튼마다 onClick Event Listener 등록
document.getElementById("btn1").addEventListener("click", (event) => {});
document.getElementById("btn2").addEventListener("click", (event) => {});
document.getElementById("btn3").addEventListener("click", (event) => {});
// Event Delegation
document.getElementById("div").addEventListener("click", (event) => {
switch (event.target.id) {
case "btn1":
break;
case "btn2":
break;
case "btn3":
break;
}
});
this는 어떻게 작동하는가?
-
Global Context: window
-
Function Context: "use strict" ? 실행 시 할당 : window
-
Object method: 자기 자신 객체
-
Object Prototype Chain: 자기 자신 객체
-
Getter, Setter: get 또는 set 되는 속성 객체
-
생성자: 생성된 자신
-
call, apply: 지정해 주는 객체
-
bind: 바인딩 될 때의 this
-
Dom Event: event.currentTarget === event.target === this
-
in-line Event: Element
prototype 기반 상속은 어떻게 하는가?
Object.create
로 prototype을 확장하던지 proto로 prototype link를 걸던지
AMD와 CommonJS는 뭐고 어떻게 생각하나?
- AMD: requireJS
- CommonJS: NodeJS 방식
결국엔 UMD 패턴으로 모듈을 만들어야한다. 둘 다 실무에서 쓰려면 번들링이 필요하고, Webpack 쓸 바에 두 개 다 필요없이 import 구문으로 처리하겠다.
다음 코드가 즉시 호출 함수 표현식(IIFE)로 동작하지 않는 이유?
Immediately Invoked Function Expression
// function foo(){}()
함수선언문을 어떻게 실행하냐 함수를 괄호로 감싸면 됨
null과 undefined 그리고 undeclared의 차이점
- null: 선언되었지만 값 없음
- undefined: 선언조차 안됨
- undeclared: 선언문 (var 등) 없이 전역변수로 할당되는 유효범위를 지정하지 않은 건데 린팅에 어긋남
클로져(Closure)는 무엇이며, 어떻게/왜 사용?
- 무엇: 초기화시의 상태를 내부에 가지고 있는 형태의 함수
- 어떻게:
return
으로 공개할 메소드 또는 데이터를 꺼냄 - 왜: private 기능 구현, for문에서 context 참조
익명함수(anonymous functions)는 주로 어떤 상황에서 사용?
- 함수 표현식 (변수로 함수 선언), callback
당신의 코드를 어떻게 구성하는지?
- ESLint airbnb + prettier + commitlint
호스트 객체 vs 네이티브 객체
- Host Objects: 사용자에 의해 생성된 객체
- Native Objects: 브라우저 또는 구동 엔진에 내장된 객체
다음 코드의 차이점?
function Person() {} // 선언문
var person = Person(); // 함수 표현식
var person2 = new Person(); // 생성자
.call과 .apply의 차이점?
call()
은 함수에 전달될 여러 개의 인자를 받는데 비해apply()
는 배열로 된 하나의 인자를 받는다
Function.prototype.bind?
- 호출될 때의 함수의 this 값을 넘겨준 값으로 바인딩
document.write()는 언제 사용?
- 스크립트 심을 때
document.write
는 block 되지 않으므로 - 근데
appendChild
로 심을 수 있어서 안씀
AJAX
- XMLHttpRequest 객체를 사용해 비동기 방식으로 서버와 통신을 하는 것
- 장점: 화면 전환 없이 특정 영역만 갱신 (업데이트) 가능
- 단점: 없음
JSONP vs AJAX
- JSONP는 스크립트 태그를 심어서 로드될 때 콜백 함수를 호출하는 거고
get
만 가능 Same origin policy
를 벗어날 수 있음
호이스팅
- 자바스크립트 엔진이 실행 컨텍스트를 생성하면서 scope 를 정의 할때
- 코딩 순서에 상관없이 선언부에 대한 처리를 맨 위로 끌어올려 먼저 해석하는 것
Event Bubbling
- 자식 이벤트가 부모로 전달 되는 것
event.stopPropagation
으로 막을 수 있음- 다른 리스너를 실행시키지 않는건
event.stopImmediatePropagation
속성(Attribute) vs 요소(property)
- Attribute: HTML 요소에 추가적인 정보 전달
- Property: Attribute에 대한 HTML DOM tree에서의 표현