컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

정리하게 된 이유 자바 스크립트를 공부하다보면 생각나는게 있다. "자바스크립트는 객체에서 시작해서 객체로 끝난다." 객체를 상속하고 객체를 만들고 객체를 복사하고 객체를 구조화한다. 객체를 모르고선 자바 스크립트는 알 수가 없다. 하지만 자바스크립트에서 객체는 햇갈린다. 이미 블로그에서 객체를 여러번 정리했지만 정리할 때마다 객체가 조금씩 달라진다는 것을 느꼈다. 자료의 형태로서 객체, 구조적인 상황에서의 객체 모든 것이 미세하게 차이가 있었다. 그래서 물론 100% 맞지 않을지 모르지만 여기선 가급적 한 페이지 내에서 객체에 대해 정리하려고 한다. 객체(Object)란? 객체가 뭐냐하면 한마디로 정의할 수 없다. 왜냐면 상황에 따라 달라지기 때문이다. 1. Data Type으로서 객체 자바 스크립트에서..

자바스크립트 엔진의 런타임 자바스크립트 엔진은 소스코드를 실행할 때 파싱 후 AST를 생성하고 컴파일러, 인터프리터 방식을 거쳐 기계어를 CPU에 전달하여 소스를 실행한다. 기계어가 CPU에서 실행되면 자바 스크립트 엔진에서 무슨 일이 일어날까? 자바스크립트 엔진 런타임 중 상황 크롬의 V8 엔진 기준으로 자바 스크립트 코드의 런타임 중에는 위와 같은 상황이 벌어진다. 각각의 구조를 설명하면 다음과 같다. 1. Call Stack(스택 메모리, 선입후출, FILO) Call Stack은 코드 내의 함수를 임시로 저장하고 실행하는 역할을 한다. 자바스크립트는 단일 스레드 프로그래밍 언어다. 즉 단일 Call Stack(콜스택)이다. 그래서 Call Stack 내에서는 코드 내 함수를 한 번에 하나씩 실행하..

자바스크립트 엔진이란? 자바스크립트엔진이란 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터를 이야기한다. 이때 자바스크립트 엔진은 코드를 표준적인 인터프리터로 구현할 수도 있고 JIT 컴파일( 매번 모든 코드를 해석하는 것이 아니라 자주 쓰는 코드는 미리 저장해뒀다가 나중에 프로그램 실행 시 사용 )로도 구현이 가능하다. V8같은 경우는 엔진 내에서 컴파일, 인터프리터 방식 두 가지를 모두 지원한다. 자바스크립트 엔진들 자바 스크립트를 언어를 해석하는 자바스크립트 엔진은 굉장히 다양한 종류가 있는데, 대체로 브라우저에 탑재되기 때문에 브라우저 제작사마다 각자의 자바 스크립트 엔진을 쓰는 경우가 많다. 1. V8: 오픈 소스로 구글이 개발. 구글 크롬과 안드로이드와 Node.js에서도 사용된다. 2...

렌더트리와 그 역할 CSSOM과 DOM 트리는 결합하여 렌더 트리를 만들어낸다. 렌더 트리는 웹 페이지에 나타낼 각 요소들의 위치(Layout, 레이아웃)을 계산하는데 사용되고 픽셀을 화면에 렌더링하는 페인트(Paint) 즉 화면에 요소들을 표현하는 프로세스를 위해 존재한다. 렌더트리의 생성과 그 후 과정 렌더 트리는 DOM과 CSSOM의 결합으로 만들어진다. 1. DOM 트리의 루트(Document)에서 시작되어 단계별로 노드들을 배치한다. 이때 일부 노드(메타태그, 스크립트 태그) 등은 여기서 제외된다. 또한 CSS를 통해 숨겨지는 노드들도 여기서 제외된다. 2. 표시된 각 노드들에 대해 적절하게 맞는 CSSOM 규칙을 찾아 적용한다. 3. 표시된 노드들를 콘텐츠와 계산된 스타일과 결합하여 내보낸다...

