상상코딩

JS는 싱글스레드 프로그래밍 언어이다. 싱글스레드는 한번에 하나의 일을 처리할 수 있는데, 이는 앞단의 작업이 끝날때 까지 어떤 작업도 수행할 수 없음을 의미한다. 이를 극복하기 위해 웹 브라우저를 포함한 다양한 JS 실행환경에서 비동기 방식으로 처리하기 위한 매커니즘을 제공한다. 그렇다면 JS를 동적으로 사용하기 위해서는 어떻게 해야할까? 비동기 처리 방식(Asynchronous) 비동기 처리 방식은 작업의 요청과 결과가 동시에 일어나지 않는 방식을 말한다. JS의 비동기 처리 방식은 아래와 같이 구현할 수 있다. function func1() { setTimeout( () => { console.log( 'func1' ) }, 10000 ); } function func2() { setTimeout(..

웹 브라우저는 url을 통해 서버에 요청을 하고 그에 따른 HTML응답을 받는다. 응답받은 HTML은 웹 페이지를 구성하는 여러 정보가 포함되어 있는데, 웹 브라우저는 어떤 과정을 거쳐 HTML을 웹 페이지로 표현하는지에 대해 정리한다. CRP(Critical Rendering Path) HTML은 웹 페이지를 구성하는 각 요소에 대한 정보와, CSS, JavaScript에 대한 정보를 포함하고있다. 하지만 그 내용은 평소 보던 웹 페이지와 많이 다르고 정보를 확인하기 어렵다. 또한 Javascript를 실행할 수 없기 때문에 HTML에 Javascript를 통해 구현한 여러 기능을 사용할 수 없다. 따라서 웹 브라우저에서 HTML을 웹 페이지로 변환하게 되는데, 이 과정을 CRP(Critical Ren..

웹 페이지는 HTML, CSS, JS를 통해 구성되어있다. 그 중 CSS에 대해 정리한다. CSS CSS (Cascading Style Sheets)는 HTML을 어떻게 표현할 것인지에 대한 방법을 기술하는 언어이다. 특정 엘리먼트의 색을 바꾸고, 글씨 크기를 조절하는 등 화면에 실제 어떻게 렌더링되어 표현할 것인지를 정의하는 역할을 한다. 이러한 CSS는 많은 특징을 갖지만 그 중에서도 가장 중요한 두 가지의 특징이 있다. 계단식 상속 마지막에 정의된 CSS가 실제 랜더링 시 적용 아래는 CSS의 특징에 대해 구현한 예제 코드이다. CSS 상속 Inline style은 가장 마지막에 적용된다 위 코드에서 CSS를 통해 div엘리먼트 font-size를 설정했다. 그런데 실제 화면에 랜더링 된 결과는 d..

웹 페이지는 HTML, CSS, JS를 통해 구성되어있다. 웹 페이지란 무엇이며, 그것을 구성하고있는 HTML에 대해 정리한다. 하이퍼텍스트(Hypertext) 우리가 사용하는 웹은 하이퍼텍스트(Hypertext) 구조로 구성되어있다. 여기서 하이퍼텍스트란 기존의 직선구조의 글과 달리, 다각적으로 정보에 접근할 수 있는 체계를 말한다. 하이퍼텍스트에는 하이퍼링크(Hyperlink)라는 중요한 개념이 포함 되는데, 이는 단편적인 정보들을 엮어 사용자가 필요한 정보에 접근할 수 있는 기술이다. 이러한 하이퍼텍스트의 특성으로 인해 사용자는 불필요한 정보를 필터링 할 수 있으며 필요한 정보에 빠르게 접근할 수 있다. 위는 하이퍼텍스트의 구조를 그림으로 표현한 것이다. 각각이 하나의 웹 페이지이며 하이퍼링크를 통..

웹 페이지를 구성해 서비스를 올리면 웹 브라우저에 의해 HTML영역과 CSS영역이 각각 DOM Tree, CSSOM Tree로 컴파일 되며, 적절한 선택자를 통해 Render Tree를 구성해 브라우저에 표현한다. 마찬가지로 개발자가 작성한 JS 코드가 실제 동작하기까지의 매커니즘이 있다. JS 엔진 JS 엔진은 종류에 따라 동작 방식과 매커니즘에 조금씩 차이가 있다. 그래서 웹 브라우저 중 점유율이 가장 높은 크롬에서 사용하는 V8엔진을 예로 본다. 웹 페이지가 컴파일 될 때, V8엔진은 JS 소스 코드를 파서(Parser)에게 전달해 추상 구문 트리(AST Abstract-Syntax-Tree)로 변환한다. V8엔진은 변환 된 추상 구문 트리를 바이트 코드로 변환한다. 개발자가 작성한 코드를 웹 브라..

웹 브라우저는 웹 페이지를 표현하기 위해 다양한 정보를 필요로한다. 웹 페이지를 표현하기 위해 웹 브라우저는 어떤 정보를 관리하고 있는지에 대해 정리한다. BOM BOM(Browser Object Model)은 웹 페이지가 구성되어있는 객체 모델들을 말한다. 웹 페이지를 구성하는 최상위 객체인 window객체 아래 document, screen, location 등 많은 객체 모델을 통틀어 BOM을 구성하는 객체 모델인 것이다. window window 객체는 웹 페이지를 구성하고 있는 모든 객체를 포함하는 최상위 객체이다. window 객체는 alert, prompt 등의 메소드를 내포하고 있으며 DOM, screen, location, JS Core등이 포함된다. 이러한 window 객체는 활성화 된..