🌿 JavaScript
- Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요.
먼저 호이스팅은 '끌어올리다'라는 뜻으로, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어 변수의 선언을 항상 컨텍스트 내의 최상위로 끌어올리는 것을 의미합니다. var로 선언한 변수는 최상단으로 끌어올려져 undefined가 할당되지만, let으로 선언한 변수는 선언이 실행되기 전 까지 초기화 되지 않아 ReferenceError가 발생하게 됩니다.
Temporal Dead Zone은 직역하면 '일시적 사각지대'라는 뜻으로, 선언전에 변수를 사용하는 것을 허용하지 않는 공간입니다. 즉, 변수를 선언 및 초기화 하기전에 사용하게 되면 TDZ 상태에서 사용하는 것 이기 때문에 ReferenceError 에러가 발생하게 되었던 것입니다. 그래서 원치않는 오류를 방지하려면 var 사용은 피하고 let과 const위주로 사용을 해야합니다.
🌿 브라우저 렌더링
- 브라우저 렌더링 방식에 대해 설명하세요.
브라우저 렌더링 과정은 크게 파싱, 스타일, 레이아웃, 페인트, 컴포지션 5단계로 진행됩니다. 먼저, 브라우저는 서버로부터 웹사이트에 필요한 리소스를 다운받아 전달받은 HTML 파일과 CSS 파일을 파싱해서 각각 DOM Tree와 CSSOM Tree를 만듭니다. 그 후 두 Tree를 결합해 Render Tree를 만듭니다.
Render Tree에서 각 노드의 위치와 크기를 계산해 레이아웃을 결정하고, 결정된 레이아웃대로 각 노드를 화면상 실제 픽셀로 변환해 페인팅하여 레이어를 만듭니다. 마지막으로 레이어를 합성해 실제 화면에 나타나게 됩니다.
- 리플로우와 리페인트에 대해 설명하세요.
사용자가 브라우저 화면을 늘리거나 줄이는 등 다양한 웹 인터랙션으로 인해 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복해 수행하는 것을 리페인트라고 합니다.
플립북 처럼 한 화면을 끊김없이 보여주기 위해서는 여러 장의 레이아웃을 짧은 시간안에 처리해야 합니다. 리플로우 과정은 렌더링을 다시 하는 것이기 때문에 배치를 위한 연산을 해야 해 CPU를 많이 차지하고, 리페인트는 페인트를 다시 하는 것이라 픽셀을 다시 찍어 그려야하기 때문에 GPU를 많이 차지하게 됩니다. 그래서 프레임 드랍 현상이 발생할 수 있습니다.
이는 유저 경험에 좋지 않기 때문에 최적화가 필요한 부분입니다.
- 꼬리 질문 : 어떻게 최적화를 할 수 있을까요?
불필요한 레이아웃을 줄이고, 리플로우와 페인트를 발생시키는 속성들의 사용을 지양하는 등의 방법으로 최적화를 할 수 있습니다.
- 반응형 웹은 무엇이고 장단점에 대해 설명하세요.
반응형 웹이란, 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미합니다.
이는 전자기기의 발전으로 다양한 크기에서 웹페이지를 지원하기 위해 필요하게 되었고, 효율적인 유지보수와 검색 엔진 최적화에 유리하다는 장점이 있습니다. 반면, 모바일 전용 사이트에 비해서는 소스가 많아 속도가 저하되고 웹 브라우저 간 호환성이 떨어진다는 단점도 존재합니다.
따라서 좋은 프론트엔드 엔지니어는 사이트 속도롤 향상시키기 위해 이미지를 최적화해야 하며, 이외에도 다양한 최적화 방안을 끊임없이 고려해야 합니다.
🌿 번들링과 웹팩
- 번들링은 왜 필요한가요?
먼저, 번들링은 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음을 의미합니다. 번들링을 하지 않고 HTML, CSS, JavaScript 파일을 그대로 전송하게 되면, 여러 .js 파일에서 같은 변수를 사용하고 있을 때 충돌이 날 수 있으며, 용량이 크면 인터넷 속도가 느린 국가에서는 사용자 경험이 좋지 않게 됩니다. 또한, 배포 코드가 읽기 쉬워 사용자가 임의로 애플리케이션을 조작해 피해가 발생할 가능성도 있습니다. 즉, S/W를 잘 만들어도 사용자에게 원활히 배포하기 위해서는 번들링이 꼭 필요합니다.
