# WEB과 한걸음 가까워지기
# 프론트엔드의 기본 구성 알아보기
# 프론트엔드의 프레임워크 알아보기
· 웹사이트와 웹페이지의 차이점은 무엇인가요?
웹사이트는 책, 웹페이지는 책 속의 각 페이지와 같습니다.
· URL이란 무엇이며, 어떻게 구성되어 있나요?
· 브라우저란 무엇이며, 어떻게 작동하나요?
- HTML로부터 DOM트리를, CSS로부터 CSSOM 트리를 빌드합니다.
- DOM 및 CSSOM을 결합하여 렌더 트리를 형성합니다.
- 렌더 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산합니다.
- 개별 노드를 화면에 페인트합니다.
· 사용자 인터페이스(UI) 레이어는 브라우저 내에서 눈에 보이는 모든 것으로, 주소창, 뒤로가기, 앞으로 가기, 새로고침, 북마크, 환경설정과 같은 UI가 있습니다.
· 브라우저 엔진은 UI와 렌더링 엔진 사이에서 중개자 역할을 합니다.
ex) 새로고침 명령(UI클릭) 시 이를 수행(렌더링)
· 네트워크 레이어는 HTTP나 HTTPS 같은 프로토콜을 이용해 외부의 리소스를 끌어오고, 서버에 요청을 보낼 때 사용되는 레이어입니다.
· Javascript 인터프리터는 자바스크립트를 해석하고 실행하는 역할을 합니다.
ex) 크롬에 탑재된 구글의 V8
· UI백엔드는 브라우저가 작동하고 있는 운영체제의 인터페이스를 따르는 UI들을 처리합니다.
ex)Alert나 SelectBox가 운영체제별로 다르게 동작한다.
· 자료 저장소는 브라우저 자체에서 하드디스크와 같이 데이터를 로컬에 저장하기 위한 레이어로, 쿠키나 로컬 스토리지, 세션 스토리지,IndexedDB, 웹 SQL, 파일시스템 등에 접근하고 데이터를 저장하는 데 사용됩니다.
· HTML & CSS란?
HTML은 웹 페이지의 구조와 내용을 정의하는 데 사용됩니다. 웹 페이지의 뼈대로 비유합니다.
태그와 속성으로 구성되며, 태그는 요소의 종류를, 속성은 요소의 특성을 정의합니다.
<div class="front">
<img src="./images_2/space-01.png" alt="space01" />
<h2>Mars</h2>
</div>
<div class="back">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#none">Read More</a>
</div><p> 태그는 문단을, <img> 태그는 이미지를 나타내며, <a> 태그는 앵커 태그로, herf 속성을 이용하여 하이퍼링크를 생성합니다.
CSS는 뼈대를 꾸며주는 스타일 시트입니다. 화면에 출력되는 구성 요소의 스타일을 정의하는 데 사용됩니다. 폰트나 배경 색상부터 레이아웃 등의 시각적 요소를 조정하여 웹페이지의 외관을 디자인합니다.
.front {
background-color: #333;
width: 100%;
height: 100%;
border-radius: 5px 5px 0 0;
color: #fff;
transition: all 0.5s;
z-index: 1;
}background-color: #333; 은 배경 화면의 색상을 RGBA 팔레트 중 #333 번 색상으로 설정합니다.
· 렌더링 엔진의 동작 과정
· React나 Vue와 같은 프레임워크가 등장하게 된 배경
Javascript를 이용하여 DOM을 직접 조작하면, 변경 사항이 있을 때마다 레이아웃 단계와 페인트 단계를 불러옵니다. 10개의 DOM노드를 수정하면 10번의 리페인팅 과정이 생깁니다. 때문에 DOM을 직접 조작하는 것은 태스크와 비용이 큽니다.
가상 DOM(Virtual DOM)은 실제로 렌더링이 된 것은 아니지만 실제 DOM의 구조를 반영한 상태로 메모리에 있는 가상의 DOM으로, 실제 DOM보다 연산 비용이 적습니다. 변경 사항을 한 번에 묶어서 실제 DOM에 반영합니다. 때문에 연산의 횟수가 최소한이 됩니다.
가상 DOM을 사용함으로써 변경사항을 유발하는 스크립트를 모두 자동화할 수 있고, 개발자가 관리할 포인트를 줄일 수 있도록 하기 위해서 대표적으로 React와 Vue같은 프레임워크가 개발되었습니다.
