📑프론트엔드 개발자 면접준비(2)

Q1. 클로저는 무엇이며 어떻게와 왜 사용하는지 설명해주세요.

• 클로저는 중첩된 함수를 이용해 사용하는 방법이며 실행 컨텍스트가 끝나도 변수에 접근 가능하게 해주는 기능.
• 주의해야할점: 메모리 누수
  
  

Q2. 호이스팅이란 무엇인가요?

• 호이스팅은 변수나 함수 선언이 스코프의 최상단으로 끌어올려진 것 같은 현상, 선언 이전에 변수나 함수에 접근하려고 할 때 오류가 나지 않음.
• 코드의 선언순서를 지키지 않아도 잘 되는 것처럼 착각할 수가 있다. 의도치 않은 에러를 발생시킬 위험이 있다.
• const, let은 선언이전에 사용하려고 하면 TDZ(일시적 사각지대)에 들어가서 에러가 난다. 함수와 변수가 선언된 시점과 접근하기 전 까지를 TDZ라고 한다. TDZ는 변수나 함수 선언 이전에 사용하려고 하면 에러를 낸다.
  
  

Q3. 이벤트 캡처링과 버블링에 대해 설명해주세요.

• 이벤트 캡쳐링은 브라우저에서 이벤트가 발생했을 때 캡쳐링을 상위노드에서 하위노드를 탐색해 나가면서 이벤트의 진원지를 찾아나가는 과정이다. 캡처링 단계에서 중간에 만나는 모든 캡처링 이벤트 리스너를 실행시킨다.
• 이벤트 버블링은 이벤트 진원지를 찾고 하위노드에서 상위노드로 나가는 과정이다. DOM 트리를 따라 올라가며 만나는 모든 버블링 이벤트 리스너를 실행한다.
• 이벤트 캡쳐링과 버블링을 합쳐서 이벤트 전파라고 한다.
  
  

Q4. 이벤트 위임(event delegation)에 관해 설명해주세요.

• 이벤트 위임은 이벤트가 발생하면 브라우저가 이벤트 전파를 통해 이벤트 발생 원점을 탐색하는 특성을 이용하여 부모의 이벤트 리스너를 통해 자식의 이벤트를 핸들링 할수 있는 테크닉을 의미한다.
• 하나의 이벤트 핸들러로 여러 요소를 컨트롤 할 수 있다는 장점이 있다.
• 단점:
  - 의도치 않은 이벤트가 발생할 수 있다. 때문에 적절한 위치에서 stopPropagation 메소드를 통해 이벤트 전파를 차단해야한다.
  - 이벤트 핸들러 내부에서 이벤트가 발생한 요소를 확인하기 위해 조건문을 사용해야 할 수 있기 때문에 이로 인해 코드가 복잡해질 수 있다.
  - 모든 이벤트가 이벤트 위임에 적합한 것은 아니다. 예를 들어, focus, blur, mouseenter, mouseleave 등의 이벤트는 버블링되지 않으므로, 이벤트 위임을 사용할 수 없다. (mouseOver/mouseOut 는 버블링이 된다.) 이런 경우에는 각 요소에 직접 이벤트 리스너를 붙여야 한다.
  
  

Q5. setTimeout과 Promise의 콜백함수가 있을 때 어떤 것이 먼저 실행되는가?

