프로그래밍 공부하기

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와 렌더러 프로세스사이의 동작을..

GC : Heap 영역에서 사용하지 않는 객체를 삭제하는 프로세스 Heap: Object 타입의 객체들 Heap의 구조 Young Generation : 새로운 객체들이 할당되는 영역 Eden Suvivor 0, 1 Survivor 0, 1 둘 중 하나의 영역은 비어있어야 한다. Old Generagtion : 오랫동안 수거되지 않고 살아남은 객체들이 존재하는 영영 meta space : GC 시에 필요한 클래스와 메서드의 요약정보가 있는 영역 GC의 수거대상 판별 GC의 루트로부터 참조하고 있는 객체들을 하나씩 탐색해나간다. GC의 Root : Stack 영역 데이터, Method 영역의 Static 데이터, JNI에 의해 생성된 객체 어떤 객체에 유효한 참조가 존재한다면 Reachable, 그렇지 않..

CORS 오류는 백엔드와 프론트엔드를 연동하려할 때 흔하게 볼 수 있는 오류이다. 이 오류가 왜 발생하는지, 어떻게 해결할 수 있는지 알아보자. SOP(Same Origin Policy) : 다른 출처의 리소스를 사용하는 것에 제한을 두는 보안 방식 Protocol-Host-Port가 같다면 같은 출처이다. IE는 Port가 달라도 같은 출처로 취급한다. Host는 String Value로 비교된다. http://localhost !== http://127.0.0.1 다른 출처 http://localhost/api/cors === http://localhost 동일 출처 SOP를 쓰는 이유 자신의 출처와 다른 곳에서 온 요청이 오면 안전한 요청인지 장담할 수 없기 때문에 CORS(Cross Origin ..

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

컴퓨터 프로그램을 다루다보면 프로그램 메인 화면에 별도의 창이 뜰 때가 있다. 이것을 보통 Modal 혹은 Dialog 라고 부른다. 그런데 자세히 생각해보면 어떤 Modal은 화면에 잠깐 떴다가 사라지고, 또 다른 Modal은 사용자가 확인을 누를 때까지 다른 작업을 수행할 수 없게 한다. 이러한 특징을 고려하여 Modal이라고 알고있었던 UI요소들을 분류해보자. Modal은 프로그램을 계속 진행하기 위해 사용자의 동작을 요구하는 창이다. 즉, Modal이 열려있는 동안 사용자는 다른 작업을 수행할 수 없으며, 다른 작업을 수행하기 위해선 Modal과의 상호작용을 통해 Modal이 닫히도록 만들어야 한다. 예를 들어 어떤 작업의 시작 전에 경고 Modal을 띄워서 작업 관련 설정을 하게할 때 쓸 수 있..