Deep Dive CS 질문 리스트 2

⭐️⭐️⭐️

Q22. 아래 코드의 실행 결과를 예측하고, dog 인스턴스가 bark 메서드를 찾아가는 과정을 '프로토타입 체인' 관점에서 설명해주세요.

function Animal() {
  this.type = "Mammal";
}
Animal.prototype.move = function() { console.log("Moving..."); };

function Dog(name) {
  this.name = name;
}

// 상속 구현 (ES5 스타일)
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // (A)

Dog.prototype.bark = function() { console.log("Woof!"); };

const dog = new Dog("Pochi");

console.log(dog.type); // (1) 출력값?
dog.move();            // (2) 실행 여부?
console.log(dog.constructor); // (3) (A)줄이 없다면 뭐가 출력될까?

https://min-99.tistory.com/60

 

⭐️⭐️⭐️

Q23. (ES6 Class Internals) "자바스크립트의 Class는 단지 프로토타입의 문법적 설탕(Syntactic Sugar)일 뿐이다"라는 말에 100% 동의하시나요? ES5 생성자 함수와 ES6 Class의 결정적인 동작 차이 2가지를 설명해주세요.

https://min-99.tistory.com/61

 

⭐️⭐️⭐️

Q24. ES6의 Promise 체이닝 방식과 ES8의 Async/Await 방식의 가장 큰 차이점은 무엇인가요?

https://min-99.tistory.com/62

 

⭐️⭐️⭐️⭐️

Q25. 여러 개의 비동기 작업(API 호출 등)을 처리할 때, for 문 안에서 await를 사용하는 것과 Promise.all()을 사용하는 것의 차이는 무엇인가요? 또한, Promise.all()의 치명적인 단점은 무엇이며 이를 보완하기 위해 ES11(ES2020)에서 추가된 메서드는 무엇인가요?

https://min-99.tistory.com/63

 

⭐️⭐️⭐️

Q26. 한 컴포넌트 내에서 서로 의존성이 없는 3개의 API(유저 정보, 알림, 차트 데이터)를 호출해야 합니다. useQuery 훅을 3번 연달아 작성하는 것과 useQueries(혹은 Promise.all)를 사용하는 것의 차이점은 무엇인가요? 특히 React Suspense 모드를 사용할 때 발생할 수 있는 'Waterfall' 현상과 연관 지어 설명해 주세요.

https://min-99.tistory.com/63

 

⭐️⭐️⭐️⭐️

Q27. CRP(Critical Rendering Path, 중요 렌더링 경로)의 5단계에 대해서 아는 대로 자세하게 설명해주세요.

https://min-99.tistory.com/65

 

⭐️⭐️⭐️

Q28. 모바일 웹에서 메뉴 슬라이드 애니메이션을 구현했는데 버벅거림(Jank)이 발생했습니다. left 속성을 사용한 것을 확인하고 transform: translate로 변경하여 해결했습니다. 왜 left는 느리고 transform은 빠를까요? 브라우저의 '스레드(Thread)'와 '파이프라인' 관점에서 설명해 주세요.

https://min-99.tistory.com/66

 

⭐️⭐️⭐️

Q29. 아래 코드는 성능상 심각한 문제를 가지고 있습니다. 어떤 문제가 발생하며, 브라우저의 '렌더 큐(Render Queue)' 최적화 메커니즘과 연관 지어 설명해 주세요.

const box = document.getElementById('box');
for (let i = 0; i < 100; i++) {
  box.style.width = (box.offsetWidth + 1) + 'px';
}

https://min-99.tistory.com/66

 

⭐️⭐️

Q30. 웹접근성에 대해서 아는대로 설명해주세요

https://min-99.tistory.com/67