위 포스팅은 W3C의 스펙과 구글 개발자 문서를 참고하여 작성되었습니다. Overview 효율적인 웹 페이지를 작성하기 위해서는 이 웹 페이지를 다운로드하고, 파싱 하고, 렌더링 해서 사용자에게 보여주는 일련의 과정들을 이해하는 것이 중요합니다. 따라서 이번 포스팅에서는 브라우저가 웹 페이지를 HTTP를 사용해서 다운로드하여 사용자에게 보여주기까지 어떤 과정들을 거치게 되는지를 살펴보려고 합니다. Process 브라우저가 HTML파일을 파싱 해서 DOM트리를 그리고 렌더링을 하는 일련의 과정을 살펴보기 전에, 먼저 조금 더 포괄적인 관점에서 이를 살펴보려고 합니다. 먼저 아래와 같은 간단한 상황을 가정해보겠습니다. 현재 있는 페이지(www.a.com) 에서 주소창에 주소를 입력하여 다른 페이지(www.b..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. Explain CSS Sprite and How does it enhance the performance. A. CSS Sprite란 웹사이트의 로딩 속도를 빠르게 하여 UX를 향상시키기 위한 최적화 기법 중의 하나로, 여러개의 이미지를 하나의 이미지로 합쳐서 관리하는 기술을 의미합니다. 브라우저는 웹사이트를 로드하는데 필요한 HTML파일, 이미지등의 리소스를 HTTP요청을 통해 가져옵니다. 이때 HTTP요청에는 오버헤드가 있기 때문에 이 요청을 최소화 하는 것이 브라우저의 로딩 속도를 줄이는데 큰 영향을 미칩니다. CSS Sprite는 페이지에 필요한 이미지들을 일일이 개별적인 HTTP요..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. What is Event Loop? (+ What is the difference between call stack and task queue?) A. 이벤트 루프(Event Loop)는 자바스크립트가 비동기 액션들(async, await, setTimeout, mouseClick)을 처리하는 방법을 제공합니다. 자바스크립트는 콜 스택이 하나입니다. 즉, 한번에 하나의 코드만 실행할 수 있다는 의미입니다. 이 때문에 "자바스크립트는 싱글 스레드 언어이다" 라고 이야기하기도 하는데, 엄밀히 말하면 이는 코드를 실행하는 콜 스택이 하나라는 의미입니다. (실제로 비동기 액션들을 처리하는 자바스크..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. What are the differences between variables created using let, var or const? A. var은 자바스크립트에서 기본적으로 변수를 선언하는 방식입니다. var를 이용해서 전역 스코프에 변수를 선언하면, 해당 스코프의 변수로, 함수 스코프에 변수를 선언하면 함수 스코프의 변수로 할당되게 됩니다. var를 통해 선언한 변수는 참조형이든, 원시형이든 상관없이 그 값을 바꿀 수 있습니다. 또한 var은 변수를 재선언할 수 있다는 독특한 특성을 지니고 있습니다. 따라서 다음과 같은 코드도 에러를 내뿜지 않습니다. var foo = 2; var f..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. Explain the differences on the usage of foo between function foo() {} and var foo = function() {} A. 자바스크립트에서 함수는 객체로 간주됩니다. (정확히 말하면 일급 객체 first class) 따라서 일반 객체처럼 값으로 취급될 수 있으며 다음과 같이 변수의 값으로 할당될 수 있습니다. var foo = function(){} 함수를 위와 같이 선언하는 방식을 함수 표현식(Function Expressions)라고 합니다. 그 외에도 자바스크립트에서는 다른 일반적인 프로그래밍 언어들과 같이 함수를 선언할 수 있..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. What's the difference between a variable that is: null, undefined or undeclared? A. javascript에는 truthy와 falsy라는 개념이 있습니다. Boolean Context에서 false가 아니더라도 false로 인정되는 값들을 의미하는데 javascript에서 falsy로 인정되는 값은 다음과 같습니다. false, 0, -0, 0n (Bigint), "", null, undefined, NaN 조건문에 넣으면 False로 간주되는 성질때문에 null과 undefined는 종종 비슷한 것으로 해석될 수 있습니다. ..