• 자바스크립트는 싱글쓰레드 런타임 언어이다. 이 말은 즉 자바스크립트는 실행될때 한 번에 한 가지 일만 할 수 있다는 의미이다. 우리가 내리는 모든 자바스크립트 명령은 메인쓰레드에 차근 차근 쌓여서 순서대로 실행된다. 이때 비동기적으로 실행되는 코드(setTimeout)가 있다면 그 코드는 메인쓰레드에서 task queue 라는곳으로 이동하여 대기하게 된다. 그리고 메인쓰레드에 있던 모든 명령들이 실행되어 텅비게 되면, 메인쓰레드를 감시하던 이벤트 루프가 테스크 큐에 있던 비동기 코드를 메인쓰레드로 이동시켜 실행하게 된다.
• 만약 우리가 promise 를 사용하게 되면 콜백함수가 대기하는 곳은 테스크 큐가 아니라 마이크로 테스크 큐라는 곳에 추가된다. 마이크로 테스크 큐는 메인쓰레드가 클리어 되고 이벤트 루프가 테스크 큐를 확인 하기 전에 실행된다.

  순서는

  1. 명령이 메인쓰레드로 이동한다.
  2. 메인쓰레드에 쌓인 순서대로 명령이 실행된다.
  3. 메인쓰레드가 clear 되면 마이크로 테스크 큐안에 있던 코드들이 실행된다.
  4. 이벤트 루프는 메크로 task queue 를 확인해서 실행 시킬것이 있는지 확인한다.
     -> 이런 식으로 코드가 실행되기 때문에 promise 는 늘 timeout 보다 먼저 실행된다.

Q6. 점진적 향상기법

• 예전 기술 환경에서 동작할 수 있는 기능도 구현해 두고, 최신 환경에서 동작할 수 있는 기능도 구현하여 더 나은 사용자 경험을 제공할 수 있도록 도와주는 방법

  <!-- 점진적향상기법 중 하나 -->
  <!-- picture: 환경에 맞게, 브라우저에 가장 어울리는 이미지를 선택할 수 있도록 만들어주는 요소. 
       picture라는 요소를 인터넷 익스플로러는 모름. 레거시 브라우저는 알 수없는 태그를 봤을 때 인라인 요소로 처리해버림
       (span요소처럼 처리) 따라서 picture, source는 작동하지 않음. img 태그만 작동)-->
  <picture>
      <source srcset="test.webp" type="image/webp">
      <source srcset="test.avif" type="image/avif">
      <img src="test.jpeg" alt="테스트 이미지입니다.">
  </picture>

Q7. 우아한 성능저하

• 최신 브라우저에서 최신 기술의 사용자 경험을 제공하지만 이전 브라우저에서는 더 낮은 수준의 사용자 경험으로 단계적으로 저하될 수 있도록 하는 방법.

  <!-- 우아한 성능저하: video, canvas와 같이 대체할 수 없는 기술을 사용할 때 씀 -->
  <!-- 만약에 브라우저가 video tag자체를 지원하지 않으면? -->
  <video>
      <source src="test.mp4" type="video/mp4">
      <source src="test.webm" type="video/webm">
      <p>
          사용하시는 브라우저가 비디오를 지원하지 않습니다. 업그레이드 해주세요.
          <a href="최신브라우저링크">여기에서 최신브라우저를 다운받으세요</a>
      </p>
  </video>

Q8. 우아한 성능저하와 점진적 향상 기법의 차이는 무엇인가요?

• 둘 다 최신 기술을 지원 하는 환경과 그렇지 못한 환경을 모두 대응 하려는 의도를 가지고 있는 방법론
• 점진적 향상은 기본적으로 제공하고자 하는 기능을 100% 제공 하면서 최신 환경에서는 그 이상의 사용자 경험을 제공하려 한다.
• 우아한 성능저하`는 제공하고자 하는 기능이 100%라면 구형 환경에서는 그 기능의 일부라도 제공하여 기능 정지라는 최악의 사용자 경험을 회피하고자 하는 의도를 가진다.
  
  

Q9. <script>의 async 속성과 defer 속성의 차이에 대해 설명해보세요.

• async는 스크립트를 다운로드됐을 때 곧바로 평가 실행하고 defer는 문서(HTML)을 완전히 다 읽은 후에 실행한다. async는 먼저 다운로드된 순서대로 실행하고 defer은 정의된 순서대로 실행된다.

• 돔을 사용하고 순차적으로 실행되야 한다면 defer (병렬로 다운하긴 하지만 실행은 선언 순서대로)
  돔을 사용하지 않고 실행 순서에 상관없이 스크립트를 병렬로 빠르게 로드하고 싶다면 async (Async 는 궁극적으로 코드를 실행하는데 빠르게 모든 준비를 마치기 위해서 만들어졌다.)

• 참고유튜브 영상