[코드스쿼드] 프론트엔드 Lv3 - WEB의 이해

코드스쿼스 Lv3 - WEB의 이해

알게 된 몇가지 특징
- HTML 문서는 html 태그로 시작해서 html 태그로 끝난다
- head는 무엇을 하는걸까?
  head 요소의 정의는 문서의 메타데이터 집합 이 문서의 메타데이터라는 것은 웹 페이지에 직접적으로 보이지 않는 정보
- body 는 ?
- HTML은 계층적 이다
- HTML은 tag 를 사용해서 표현한다
```
<tag class="title">안녕하세요</tag>
```
- JavaScript와 CSS가 html 안에 여기저기 존재한다
How Browsers Work
브라우저의 동작방식에 대해선 개발자들도 잘 알 필요가 없다고 생각했음
브라우저가 알아서 해주었기 때문에
브라우저에 관심을 갖기 시작한 이유
- 브라우저의 동작방식이 숨겨져있다
- 내가 짠 코드가 의도와 다르게 브라우저에서 다르게 표시된다
- 코드가 브라우저에서 좀 더 빨리 실행하게 하려면 어떻게 해야할까?
The Browser’s high level structure
- User Interface : 뒤로가기, 주소창 등 사용자에게 보여지는 Interface
- Browser engine : 소스코드를 실행해서 화면에 보여줄 수 있는 Engine, 브라우저 소프트웨어를 동작시켜주는 핵심엔진
  - Internet Explorer - Trident
  - Firefox - Gecko
  - Safari - Webkit
  - Chrome & Opera - Blink (현재는 Chromium)
- 브라우저마다 Engine 의 종류가 다름
- Rendering engine : 화면에 위치를 잡고 색칠을 해주는 (Pixel 단위)
- Data Persistence : 브라우저도 캐시를 이용함, 데이터들을 저장하는 공간
- Networking : http 를 통해서 통신 (또는 https)
- JavaScript Interpreter
- UI Backend
The main flow
- Parsing HTML to construct the DOM tree : HTML 의 문자열을 Parsing 해서 의미를 파악 (Document Object Model)
- Render tree construction : Render tree 를 만든다
- Layout of the render tree : Render tree 구조로 CSS 를 결합한다 (화면에 어떻게 배치할지 결정)
- Painting the render tree : 화면에 직접 그린다
- WebKit main flow(중요)
Parsing-general
- 2 + 3 - 1 를 Parsing 한다고 해보자!
- 일단, 하나하나씩 분리하면서 숫자와 연산자에 따라서 계산을 진행한다
- Token, Syntax Tree

HTML Parser

Markup

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="example.png"/></div>
  </body>
</html>

이런 코드들이 브라우저에서는 어떻게 표시될까?
각 tag 들이 tree 구조를 통해서 구현되어 있다

CSS Parsing
- KEY-VALUE 구조로 되어있음
  - CSS Rule 에 의해 Selectors 와 Declaration 으로 분류됨
Browser에서의 웹 개발
- HTML 문서는 html 태그로 시작해서 html 태그로 끝난다
- head는 무엇을 하는걸까?
  head 요소의 정의는 문서의 메타데이터 집합 이 문서의 메타데이터라는 것은 웹 페이지에 직접적으로 보이지 않는 정보
  어떤 HTML의 추가적인 내용(설명)을 담고있다. 문서에 대한 정보들이 포함되어 있음
- body 는 ? 화면에 포함되어야 할 div 등 태그가 포함되어 있음
- HTML은 계층적 이다
- HTML은 tag 를 사용해서 표현한다
```
<tag class="title">안녕하세요</tag>
```
- JavaScript와 CSS가 html 안에 여기저기 존재한다
간단한 HTML 경험하기 (JSBin)
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content=""
    </head>
</html>
```
- <head> 태그 안에 <style> 태그를 넣을 수 있음
- script 태그는 맨 밑에 구성하는식(body 태그 밑에)일반적이나 head 태그 안에 넣기도 함
  - JavaScript 가 head 태그에 존재할 경우, HTML 의 로딩 요소를 방해할 수 있는 가능성들이 큼
- CSS 도 head 태그 안에서 <link ref="stylesheet" href="./main.css"> 식으로 별도의 파일로 구성함
- JavaScript 도 head 태그 안에서 <script scr="./main.js"></script> 식으로 구성할 수 있음

코드스쿼스 Lv3 - WEB의 이해

Share this post