Interview (16) 썸네일형 리스트형 [Frontend] 브라우저 렌더링 과정 프론트엔드 개발자라면, 면접 질문으로 꼭 나오는 브라우저 렌더링 과정에 대해 정리해보았다. 그 전에 우리가 브라우저에 들어가서 어떻게 렌더링까지 수행하게 되는지 알 필요가 있다! 예를 들어, www.google.com에 들어갔다고 하자. 브라우저는 어떻게 동작할까? 주소창에 www.google.com을 입력하면, 도메인에 해당하는 부분을 IP주소로 바꾸기 위해 DNS 서버에 요청한다. 브라우저는 전달받은 IP주소로 웹 서버를 연결(TCP)하고, 해당 문서를 요청한다. (이 과정에서 웹 서버가 처리하지 못하는 동적인 요청은 웹 애플리케이션 서버(WAS)가 처리) 요청한 URL에 해당하는 모든 처리 결과를 브라우저에게 전달, 즉 서버로부터 응답받는다. 서버로부터 응답된 리소스에 기반하여 브라우저 렌더링 과정.. [Frontend] JavaScript : 이벤트 루프(Event Loop)란? 이벤트 루프 (Event Loop) 이벤트 루프는 자바스크립트 엔진이 아닌 런타임(browser, node.js)에서 가지고 있는 하나의 장치로써, 콜 스택과 태스크 큐(콜백 큐)를 감시하고, 콜 스택이 비어 있는 경우에 태스크 큐에서 태스크를 가져와 콜 스택에 넣어 주는 동작을 한다. 이벤트 루프가 동작하기 위한 2가지 조건! 이벤트 루프는 다음의 2가지 조건이 충족될 때, 태스크 큐(콜백 큐)에 있는 함수들을 콜 스택으로 순서대로 이동시켜 해당 함수가 호출되도록 한다. 1. 태스트 큐(콜백 큐)에 실행해야 할 함수가 있다. 2. 콜 스택이 비어 있다. [Frontend] JavaScript : 깊은 복사와 얕은 복사 + 불변성 깊은 복사와 얕은복사 자바스크립트로 구현을 하다보면 데이터 복사를 할 때가 있는데, 이 때 나오는 개념인 깊은 복사와 얕은 복사에 대해 정리해보려 한다. 간단히 요약하면, 깊은 복사는 실제 값을 복사하고 얕은 복사는 객체의 참조 값(주소 값)을 복사한다. 자바스크립트 데이터 타입에는 원시 타입과 참조 타입이 있는데, 이 때 원시 타입의 값은 깊은 복사를 하고, 참조 타입의 값은 얕은 복사를 한다고 보면 된다. 타입 원시 타입 (Primitive Type) 참조 타입 (Object/Reference Type) 종류 1. number 2. string) 3. boolean 4. undefined 5. null 6. symbol 1. 객체 2. 배열 3. 함수 4. 정규 표현식 깊은 복사 원시 타입의 값을 복.. [Frontend] JavaScript : 호이스팅(Hoisting)이란? 호이스팅 (Hoisting) 호이스팅이란 변수나 함수가 어디서 선언되든지 해당 스코프 최상단에 위치하게 되어 동일 스코프 어디서든 참조할 수 있는 것을 말한다. 간단히 얘기하면 변수나 함수가 선언된 시점보다 앞에서 사용되는 현상을 말한다. 자세히 얘기하자면.. 컴파일 단계 동안 코드가 실행되기 전에 변수와 함수 선언이 스캔된다. 모든 함수와 변수 선언들은 렉시컬 환경이라 불리는 자바스크립트 데이터 구조 내의 메모리에 추가된다. 그리고 소스 코드 내에서 실제 선언되기 전 일지라도 사용할 수 있게 된다. 즉, 코드 실행 전 이미 변수와 함수 선언이 저장되어 있기 때문에, 선언문보다 참조(호출)이 먼저 나와도 오류 없이 동작하게 된다. func1(); func2();// Uncaught TypeError! f.. [Frontend] JavaScript는 정말 싱글스레드일까? 자바스크립트 엔진은 하나의 메인 스레드로 구성된다. 콜 스택(Call stack)이라는 자료구조를 이용해서 명령문을 실행하며, 하나의 메인 스레드에서 하나의 콜 스택으로 모든 명령문을 순차적으로 실행하기 때문에 싱글스레드 언어라고 할 수 있다. 즉, 한 번에 하나의 일(작업)을 한다. JavaScript는 싱글스레드 언어이지만 실제로는 어떻게 멀티스레드처럼 사용할까? 비동기 함수 등의 문법으로 언어적 차원에서 병렬처리가 가능하다. 즉, Web API(setTimeout, XMLHttpRequest), Callback Queue, Event Loop로 인하여 멀티스레드처럼 보이는 것이다. 그렇다면 Event Loop는 무엇일까? 이벤트 루프(Event Loop)란? 자바스크립트 엔진이 아닌, 런타임(bro.. [CS] 네트워크 (2) : TCP 연결관리 TCP 연결관리 연결을 성립하고 해제하는 과정을 말한다. 2 way handshake 2-way handshaking은 서버와 클라이언트가 서로의 상황을 모른다는 점에서 문제가 있다. 클라이언트가 서버에 연결 요청 서버가 클라이언트에 응답 3 way handshake TCP는 정확한 전송을 보장해야 한다. 따라서 통신하기에 앞서, 논리적인 접속을 성립하기 위해 3 way handshake 과정을 진행한다. 클라이언트가 서버에 연결 요청 : SYN 보냄 (SYN=1, Seq#=client initial seq#) 서버가 요청을 받고, 클라이언트에게 잘 받았다는 신호로 응답 : SYN 받고, SYNACK 보냄 클라이언트는 서버가 준 응답을 잘 받았음을 서버에 응답 : SYNACK 받고, ACK 보냄 4-wa.. [CS] 네트워크 (1) : OSI 7계층 OSI 7계층 통신이 일어나는 과정을 단계별로 알 수 있고, 특정한 곳에 이상이 생기면 그 단계만 수정할 수 있기 때문에 7계층으로 나눈다. Layer 1. 전기신호를 사용하여 비트 스트림을 전송 Layer 2. 물리적인 네트워크 사이에 데이터 전송을 담당, 전송 오류 감지 (MAC 주소로 통신) Layer 3. 주소(IP)를 정하고, 경로(Route) 선택, 패킷을 전달 (데이터를 목적지까지 경로를 찾아 전송) Layer 4. 데이터 전송, 속도 조절 등 Layer 5. TCP/IP 세션을 만들고 유지, 종료, 복구 기능 ex. OS Layer 6. 인코딩 및 디코딩 암호화, Layer 7에서 데이터를 이해할 수 있게 변환, 포맷 구분 Layer 7. 사용자(어플리케이션)를 위한 인터페이스 지원, 네트.. [CS] 자료 구조 (4) : 해시 테이블 (Hash Table) 해시 (Hash) 해시는 색인 또는 인덱스이다. 해시 함수 (Hash Function) key로 해시를 만들어내는 함수이다. 해시 테이블 (Hash Table) hash를 주소로 삼아 데이터를 저장하는 효율적 탐색을 위한 자료구조이다. key와 value 쌍으로 이루어지며, 해시 함수를 통해 입력받은 key를 정수값(index)로 대응시킨다. 장점 key-value가 1:1로 매핑되어 있기 때문에 삽입, 삭제, 검색에서 평균적으로O(1)의 시간복잡도를 가지고 있다. 단점 해시 충돌(collision)이 있어날 수 있다. 순서/관계가 있는 배열에는 어울리지 않는다. 공간 효율성이 떨어진다. 데이터가 저장되기 전에 저장공간을 미리 만들어놔야한다. 공간을 만들었지만 공간에 채워지지 않는 경우가 발생한다. ha.. 이전 1 2 다음 목록 더보기
