꿈꾸는 개발자의 블로그

보호되어 있는 글입니다.

프론트엔드 개발자라면, 면접 질문으로 꼭 나오는 브라우저 렌더링 과정에 대해 정리해보았다. 그 전에 우리가 브라우저에 들어가서 어떻게 렌더링까지 수행하게 되는지 알 필요가 있다! 예를 들어, 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. 정규 표현식 깊은 복사 원시 타입의 값을 복..