본문 바로가기

Develop/Frontend 가이드

[FE] Typescript - Type Guard 타입 가드 TypeScript - Type Guard 타입 가드 TypeScript 에서의 타입은 다른 언어와 의미가 다릅니다. 다른 언어에서 타입은 객체가 반드시 지켜야 하는 계약이라면, TypeScript 에서 타입은 객체에 대한 약속입니다. 다른 언어는 타입에 민감해서 타입이 맞지 않으면 사용할 수 없습니다. 하지만 TypeScript 에서 타입은 약속이고, 약속을 지키지 않는 객체에 접근해도 에러가 발생하지 않을 수 있습니다. 다만 컴파일할 때 개발자에게 문제가 있을 수 있다고 알려줍니다. 이처럼 TypeScript 의 타입은 유연하게 사용할 수 있는 특징이 있습니다. TypeScript 는 타입을 조합하여 사용할 수 있습니다. 그래서 아래와 같이 매개변수의 타입이 number 일수도 있고, string 일..
[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 - 4단계 페인팅 'paint' 브라우저 렌더링 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..

티스토리툴바