CSSOM(CSS Object Model)이란? 웹 사이트를 브라우저상에 표현할 때 서버로부터 받은 정보를 브라우저가 렌더링 엔진을 통해 파싱하는데 이 때 두 가지가 요소를 파싱하는데 하나는 HTML, 또 하나는 CSS다. 이때 HTML을 파싱하여 자료를 구조화 한것을 DOM이라 하고 CSS 내용을 파싱하여 자료를 구조화한 것을 CSSOM이라 한다. 즉 DOM처럼 CSS의 내용을 해석하고 노드를 만들어 트리 구조로 만든 것을 CSSOM이라 한다. CSSOM은 왜 트리구조일까? 잘 생각해보면 CSS는 트리 구조일 필요는 없다. DOM의 경우 태그 별로 상하위가 이미 존재하고 문서 구조화를 통해 다양한 작업을 수월하게 할 수 있다. 하지만 스타일은 위아래가 없는데 트리 구조라는게 이상하다. 이는 CSS는 하..

DOM이란? 문서 객체 모델 DOM은 Document Object Model의 약자로 HTML, XML 문서의 프로그래밍 interface다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍언어(흔히 자바스크립트)가 DOM 구조에 접근할 수 있는 방법을 제공한다. 렌더링 엔진이 텍스트 파일로 이뤄진 문서를 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 사용하는 구조 모델을 DOM이라 한다. DOM트리란? 브라우저가 웹서버로부터 받은 정보는 복잡하게 섞여있다. 렌더링 엔진은 이것을 브라우저가 쉽게 이해하기 위해 정리한다. 그 과정에서 모든 요소, 요소의 어트리뷰터(속성), 텍스트를 각각의 개체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이..

브라우저 엔진이란? 웹 브라우저의 핵심이 되는 구성 요소다. 브라우저 엔진은 간단히 말하면 주로 HTML, CSS 등 웹 페이지 구성을 위한 자료를 해석하여 사용자의 장치에 맞게 시각적인 표현으로 변환하는 역할을 한다. 레이아웃 엔진? 렌더링 엔진? 브라우저 엔진은 레이아웃 엔진, 렌더링 엔진이라고도 불린다. 렌더딩과 레이아웃은 별도 엔진의 의해 관리될 수 있으나 실제로 이 둘은 서로 밀접히 연결되있고 브라우저 엔진과 같이 묶어서 이야기하는 경우가 많다. 렌더링이란? 사용자가 요청한 컨텐츠를 표시하는 역할을 한다. 예를 들어 HTML을 요청하면 HTML, CSS를 파싱하여 화면에 표시하는 역할을 한다. 브라우저 엔진 작동 방법 브라우저 엔진의 종류에 따라 다소 다르지만 대체로 아래와 같은 방법으로 동작한..

웹 브라우저란? 인터넷을 통해 웹서버의 모든 정보를 볼 수 있게하고 HTML 검색을 돕는 응용 프로그램이다. 웹 브라우저의 동작 방식 웹 브라우저는 인터넷 웹 서벗에 자료를 요청하기 위한 클라이언트 프로그램이다. 그림으로 나타내면 다음과 같다. 유저가 웹사이트에 접속하기 위해 브라우저에 주소를 입력한다. 그러면 브라우저는 주소에 맞는 웹 서버에 웹사이트 자료를 요청한다. 웹서버는 브라우저의 요청에 맞는 각종 웹사이트에 관련된 자료를 제공한다. 브라우저는 이 웹서버가 제공한 자료를 해석하고 화면에 구현하여 유저에게 정보를 제공한다. 실제로 우리가 보는 화면은 서버에서 바로 받아서 그 페이지를 그대로 보여주는 것이 아니다. 페이지는 화면 구현에 필요한 코드, 이미지를 브라우저로 보내고 브라우저는 그것을 해석..