본문 바로가기

Frontend

[FE] HTTP/2 - HyperText Transfer Protocol (Version 2) 을 자세히 알아보자 HTTP/2 - HyperText Transfer Protocol (Version 2) 을 자세히 알아보자 HTTP/2 는 HTTP/1.1 보다 성능을 개선한 프로토콜입니다. HTTP/2 는 성능 개선에 집중하여 개발되었으며, 성능을 개선시킬 수 있는 기능들이 추가되었습니다. 기능이 추가되었다 해서 HTTP/1.1 의 URL 이나 Method 와 Header 같은 의미와 연관된 부분은 달라지지 않았습니다. 기존에 사용하던 메서드 (GET, POST 등) 와 헤더 (Content-Type, Authorization 등) 는 HTTP/2 에서도 HTTP/1.1 과 동일하게 사용 가능합니다. HTTP/2 는 클라이언트와 서버 간에 데이터를 주고 받는 과정과 네트워크를 통해 전달할 데이터의 형태를 집중적으로 개..
[FE] JavaScript 완벽 가이드, ECMAScript 를 읽는 방법 (2/2) JavaScript 완벽 가이드, ECMAScript 을 읽는 방법 저번 글 에서는 ECMAScript 를 읽기 위해 알아야 할 개념들을 소개했고, 이번 글에서는 ECMAScript 문서에서 자바스크립트 동작 원리를 파악하는 과정을 소개하도록 하겠습니다. const o1 = { foo: 99 }; const o2 = {}; Object.setPrototypeOf(o2, o1); o2.foo; // → 99 위 코드를 보면 Object.setPrototypeOf(o2, o1) 을 호출해서 o2 의 프로토타입을 o1 으로 설정했습니다. o2 의 프로토타입이 o1 이 되었기 때문에 o2 에 foo 라는 속성이 없어도 o2.foo 는 o1.foo 에 접근하여 값을 얻어 마지막 코드 o2.foo 의 결과가 o1...
[FE] JavaScript 완벽 가이드, ECMAScript 를 읽는 방법 (1/2) JavaScript 완벽 가이드, ECMAScript 을 읽는 방법 ECMAScript 는 완벽한 자바스크립트 가이드입니다. ECMAScript 가 자바스크립트 언어를 정의한 문서이며 표준이기 때문입니다. 모든 자바스크립트 엔진은 표준인 ECMAScript 에서 요구하는 사항은 반드시 구현해야 합니다. ECMAScript 를 읽고 싶어도 위 그림과 같이 특유의 단어와 문법으로 적혀 있어서 단순하게 읽을 수가 없습니다. 그래서 혹시 잘 정리한 문서가 있나 찾아봤지만 ECMAScript 에 추가된 새로운 기능을 소개하는 글만 있을 뿐, ECMAScript 를 구체적으로 설명하는 글을 찾을 수는 없었습니다. 그래서 제가 ECMAScript 을 읽다보니, 미리 알았으면 읽기 수월했을 개념들을 정리해서 글로 작성..
[FE] 브라우저 렌더링 Browser rendering - 5단계 변경 'change' 브라우저 렌더링 Browser rendering 브라우저는 'content (콘텐츠)' 를 'rendering (렌더링)' 해서 'pixel image(픽셀 이미지)' 즉 화면을 만듭니다. 브라우저 렌더링 Browser rendering - 0단계 소개 브라우저 렌더링 Browser rendering - 1단계 파싱 'parse' 브라우저 렌더링 Browser rendering - 2단계 스타일링 'style' 브라우저 렌더링 Browser rendering - 3단계 레이아웃 'layout' 브라우저 렌더링 Browser rendering - 4단계 페인팅 'paint' 브라우저 렌더링 Browser r..
[FE] 브라우저 렌더링 Browser rendering - 3단계 레이아웃 'layout' 브라우저 렌더링 Browser rendering 브라우저는 'content (콘텐츠)' 를 'rendering (렌더링)' 해서 'pixel image(픽셀 이미지)' 즉 화면을 만듭니다. 브라우저 렌더링 Browser rendering - 0단계 소개 브라우저 렌더링 Browser rendering - 1단계 파싱 'parse' 브라우저 렌더링 Browser rendering - 2단계 스타일링 'style' 브라우저 렌더링 Browser rendering - 3단계 레이아웃 'layout' 브라우저 렌더링 Browser rendering - 4단계 페인팅 'paint' 브라우저 렌더링 Browser r..
[FE] 브라우저 렌더링 Browser rendering - 2단계 스타일링 'style' 브라우저 렌더링 Browser rendering 브라우저는 'content (콘텐츠)' 를 'rendering (렌더링)' 해서 'pixel image(픽셀 이미지)' 즉 화면을 만듭니다. 브라우저 렌더링 Browser rendering - 0단계 소개 브라우저 렌더링 Browser rendering - 1단계 파싱 'parse' 브라우저 렌더링 Browser rendering - 2단계 스타일링 'style' 브라우저 렌더링 Browser rendering - 3단계 레이아웃 'layout' 브라우저 렌더링 Browser rendering - 4단계 페인팅 'paint' 브라우저 렌더링 Browser r..
[FE] 브라우저 렌더링 Browser rendering - 1단계 파싱 'parse' 브라우저 렌더링 Browser rendering 브라우저는 'content (콘텐츠)' 를 'rendering (렌더링)' 해서 'pixel image(픽셀 이미지)' 즉 화면을 만듭니다. 브라우저 렌더링 Browser rendering - 0단계 소개 브라우저 렌더링 Browser rendering - 1단계 파싱 'parse' 브라우저 렌더링 Browser rendering - 2단계 스타일링 'style' 브라우저 렌더링 Browser rendering - 3단계 레이아웃 'layout' 브라우저 렌더링 Browser rendering - 4단계 페인팅 'paint' 브라우저 렌더링 Browser r..
[FE] 브라우저 렌더링 Browser rendering - 0단계 소개 브라우저 렌더링 Browser rendering Rendering (렌더링) 은 여러 데이터를 모아 시각적인 이미지로 만드는 과정입니다. 브라우저는 HTML 과 CSS 같은 데이터를 '렌더링' 해서 픽셀로 구성된 화면을 완성합니다. 이를 브라우저 렌더링 (Browser rendering) 이라고 합니다. 이때 렌더링을 위한 데이터인 HTML / CSS / JavaScript / Media 등 일체를 통틀어서 'content (콘텐츠)' 라고 부릅니다. 브라우저는 'content (콘텐츠)' 를 'rendering (렌더링)' 해서 'pixel image(픽셀 이미지)' 즉 화면을 만듭니다. 웹 프론트 엔드 개발을 크게 보면 '..

티스토리툴바