margin collapsing 현상에 대해 서술하세요.
두개 이상의 블록 요소의 상하 마진이 겹칠 때, 마진 값이 더 큰 값의 마진이 적용되는 현상으로 부모 요소의 flex, grid를 적용하면 이 현상이 나타나지 않습니다. 또 패딩이나 보더를 주는 방법으로 해결이 가능합니다.
button 태그와 input type="button"의 차이에 대해 설명하세요.
button 태그는 폼 태그 안에서 사용하면 기본 속성인 submit이 적용되어 클릭 시 폼이 제출됩니다. 또한 버튼 태그는 닫는 태그가 있어 하위 태그를 넣을 수 있고 input 태그는 그렇지 않습니다.
브라우저가 웹 페이지를 랜더링하는 과정을 설명해주세요.
브라우저 리플로우 현상에 대해 설명해 주세요.
브라우저 랜더링의 각 단계는 반드시 전 단계의 데이터가 필요하며,
html의 레이아웃이 변경될 경우 레이아웃 단계에서 랜더 트리가 재생성되며 이를 리플로우라고 합니다.
레이아웃에 변화를 주는 거의 모든 속성이 리플로우를 유발합니다. 이를 피하기 위해 GPU를 이용하는 transform 속성을 이용하여 레이아웃을 제어하는게 좋습니다.
클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요.
폐쇄된 공간안에 데이터를 접근할 수 있는 테크닉, 변수를 은닉화 하기 위해 사용합니다.
호이스팅(hoisting)이란 무엇인가요?
변수나 함수의 선언이 일시적 사각지대(TDD)에 들어가면서 Scope 최상단으로 끌어 올려지는 것으로 보여지는 현상을 말합니다.
JavaScript 엔진은 변수와 함수 선언을 스코프의 최상단으로 이동시키는 것처럼 작동합니다. 그러나 할당은 실제 코드 흐름에 따라 이루어집니다.
그러나 변수와 함수 선언에 let과 const가 사용된 경우에 이들은 TDZ(Temporal Dead Zone)라는 곳에 위치하게 되며, 실제 선언 위치 이전에는 접근할 수 없게됩니다.
변수가 선언된 시점과 초기화(첫 번째 할당)가 발생한 시점 사이의 공간을 의미합니다.
이벤트 캡쳐링과 버블링에 대해 설명해주세요.
브라우저가 이벤트 대상을 찾아갈 때는 가장 상위의 window 객체부터 document, body 순으로 DOM 트리를 따라 내려갑니다. 이를 캡처링 단계라고 합니다.
이때 이벤트 대상을 찾아가는 과정에서 브라우저는 중간에 만나는 모든 캡처링 이벤트 리스너를 실행시킵니다. 그리고 이벤트 대상을 찾고 캡처링이 끝나면 이제 다시 DOM 트리를 따라 올라가며 만나는 모든 버블링 이벤트 리스너를 실행합니다. 이를 이벤트 버블링 단계라고 합니다.
그리고 이러한 과정에서 이벤트 리스너가 차례로 실행되는것을 이벤트 전파(event propagation)라고 합니다.
이벤트 위임에 관해 설명해주세요.
이벤트가 발생하면 브라우저가 이벤트 전파를 통해 이벤트 발생 원점을 탐색하는 특성을 이용하여 부모의 이벤트 리스너를 통해 자식의 이벤트를 핸들링 할수 있는 테크닉을 의미합니다. 하나의 이벤트 핸들러로 여러 요소를 컨트롤 할 수 있다는 장점이 있습니다.
단점은
의도치 않은 이벤트가 발생할 수 있습니다. 때문에 적절한 위치에서 stopPropagation 메소드를 통해 이벤트 전파를 차단해야합니다.
이벤트 핸들러 내부에서 이벤트가 발생한 요소를 확인하기 위해 조건문을 사용해야 할 수 있습니다. 이로 인해 코드가 복잡해질 수 있습니다.
모든 이벤트가 이벤트 위임에 적합한 것은 아닙니다. 예를 들어, focus, blur, mouseenter, mouseleave 등의 이벤트는 버블링되지 않으므로, 이벤트 위임을 사용할 수 없습니다. (mouseOver/mouseOut 는 버블링이 된다.)이런 경우에는 각 요소에 직접 이벤트 리스너를 붙여야 합니다.
setTimeout과 promise의 콜백함수가 있을 때 어떤게 먼저 실행되는가?
자바스크립트는 싱글쓰레드 런타임 언어입니다.
이 말은 즉 자바스크립트는 실행될때 한 번에 한 가지 일만 할 수 있다는 의미입니다. (Single call stack)
우리가 내리는 모든 자바스크립트 명령은 메인쓰레드에 차근 차근 쌓여서 순서대로 실행됩니다.
이때 비동기적으로 실행되는 코드( setTimeout )가 있다면 그 코드는 메인쓰레드에서 task queue 라는곳으로 이동하여 대기하게 됩니다.
그리고 메인쓰레드에 있던 모든 명령들이 실행되어 텅비게 되면,
메인쓰레드를 감시하던 이벤트 루프가 테스크 큐에 있던 비동기 코드를 메인쓰레드로 이동시켜 실행하게 합니다.
순서는
명령이 메인쓰레드로 이동합니다.
메인쓰레드에 쌓인 순서대로 명령이 실행됩니다.
메인쓰레드가 clear 되면 이벤트 루프는 task queue 를 확인해서 실행 시킬것이 있는지 확인합니다.
이런 이유로 만약 timeout 의 타이머를 0으로 맞췄다 하더라도 우선 메인쓰레드에 있던 명령들이 전부 실행되고 나서 timeout 콜백 함수가 실행됩니다.
이때 만약 우리가 promise 를 사용하게 되면 콜백함수가 대기하는 곳은 테스크 큐가 아니라 마이크로 테스크 큐라는 곳에 추가됩니다.
마이크로 테스크 큐는 메인쓰레드가 클리어 되고 이벤트 루프가 테스크 큐를 확인 하기 전에 실행됩니다. 즉 앞에서 본 순서를 살짝 변경하면
순서는
명령이 메인쓰레드로 이동합니다.
메인쓰레드에 쌓인 순서대로 명령이 실행됩니다.
메인쓰레드가 clear 되면 마이크로 테스크 큐안에 있던 코드들이 실행됩니다.
이벤트 루프는 메크로 task queue 를 확인해서 실행 시킬것이 있는지 확인합니다.
이런 식으로 코드가 실행되기 때문에 promise 는 늘 timeout 보다 먼저 실행됩니다.
점진적 향상 기법이란 무엇인가요?
예전 브라우저 버전에서도 잘 동작하도록 구현하고, 최신 브라우저에는 최신 기술 제공하는 방법
우아한 성능저하란(graceful degradation)?
우아한 성능저하란(graceful degradation)? 최신 브라우저에서 최신 기술의 사용자 경험을 제공하지만 이전 브라우저에서는 더 낮은 수준의 사용자 경험으로 단계적으로 저하될 수 있도록 하는 방법입니다.
