프로그래밍 공부하기

JS에는 일정 시간 후에 실행할 작업을 등록하는 몇가지의 메서드가 있다. 이들의 동작에 대해 정리해보자. 1. setTimeout & setImmediate setTimeout는 일정 시간 후에, setImmeiate는 일정 시간 간격으로 특정 작업을 반복하는 함수이다. 하지만, 실제로 작업이 동작한 시간을 살펴보면 실제 시간과는 약간의 차이가 있기도 하다. 그 이유는 무엇일까? 첫 번째로 타이머 함수들은 일정 시간 후에 해당 작업을 실행시키는 것이 아니라 작업 큐에 넣는 것이기 때문이다. 작업이 실행되기 위해선 작업 큐에서 꺼내져야 하므로, 작업의 등록 시간과 실행 시간은 차이가 발생한다. 두 번째로 타이머 스펙 때문이다. 타이머의 간격이 좁다는 것은 그만큼 CPU가 브라우저의 동작을 자주 살펴보아야하..

브라우저에서 JS 컴파일 방식은 일반적으로 인터프리터로 알려져 있다. 그러나 검색을 조금만 해보면 컴파일러처럼 최적화를 진행한다고 하기도 한다. 대체 JS 컴파일이 어떻게 진행되고 있는 것인지 조금 더 자세히 알아보자. 1. 인터프리터와 컴파일러 컴파일이란 A언어를 B언어로 바꾸는 과정을 의미한다. 일반적으로 컴파일이라고 하면 고급 언어를 컴퓨터(CPU/프로세서)가 이해하고 실행할 수 있는 기계어로 번역한다는 의미로 사용된다. 컴파일의 대표적인 2가지 방법은 컴파일러와 인터트리터이다. 컴파일러는 미리 모든 내용을 읽고 목적 프로그램을 생성한다. 그 후 필요한 라이브러리들을 엮는 링킹 작업을 거쳐 실행 프로그램을 생성한다.(링킹까지 합쳐서 컴파일러가 하는 일이라고 하기도 한다.) 반면, 인터프리터는 고급 ..

