자바스크립트 V8 엔진의 메모리 구조와 가비지 컬렉션

이 포스트에선 자바스크립트 V8 엔진의 메모리 구조가 어떻게 되어있고, 어떤 식으로 메모리를 관리하는지 살펴보겠습니다. 자바스크립트 V8 엔진의 메모리 구조 우선, 자바스크립트 V8 엔진의 메모리 구조는 아래 그림과 같습니다: V8 엔진에서 메모리는 크게 스택과 힙으로 구성됩니다: : 원시 타입 변수, 함수 인자, 객체를 가리키는 포인터 등이 저장되는 공…

Async 함수는 내부적으로 어떻게 동작할까?

가 내부적으로는 어떻게 동작하는지 브라우저의 이벤트 루프와 연관 지어 정리해보았습니다. 바벨 트랜스파일링 아래의 코드를 생각해봅시다: 위 코드의 실행결과는 다음과 같습니다: 어떻게 이런 동작이 수행되는지 차근차근 살펴보겠습니다. 우선, 바벨을 이용하여 위 코드를 가 지원되지 않는 환경에서도 동작하는 코드로 변환하면 아래와 같은 코드가 됩니다: 위 코드가 …

HTTP의 역사

HTTP란 무엇인가? HTTP는 Hypertext Transfer Protocol의 약자로, 이름에서 알 수 있듯이 처음엔 하이퍼텍스트 문서(링크를 통해 서로 다른 문서들을 연결한 문서)를 주고받기 위해 설계된 프로토콜입니다. 그래서 최초의 HTTP 버전은 오직 HTML 문서만 주고 받을 수 있었습니다. 하지만 사람들이 HTTP를 사용하다 보니, “HTM…

힙 정렬

힙(Heap)이란? 힙 정렬은 Heap이라는 자료구조를 이용한 정렬 알고리즘입니다. 힙에는 최소 힙(min heap)과 최대 힙(max heap)이 있는데, 이들은 값이 저장되는 방향만 반대일 뿐 성질은 동일합니다. 이때 힙(heap)은 complete binary tree를 기반으로 한 자료구조로, 다음의 힙 성질(heap property)을 만족합니다…

히든 클래스와 인라인 캐싱

이 포스트에선 구글 V8 엔진의 TurboFan과 같이, 대부분의 자바스크립트 엔진에서 성능 최적화를 위해 사용하는 히든 클래스와 인라인 캐싱 기법에 대해 간단히 알아보겠습니다. 히든 클래스 자바스크립트 엔진이 객체를 표현하는 방법 우선 자바스크립트 엔진이 어떻게 자바스크립트 객체를 내부적으로 구현하고, 또 객체 프로퍼티 접근 속도를 향상하기 위해 어떠한…

구글 V8 엔진 살펴보기

이 포스트에선 자바스크립트를 해석하여 실행하는 구글 V8 엔진을 살펴보겠습니다. V8 엔진은 대표적으로 구글 크롬 브라우저, Node.js 에서 사용되는 자바스크립트 엔진으로 C++로 작성되었으며, 오픈소스이므로 V8엔진의 코드를 여기서 보실 수 있습니다. 동작 원리 우선, V8 엔진의 구조는 아래 그림과 같이 나타낼 수 있습니다: 우선, V8 엔진은 자…

DNS란 무엇일까

DNS(Domain Name System)는 도메인 이름을 을 IP주소로 변환하는 분산 데이터베이스 시스템입니다. 인터넷에 연결된 모든 장치들은 각자 고유한 IP주소를 가지는데, 과 같이 숫자로 구성된 IP주소를 일일이 외우고 다닐 수는 없는 노릇이니(심지어 어떤 사이트의 IP주소가 바뀐다면 다시 외워야 함…) 일반적으로 우리는 과 같은 도메인 이름을 사…

TCP 3-way & 4-way handshake

TCP는 연결 지향(connection-oriented) 프로토콜이므로 TCP를 이용하여 데이터를 주고받기 위해선 먼저 클라이언트와 서버 간에 논리적인 연결이 수립되어야 합니다. 이 포스트에서는 어떠한 절차를 거쳐 TCP 연결을 맺는지, 그리고 어떠한 절차를 거쳐 TCP 연결을 끊는지 살펴보겠습니다. TCP 3-way handshake 우선, TCP 3-…

프론트엔드 생태계의 상태 관리 패러다임 변화

이 글은 Naver D2의 TECH CONCERT: FRONT END 2019 - 데이터 상태 관리. 그것을 알려주마를 요약 정리한 포스트입니다. FE에서 상태관리란? 프로트엔드는 더 이상 웹 페이지만 개발하는 것이 아니라, 구글 독스, gmail과 같이 웹 앱이라고 불리는 “애플리케이션”을 더 많이 개발하게 되었습니다. 이에 따라 사용자들이 모바일앱에 …

동일 출처 정책(SOP)과 CORS

이 포스트에선 브라우저의 보안 정책인 동일 출처 정책(Same-Origin Policy)과, CORS(Cross-Origin Resource Sharing)에 대해 알아보겠습니다. Origin 이란? 그 전에 먼저 출처(origin)란 무엇인가에 대해 살펴보겠습니다. 우선, URL의 구성 요소를 살펴보면 아래 그림과 같습니다: 위 그림에 있는 URL의 구…