본문 바로가기

개인공부57

브라우저의 렌더링 원리 렌더링이란? 렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다. 브라우저가 화면에 나타나는 요소를 렌더링할 때, 웹킷이나, 게코 등과 같은 렌더링엔진을 사용한다. 렌더링 엔진이 HTML, CSS, JavaScript로 렌더링할때 CRP라는 프로세스를 사용하며 6단계로 이루어져 있다. HTML 파싱 후, DOM트리 구축 CSS 파싱 후, CSSOM트리 구축 JavaScript 실행 DOM과 CSSOM을 조합하여 렌더트리를 구축 display: none 속성과 같이 화면에서 보이지도 않고 공간 차지하지 않는 것은 렌더트리로 구축되지 않는다. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다. ( Layout 단계 ) 계산한 위치/크기를 기반으로 화면에 그린다. .. 2022. 12. 28.
Directive의 설명과 타입, Built-in attribute directive 중 NgClass 활용법 Directive? Angular 어플리케이션 안에 있는 엘리먼트에 어떤 동작을 추가하는 클래스 Angular는 폼, 목록, 스타일 등에 적용할 수 있는 기본 디렉티브를 다양하게 제공한다. Angular Directive Type은 3가지로 구분할 수 있다. 컴포넌트(Component) - 템플릿이 존재하는 디렉티브이다. 가장 많이 사용되는 Type 어트리뷰트 디렉티브(Attribute directives) - 엘리먼트, 컴포넌트, 디렉티브의 모습이나 동작을 변경하는 Type 구조 디렉티브(Structural directives) - 조건에 따라 DOM 엘리먼트를 추가하거나 제거하는 Type Built-in attribute directives ( 기본 어트리뷰트 디렉티브 ) HTML 엘리먼트, 어트리뷰.. 2022. 3. 9.
Angular Component Component - Angular 애플리케이션 구성 기본 단위 화면을 렌더링하는 HTML Template 동작 정의 TypeScript Class Component를 Template에 추가할 때 사용하는 CSS Selector Component가 표시되는 모습을 정의하는 CSS 스타일 4가지로 구성된다. Angular CLI로 컴포넌트 생성 방법 ng generate component 명령 실행시 컴포넌트 구성 컴포넌트 이름으로 폴더가 생성 .component.ts 컴포넌트 파일 생성 .component.html 템플릿 파일 생성 .component.css CSS 스타일 파일 생성 .component.spec.ts 테스트 파일 생성 이렇게 만든 컴포넌트의 셀렉터는 이다. Component LifeCyc.. 2022. 3. 9.
TypeScript Type에 대한 이해 TypeScript의 Type은 Java와 상당히 다르다. 몇 가지 차이점을 살펴보자. 이름으로 구체화된 타입 시스템 (Nominal Reified Type Systems) Java 주어진 값과 객체는 'null', 원시 타입, 정의된 클래스 타입 중 하나의 타입을 가진다. 런타임 시점에 정확한 타입을 묻는다. 해당 시점에 GetType(), getClass()를 호출할 수 있다. 명시적 상속관계나 공통적으로 구현된 인터페이스가 없는 이상 클래스가 유사한 형태를 가졌다해도 대체하여 사용 불가 타입은 구조가 아닌 선언을 통해 연관 지어진다. TypeScript 타입은 어떤 형태로도 런타임에서 존재하지 않는다 유사한 형태를 가질 경우 대체하여 사용 가능 타입은 구조를 통해 연관 지어진다. 집합으로서의 타입 .. 2022. 3. 6.

티스토리툴바