프론트엔드 실무 면접 준비 - JS/TS (2)

중요도가 높은 질문들 - ⭐

실무 면접을 여러 번 진행해보면서 받아본 질문들 - ✔️

---

16. 이벤트 버블링 & 캡처링 이란? ⭐

• 이벤트 흐름 : 캡처링 단계 → 타깃 단계 → 버블링 단계

• 캡처링 : 최상위 조상부터 해당 요소까지 이벤트 전파 과정

  • addEventListener의 capture option이 true 일 때, 이벤트를 잡아낼 수 있음

• 버블링 : 해당 요소부터 최상단 조상까지 부모 요소를 통해 이벤트가 전파되는 과정

  • focus등의 이벤트를 제외하고 모든 이벤트가 버블링 된다.

이벤트 위임

• 요소의 공통 조상에 이벤트 핸들러 하나를 할당해 여러 요소를 한꺼번에 핸들링하는 것

17. JS/TS에서의 데이터 형변환?

• 함수, 연산자에 전달되는 값은 적절한 dataType으로 자동 변환

  • JS는 동적 언어로, 런타임 시 변수의 타입이 결정
  • TypeError의 발생 가능성이 있음

• toString(), valueof() 를 통해 정해진 타입으로 반환 가능

• TS에선 변수의 타입을 명시적으로 지정 → 정적 에러를 줄임

18. Prototype?

• JS의 객체는 메소드 + 속성을 상속받기 위한 템플릿으로써 Prototype 객체를 갖는다.
• 객체 인스턴스와 Prototype 간 연결이 구성되어 Prototype Chain을 타고 올라가 Attribute, Method를 탐색

19. 깊은 복사와 얕은 복사? ⭐

• 얕은 복사는 객체의 주소 값을 복사

• 깊은 복사는 객체의 실제 값을 복사

  • ... spread 연산자는 깊은 복사

  A → B

  1. 얕은 복사

  • B 변경 시에 A도 같이 변경

  2. 깊은 복사

  • B 변경 시, A는 불변

20. Blocking 과 Non-Blocking ?

• Blocking : 직접 제어 불가능한 작업이 끝날 때 까지 대기
  • 함수에서 I/O 작업 등을 요청 → I/O 작업 처리 전까지 아무 일도 하지 못함
• Non-Blocking : 직접 제어 불가능한 작업이 완료 전에 제어권을 넘겨줌
  • 함수에서 I/O 작업 등을 요청시에, 작업 처리 여부와 관계없이 다음 작업 처리 가능

21. 동기와 비동기 ⭐ ✔️

• 동기 : 작업을 순차적으로 수행, Req → Res를 받아야 다음 동작이 이루어짐,
  어떤 작업이 수행 중이라면 뒤의 작업은 대기

• 비동기 : 작업을 병렬적으로 수행, 완료 순서가 보장되지 않음

• JS는 싱글 스레드 기반 동기적 작동

22. JS를 멀티 스레드 처럼 사용하는 방법은? ⭐

(JS에서 비동기 로직이 동작하는 방식은?)

• setTimeout, ajax, Promise 객체는 대표적인 비동기 로직

• Call Stack : 함수의 호출을 기록하는 스택 방식의 자료구조

• Promise, async/await과 같은 비동기 호출의 콜백함수들은 Microtask Queue에 담겨 실행된다.

• Event Loop는 현재 실행중인 Task가 있는지, Queue내에 Task가 있는지 주기적으로 확인하고, Call Stack에 Task가 없다면, Queue에서 Task를 꺼내와 Call Stack에 push

• 즉, 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고, 다음 코드를 먼저 실행하는 것이 JS의 비동기 처리

  • Promise 의 콜백함수는 Microtask Queue에 적재
  • async/await에선, await을 만나면 작업을 중지하고 Microtask Queue에 적재
  • WebAPI의 비동기 함수들 : ajax, fetch,setTimeout, setInterval 등...
    은 JS 엔진이 아닌 브라우저/런타임에서 멀티 스레드로 동작 → 작업이 완료되면 콜백함수가 Task Queue에 적재

23. JS의 메모리관리?

• 가비지 컬렉션 이라는 관리 방법 사용
  • Mark and Sweep 알고리즘 사용
  • roots 라는 오브젝트의 집합에서 참조하는 모든 오브젝트들을 찾아 닿을 수 없는 오브젝트의 메모리를 제거

24. JS에서 Class란?

• 함수의 한 종류, new와 함께 호출하지 않으면 에러 발생

25. map(), reduce(), forEach(), filter() 함수들을 설명해주세요.

• map() : 모든 요소 각각에 대해 콜백함수를 실행해 새로운 배열 생성
• reduce() : 각 요소에 대해 주어진 함수를 실행 후 하나의 결과값 return
• forEach() : 주어진 콜백을 각각의 요소들에게 실행, 원본 배열을 변경하지 않음

성능

• reduce > forEach > map

• filter() : 특정 조건을 만족하는 요소들로만 새로운 배열 생성, 원본 배열을 변경하지 않음