01. 웹이란
정보 공유 목적의 대표적 인터넷 서비스
하이퍼 텍스트(Hypertext)를 기반으로 서로 관련있는 문서(document)를 연결한 문서의 집합체 (TCP/IP)
※ 하이퍼텍스트(Hypertext)는 참조(Hyperlink)를 통해 문서 간 이동 및 접근 할 수 있는 텍스트
웹 주소 구성 (URL)
· URL(Uniform Resource Locator)
<Scheme>://<Sub domain>.<Domain>:<Port>/<Directory, path>?<Query>#<Pregment>
스킴(Scheme)
· 프로토콜(Protocol)
· 해당 리소스에 접근 프로토콜을 명시
서브 도메인(Sub domain)
· URL로 전송 또는 계정 내 IP 주소, 디렉토리로 포워딩 되는 도메인 이름의 확장자
※ blog.naver.com, mail.naver.com ...
도메인(Domain)
·문자 등으로 만들어진 주소
※ TLD(Top-Level Domain) 은 도메인의 마지막 가장 끝 부분 (.com, .org ... )
포트(Port)
·호스트 서버와 연결 할 소켓(TCP/IP) 포트 ( 기본 웹 포트 : 80 )
경로(Directory, Path)
·호스트에서 요청 또는 응답 받을 리소스 경로
질의(Query)
·클라이언트가 서버에 리소스를 요청(GET 방식)할 경우 서버 요청에 보낼 파라메터
프레그먼트(Pregment)
·페이지 앵커(Anchor)
·페이지에서 이동(스크롤)할 엘리멘트의 ID
· URL 은 서버의 문서(페이지), 이미지 등 리소스의 위치 정보 (<Scheme> ~ <Query>)
· URI(통합 자원 식별자, Uniform Resource Identifier)는 URL 의 상위 개념으로 서버의 리소스를 식별할 수 있는 전체 문자열 (<Scheme> ~ <Pregmenet>)
· URI의 하위 개념으로는 위의 URL과 URN(Uniform Resource Name)이 존재
- 프로토콜을 제외한 <Sub domain> ~ <Pregmenet>
- 리소스 존재 유무 또는 위치를 이름(Name)으로 특정
- 리소스 간 중복되는 URN은 존재 할 수 없고, 영구적이고 유일해야 하며 해당 리소스의 접근방법과 위치가 표시 되지 않음
※ URN 은 결과적으로 URL로 변경되어 사용됨
브라우저 렌더링(Browser Rendering)
· HTML, CSS, Javascript 등을 클라이언트 브라우저에 그리는 과정
User Interface : 브라우저에서 주소 표시 줄 등 HTML 페이지 컨텐츠 영역을 제외한 나머지 영역
Browser Engine : User Interface 와 Rendering Engine 간 동작을 제어
Rendering Engine : HTML, CSS를 파싱하여 화면에 표시(render)
Networking : HTTP 요청 등 네트워크 호출에 사용
Javascript Interpreter / Javascript Engine : 자바스크립트 코드를 읽고 실행
Display Backend : HTML 기본적인 위젯 표시
Data Persistence : Local Storage, Cookie 등 클라이언트 사이드(CS)에서 데이터 저장하는 영역
URL 입력
· https://google.com/
· 프로토콜, 도메인, 포트 분석
· 도메인 → IP 전환
1. 로컬 DNS (호스트 파일) 내에서 해당 도메인 검색
2. 로컬 DNS 내에서 해당 도메인 정보가 없는 경우 외부 DNS 에 검색 요청
3. 외부 DNS 로부터 받은 도메인의 IP 정보를 로컬 DNS에 저장 (캐싱) 되어 다음 검색 시 우선적으로 검색 및 사용
IP → MAC (Media Access Control) 주소 전환
· 우선적으로 해당 IP를 사용해 로컬 네트워크 내 IP 장치를 검색
※ 로컬 네트워크 내에서 해당 IP를 사용하는 IP 장치(서버)가 없는 경우 게이트웨이를 통해 외부 네트워크에서 검색
· 해당 IP를 사용하는 장치(서버)를 찾으면 *ARP(Address Resolution Protocol) 브로드 캐스트를 통해 MAC 주소로 전환
* ARP(Address Resolution Protocol)은 IP를 MAC 주소로 전환해주는 프로토콜
클라이언트 · 서버 연결
· 클라이언트와 서버 간 TCP/IP 세션 연결
· 클라이언트와 서버는 HTTP, HTTPS 프로토콜을 이용해 요청/응답(Request / Response)을 수행
웹 페이지 (HTML · Javascript · CSS) 코드 렌더링
1. 객체 모델링 (Object Modeling, Parser)
· DOM (Document Object Model)
- HTML 코드를 DOM Tree로 변환
1. Bytes → Characters (변환, Conversion) : HTML 원시 바이트(Bytes)를 HTML 문서 내 정의된 인코딩(Encoding, UTF-8 등) 방식으로 문자 인코딩
2. Characters → Tokens (토큰화, Tokenization) : 변환 과정에서 인코딩 된 문자열을 W3C 표준에 따라 고유 토큰으로 변환
3. Tokens → Nodes (Lexing) : 토큰을 해당 속성 및 규칙을 정의하는 객체(node)로 변환
4. DOM 생성 : 렉싱 과정을 통해 생성된 노드를 트리 구조로 변환
· CSSOM (CSS Object Model)
- CSS 코드를 CSSOM으로 변환 (DOM 생성 과정과 동일, CSS Parser)
- CSS는 렌더링 차단 리소스(render blocking resource)
- CSS는 렌더링 시 반드시 필요한 리소스로 빠른 다운로드를 위해 <head> 태그 안에 정의
※ CSS는 HTML(마크업)과 같은 렌더링 엔진(Rendering Engine)에서 파싱을 담당
※ Javascript 파서(Javascript Parser)
- 파서 차단 리소스(parser blocking resource)
- 렌더링 엔진에 의해 HTML, CSS 파싱 중 Javascript 코드를 만나게 되면 브라우저는 파싱을 중단하고 Javascript 엔진이 실행 되어 Javascript 코드를 파싱
※ Javascript 코드로 인해 렌더링 엔진의 파싱이 중단되는 것을 막기 위해 <head> 태그가 아닌 <body> 태그가 닫히기 전(코드 하단) 직전에 정의 하거나 <script> 태그의 defer 속성을 사용해 HTML, CSS 등 문서 파싱이 끝난 다음에 Javascript 엔진을 실행 ( HTML5 에서는 <script> 태그에 async(비동기) 속성 추가되어 병렬 처리도 가능 )
2. Render Tree 생성
- 부착(Attachmenet) 과정을 통해 DOM 과 CSSOM 을 결합하여 모든 노드(DOM, CSSOM) 정보를 갖는 Render Tree를 생성
1. DOM Tree의 루트(root)에서 시작하여 *화면에 표시되는 노드를 탐색
2. 화면에 표시 되는 각각의 노드와 일치하는 CSSOM (스타일 정보)를 적용
* 화면에 표시되지 않는다 는 것은 <head> 태그 또는 CSS 속성이 display : none 인 태그처럼 화면에서 공간을 차지하지 않는 노드를 의미
3. Render Tree 배치 (Layout / Reflow)
- Render Tree가 생성되고 화면 (view port) 내에 Render Tree의 각 노드가 정확한 위치와 크기를 계산하는 과정
- 모든 상대적인 측정 값은 화면에서 절대적인 값(픽셀)로 변환 (CSS 에서의 % 값 등)
4. Render Tree 그리기 (Painting, Rasterizing)
- 배치된 Render Tree(Layout/Reflow)를 화면의 픽셀로 나타내는 과정 (UI 표시)
※ Javascript 이벤트 콜백으로 인해 HTML 코드에 업데이트 (Render Tree 변경) 될 경우 다시 Layout(Reflow) → Painting(Resterizing) 을 수행
'Study' 카테고리의 다른 글
| [STUDY] JS - 01. Javascript 란 (0) | 2022.06.22 |
|---|---|
| [STUDY] WEB - 02. 웹 구축 및 구동 방식 (0) | 2022.06.17 |
| [STUDY] ECMAScript6 / ES6 (2015) (0) | 2022.05.30 |
| [STUDY] ECMAScript5 / ES5 (2009) :: Array (0) | 2022.05.28 |
| [STUDY] ECMAScript5 / ES5 (2009) :: Object (0) | 2022.05.28 |
댓글