꿈꾸는 개발자의 블로그

프론트엔드 개발자라면, 면접 질문으로 꼭 나오는 브라우저 렌더링 과정에 대해 정리해보았다. 그 전에 우리가 브라우저에 들어가서 어떻게 렌더링까지 수행하게 되는지 알 필요가 있다! 예를 들어, www.google.com에 들어갔다고 하자. 브라우저는 어떻게 동작할까? 주소창에 www.google.com을 입력하면, 도메인에 해당하는 부분을 IP주소로 바꾸기 위해 DNS 서버에 요청한다. 브라우저는 전달받은 IP주소로 웹 서버를 연결(TCP)하고, 해당 문서를 요청한다. (이 과정에서 웹 서버가 처리하지 못하는 동적인 요청은 웹 애플리케이션 서버(WAS)가 처리) 요청한 URL에 해당하는 모든 처리 결과를 브라우저에게 전달, 즉 서버로부터 응답받는다. 서버로부터 응답된 리소스에 기반하여 브라우저 렌더링 과정..

이벤트 루프 (Event Loop) 이벤트 루프는 자바스크립트 엔진이 아닌 런타임(browser, node.js)에서 가지고 있는 하나의 장치로써, 콜 스택과 태스크 큐(콜백 큐)를 감시하고, 콜 스택이 비어 있는 경우에 태스크 큐에서 태스크를 가져와 콜 스택에 넣어 주는 동작을 한다. 이벤트 루프가 동작하기 위한 2가지 조건! 이벤트 루프는 다음의 2가지 조건이 충족될 때, 태스크 큐(콜백 큐)에 있는 함수들을 콜 스택으로 순서대로 이동시켜 해당 함수가 호출되도록 한다. 1. 태스트 큐(콜백 큐)에 실행해야 할 함수가 있다. 2. 콜 스택이 비어 있다.

깊은 복사와 얕은복사 자바스크립트로 구현을 하다보면 데이터 복사를 할 때가 있는데, 이 때 나오는 개념인 깊은 복사와 얕은 복사에 대해 정리해보려 한다. 간단히 요약하면, 깊은 복사는 실제 값을 복사하고 얕은 복사는 객체의 참조 값(주소 값)을 복사한다. 자바스크립트 데이터 타입에는 원시 타입과 참조 타입이 있는데, 이 때 원시 타입의 값은 깊은 복사를 하고, 참조 타입의 값은 얕은 복사를 한다고 보면 된다. 타입 원시 타입 (Primitive Type) 참조 타입 (Object/Reference Type) 종류 1. number 2. string) 3. boolean 4. undefined 5. null 6. symbol 1. 객체 2. 배열 3. 함수 4. 정규 표현식 깊은 복사 원시 타입의 값을 복..

호이스팅 (Hoisting) 호이스팅이란 변수나 함수가 어디서 선언되든지 해당 스코프 최상단에 위치하게 되어 동일 스코프 어디서든 참조할 수 있는 것을 말한다. 간단히 얘기하면 변수나 함수가 선언된 시점보다 앞에서 사용되는 현상을 말한다. 자세히 얘기하자면.. 컴파일 단계 동안 코드가 실행되기 전에 변수와 함수 선언이 스캔된다. 모든 함수와 변수 선언들은 렉시컬 환경이라 불리는 자바스크립트 데이터 구조 내의 메모리에 추가된다. 그리고 소스 코드 내에서 실제 선언되기 전 일지라도 사용할 수 있게 된다. 즉, 코드 실행 전 이미 변수와 함수 선언이 저장되어 있기 때문에, 선언문보다 참조(호출)이 먼저 나와도 오류 없이 동작하게 된다. func1(); func2();// Uncaught TypeError! f..

자바스크립트 엔진은 하나의 메인 스레드로 구성된다. 콜 스택(Call stack)이라는 자료구조를 이용해서 명령문을 실행하며, 하나의 메인 스레드에서 하나의 콜 스택으로 모든 명령문을 순차적으로 실행하기 때문에 싱글스레드 언어라고 할 수 있다. 즉, 한 번에 하나의 일(작업)을 한다. JavaScript는 싱글스레드 언어이지만 실제로는 어떻게 멀티스레드처럼 사용할까? 비동기 함수 등의 문법으로 언어적 차원에서 병렬처리가 가능하다. 즉, Web API(setTimeout, XMLHttpRequest), Callback Queue, Event Loop로 인하여 멀티스레드처럼 보이는 것이다. 그렇다면 Event Loop는 무엇일까? 이벤트 루프(Event Loop)란? 자바스크립트 엔진이 아닌, 런타임(bro..