브라우저의 렌더러 프로세스가 서버로부터 받은 HTML, CSS, JS 등의 데이터를 조합하여 화면을 그리는 과정을 브라우저 렌더링이라 한다. 해당 과정은 렌더링 엔진(Webkit > Blink)과 엔진 내의 JS 인터프리터(V8)를 통해 이루어진다. 브라우저별로 렌더링 과정이 조금씩 다르다. 이 글에선 크롬 브라우저 렌더링 과정에 대해 정리해보고자 한다. 1. 데이터 파싱 렌더러 프로세스는 우선 HTML, CSS와 같은 문서를 브라우저가 이해하고 사용할 수 있는 구조로 변환한다. 파싱은 크게 토큰화와 트리 생성 2단계로 이루어진다. 토큰은 어휘 분석의 단위이다. 예를 들어 HTML 태그를 토큰화해보자. 우선 '' 문자를 만날 때까지 유지한다. 이런 식으로 새로운 문자 탐색 > 상태 변경 > 처리(Stac..

크롬 브라우저의 주소 표시줄에 URL을 입력하면 해당 페이지로 이동하게 된다. 이 과정에서 브라우저가 어떤 작업을 수행하는지 알아보자. 1. URL 입력 주소 표시줄에 URL을 입력하면 User Interface를 담당하는 브라우저 프로세스의 UI 스레드가 이를 감지하고 처리한다. 입력하는 도중에는 검색 기록에 기반하여 드롭다운 박스로 입력 값에 대한 제안을 주기도 한다. 입력 값에 대해 UI 스레드는 검색어인지 URL인지 판단한다. 검색어라면 사용자가 선택한 검색 엔진의 URL과 조합하여 새로운 URL 형태로 변환한다. URL인 경우 프로토콜과 포트와 같은 기본 요소들이 생략된 경우 이들이 기본 값인 것으로 가정한다. 만약 URL이 HSTS 목록에 있다면 https로 요청이 보내진다. 2. DNS 쿼리..

This란 함수 호출 시 실행컨텍스트가 생성되며 자동으로 Binding 되는 값으로, 호출된 함수가 속한 객체를 의미한다. This의 값은 함수 호출 방법에 따라 다르게 호출된다. 1. New Binding function Cat(name) { this.name = name; this.say = function() { console.log(`${this.name} says nyang!`); } } const nabi = new Cat('nabi'); nabi.say(); // nabi says nyang! new 키워드로 함수 호출 시 new 연산자가 빈 객체를 메모리 상에 생성 후 this에 바인딩 시킨다. 함수를 실행시키며 this의 속성을 채운 후 함수가 리턴하는 것이 없다면 만들어진 this가 리..

웹 브라우저란 인터넷에서 사용자의 요청에 따라 HTML, 그림, 미디어 등의 자원을 서버에 요청하고 화면에 표시해주는 응용 프로그램이다. 대표적으로 크롬, 파이어폭스, 사파리 등이 있다. 특히 크롬을 중심으로 웹 브라우저는 어떻게 구성이 되어있고, 어떤 동작을 하는지 내가 이해한 바를 정리해보고자 한다. 1. 브라우저의 구조 브라우저의 구조는 제품 별로 조금씩 다르지만 위 그림의 요소들을 포함하고 있다. 위 요소이 모두 동급의 프로세스 혹은 스레드라기 보단 이러한 역할을 하는 요소들이 존재한다라는 식으로 이해하면 좋을 것 같다. User Interface : 주소 표시줄, 이전/다음 버튼 등 컨텐츠를 보여주는 부분을 제외한 곳 브라우저 프로세스 : User Interface와 렌더러 프로세스사이의 동작을..

컴퓨터의 구성요소 중 CPU는 우리의 뇌와 같다. CPU 코어가 여러 개 있다는 것은 여러 개의 뇌로 연산을 할 수 있다는 것과 동일하다. 예를 들어 24158325497 같은 수가 소수인지 아닌지를 하나의 코어가 있을 때보다 여러 개의 CPU를 활용할 때 훨씬 빠르게 계산할 수 있다. NodeJS의 가장 큰 장점은 싱글 스레드(개발자가 다룰 수 있는 부분)이기 때문에 멀티 스레드처럼 공유 자원의 경쟁 문제 등에서 자유롭고 좀 더 쉬운 프로그래밍이 가능하다는 것이다. 반면, 싱글 스레드이기 때문에 하나의 CPU만 활용할 수 있다는 단점이 있다. 따라서 CPU 집약적 작업을 처리하는 NodeJS 서버에 많은 요청이 동시에 들어왔을 때 서버 컴퓨터가 이들을 빠르게 연산할 수 있는 조건이 됨에도 불구하고 이를..

코딩을 하다보면 Call By Value와 Call By Reference 라는 말을 들어본 적이 있을 것이다. 나는 지금까지 Call By XXX은 함수의 인자로 전달되는 타입에 따라 다르다고 생각했다. Primiteve Type을 넣으면 Call By Value, Reference Type을 넣으면 Call By Reference와 같은 식으로 말이다. 하지만 엄밀히 말하자면 대부분의 프로그래밍 언어는 Call By Value 이다. 왜 그런 것인지 알아보자. 1. Call By Value function addTwo(x) { x -= 1; console.log(x); } let x = 10; addTwo(10); console.log(x); // output: 10 Call By XXX과 같은 말은..

node express는 라우팅 및 미들웨어로 이루어진 서버 개발 프레임워크이다. 서버는 기본적으로 사용자의 요청을 받으면 이에 대한 응답을 주는 구조로 되어있다. express 에서 클라이언트의 요청은 미들웨어들을 거쳐 서버의 처리 로직으로 전달된다. 즉, 미들웨어는 클라이언트의 요청과 서버의 처리 로직 사이의 경유지라 말할 수 있다. 1. 미들웨어의 형태 const middle1 = (req, res, next) => { next(); }; 미들웨어 함수는 요청 객체(req), 응답 객체(res), 다음 미들웨어에 대한 호출을 인자로 갖는 함수이다. 미들웨어 함수는 req를 통해 요청 데이터에 접근 가능하고, 응답 객체를 이용하여 클라이언트에게 응답을 줄 수 있다. next를 호출하여 다음 미들웨어를..

JavaScript로 비동기 작업을 JS 런타임에서 처리 후 연결된 콜백 함수를 JS 엔진의 콜스택으로 적절한 타이밍에 적재시키기 위한 장치가 Event Loop이다. 이벤트 루프에 의해 JS 엔진의 콜스택에 적재되기 전 콜백함수가 대기하고 있는 곳을 Callback Queue 혹은 Task Queue라고 한다. 태스크 큐는 2가지 종류의 우선순위 큐로 구성되어있으며, 두 개의 큐 간에도 우선순위가 존재한다. setTimeout(() => { console.log('A'); }, 0); Promise.resolve() .then(() => { console.log('B'); }) .then(function() { console.log('C'); }); console.log('D'); 위 코드의 출력결과는..