바닐라 JS 톺아보기

Flexbox와 Grid 레이아웃 시스템은 다릅니다.각각 어떤 프로젝트에 적합한지 사례를 들어서 설명해보세요.

• Flex : 1차원 레이아웃
  - 내비게이션 바, UI 컴포넌트, 정렬/간격
• Grid : 2차원 레이아웃
  - 웹사이트 전체 레이아웃, 이미지 갤러리, 대시보드 UI

---

position: absolute 요소가 기준 삼는 좌표계(containing block)는 어떻게 결정되는지 설명해보세요.참고 : containing block은 요소가 얼마나 크고 어디에 위치할지 결정할 때 참조하는 부모 박스.

• 가장 가까운 부모 노드 중 static이 아닌 요소
  - position 속성 : relative, absolute, fixed, sticky, (static)
• 없다면 초기 컨테이닝 블록 (viewport)

position:relative 사용하는 경우?
자식 요소를 부모 요소 안에서 자유롭게 배치하고 싶을 때
-> 부모에게 position:relative

---

DOM API에서 querySelectorAll이 반환하는 NodeList와 getElementsByClassName이 반환하는 HTMLCollection의 차이를 설명하세요.

• querySelectorAll() -> NodeList
  - static : 선택된 그 상태 보존
  • 모든 노드 타입 포함 (element, text, comment... )
  • forEach 사용 가능
• getElementByClassName() -> HTMLCollection
  - 실시간 상태 업데이트
  • element 노드만 포함
  • forEach 불가능 -> Array.from() 변환

---

이벤트 위임을 구현 했을 때, 자식 노드가 동적으로 추가되는 경우에도 이벤트가 동작하는 원리를 설명해보세요

• 이벤트 위임 : 자식 각각에 이벤트 리스너 x, 부모 요소에 하나의 리스너
  - 이벤트 버블링 때문에 자식 노드도 동작

1. 이벤트 발생: 사용자가 자식 요소 클릭
2. 버블링 : 자식요소에서 시작하여 부모 요소를 거처 최상단까지 올라감
3. 이벤트 감지 : 부모 요소의 이벤트 리스너가 이벤트 포착
4. 실제 타겟 확인(event.target) : 이벤트 최초 발생 자식요소 추적
5. 조건부 로직 실행 : event.target이 원하던 자식요소가 맞다면 로직 실행

---

async/await 구문이 사실상 Promise의 설탕문법(syntactic sugar)임을 코드 실행 순서 관점에서 설명해보세요.

• Promise의 Syntatic Sugar : 비동기 코드를 동기 코드처럼 보이게 만들어 가독성을 높여줌
  -> .then()과 동일하게 동작

1. async 함수 호출 시 내부 코드 실행
2. await 키워드 만나면 async 함수 일시 중단
3. Promise가 resolve 되기를 기다리는 동안 js 엔진은 다른 동기 코드 실행
4. resolve 되면 async 함수 다시 실행
   => 결과적으로 .then()과 동일하게 동작

---

자바스크립트에서 bind 메서드가 this 바인딩을 어떻게 고정시키는지, 화살표 함수와 비교하여 설명하세요.

• this : 함수 호출 방식에 따라 동적으로 결정

• bind 메서드 (Function.prototype.bind()) : 새로운 함수 반환
  - this값이 bind 첫번째 인자로 영원히 고정

  • 함수 즉시 실행 x

  • 한번 바인딩 된 this는 call()/ apply()로 변경 x

    const myModule = {
      name: 'My Module',
      greet: function() {
        console.log(`Hello, ${this.name}`);
      }
    };
    
    const unboundGreet = myModule.greet;
    unboundGreet(); 
    			// "Hello, undefined" (this가 window/global을 가리킴)
    
    const boundGreet = myModule.greet.bind(myModule);
    boundGreet(); 
    			// "Hello, My Module" (this파라미터 : myModule로 고정됨)

• 화살표 함수 Arrow Function
  - 자신만의 this 가지지 않음

  • 선언될 당시의 상위 스코프(lexical scope)에서 this 물려받음

  • call(), apply(), bind() 사용해도 this 바뀌지 않음

  • 직관적

    const myModule = {
      name: 'My Module',
      greet: function() {
        // setTimeout의 콜백은 일반 함수이므로 this는 window/global
        setTimeout(function() {
          console.log(`Hello, ${this.name}`); // "Hello, undefined"
        }, 100);
      },
      arrowGreet: function() {
        // 화살표 함수는 상위 스코프(arrowGreet)의 this를 물려받음
        setTimeout(() => {
          console.log(`Hello, ${this.name}`); // "Hello, My Module"
        }, 100);
      }
    };
    
    myModule.greet();
    myModule.arrowGreet();
    			```

---

setTimeout의 동작을 비동기 매커니즘(콜백큐, 콜스택, 이벤트 루프)으로 설명해보세요.

1. call Stack에 함수가 호출되어 들어옴
2. setTimeout : 브라우저 제공 기능 -> 타이머 설정
3. call back queue : 타이머 만료 시 call Stack -> callback queue
4. event loop가 call Stack, callback queue 감시
   call stack이 비면, callback queue 선입선출하여 call stack으로

=> 만일 call stack에 동기적 작업이 남아있다면 timer보다 늦어질 수 있음

---

vite, webpack등은 개발단계에서 npm run dev 와 같은 명령어를 통해서 개발합니다.이때 일어나는 일들을 예상해서 작성해보세요.

1. npm이 package.json의 scripts 섹션에서 dev 명령어 찾는다
2. vite는 개발용 웹서버 실행 -> 특정 포트로 프로젝트 접근
3. 의존성 번들링(vite) : npm을 미리 번들링 => 빠른 구동 속도
4. 브라우저가 페이지 요청, 서버가 index.html 전송
5. script 태그 요청, 서버 즉시 변환하여 전달
6. webpack : 메모리에 미리 다 저장, vite: 요청 파일만 변환
7. 프로젝트 파일 실시간 감시 => 개발자가 코드 수정 시 즉시 감지
8. Hot Module Replacement : 전체 페이지 새로고침 하지 않고 변경된 모듈만 실시간 교체

---

debounce, throttle에 대해 설명해보세요.

• debounce : 연이어 발생하는 이벤트를 묶어 마지막 이벤트가 발생한 후 일정 시간 지날 때까지 추가 이벤트가 없으면 한번만 실행
  - 검색창 자동 완성, 창 크기 조절
  • 실행을 미루다가 마지막에 한번만
• throttle : 연이어 발생하는 이벤트에 대해 일정 시간 간격으로 최대 한번만 실행하도록 제한
  - 무한 스크롤, 애니메이션
  • 일정한 간격으로 꾸준히