웹 사이트 동작 원리

https://youtu.be/nZ_qECMLjrk
프론트 엔드
1. HTML
큰 뼈대, 화면에 보이는 요소 (큰 레이아웃)
정리 : 큰 틀을 만드는 것
2. CSS
글자색, 배경색, 정렬 (꾸미는 요소)
정리 : HTML을 세부적 배치, 꾸미는 것
3. javascript
눈에 보이는 데이터를 가져다 주는 것
정리 : 실시간으로 매번 이루어져야되는 작업하는 것
EX) 로그인, 메일 가져오기
 
백엔드
1. 서버(백단)
프론트엔드에서 요청을 받아서 일 함(Django(py), Node(js))
2. 데이터베이스
데이터를 저장하고 있는 곳
 
 
 
https://youtu.be/FQHNg9gCWpg
웹 브라우저를 열고 웹 사이트에 접속하면
웹 브라우저는 DNS에게 호스트의 IP를 물어봄
DNS는 호스트의 IP를 알려줌
브라우저는 IP주소에 있는 서버를 찾아감
이 떄 랜덤한 숫자 번호표를 들고감.
브라우저는 서버에게 번호표를 줌. 서버가 번호표에 1을 더해서 브라우저로 줌. 다시 브라우저가 서버에 1을 더해서 줌.
위 작업은 3 Way-Handshake 라는 것임.
번호표를 주고 받으면서 데이터를 주고 받기 위한 행위(3 Way-Handshake)
이 과정이 끝나면 브라우저는 서버에 자료를 요청함.(EX) www.a.com 해당 주소에 있는 데이터 요청)
브라우저가 서버에 데이터를 요청하는 행위(HTTP Request)
서버가 브라우저에 데이터를 주는 행위(HTTP Response)
데이터 받았으면 웹 브라우저는 데이터를 사용자에게 보여주려함.
데이터의 해석이 필요함.
대부분의 브라우저는 웹 표준화 기구인 W3C의 명세에 따라 HTML과 CSS를 해석
해석하는 행위를 Parsing 이라고 함.
브라우저의 랜더링 엔진은 HTML을 Parsing하여 DOM Tree를 생성
이 과정에서 렌더링 엔진이 스타일태그(CSS)를 만나면,
HTML Parsing 작업을 중지하고 CSS Parsing 작업을 시작하여
CSSOM Tree를 생성
CSS Parsing이 끝나면, 중단된 HTML Parsing 부분 부터 다시 Parsing 시작
그러다가 스크립트 태그를 만나면 다시 Parsing 작업을 중지하고
JS Engine(자바스크립트 엔진)에게 제어 권한을 넘김.
JS엔진은 코드(스크립트 태그)를 해석하여 추상 구문 Tree인 AST를 만들고 실행.
다시 HTML Parsing으로 돌아오고 작업 완료.
이제 브라우저는 DOM Tree와 CSSOM Tree를 합쳐 Render Tree를 생성.
Render Tree를 생성하는 과정까지를 Construction이라고 함.
이제 랜더링 엔진은 Layout 작업을 시작(Render Tree의 노드들을 화면의 올바른 위치에 표시하는 작업)
다음으로 UI Backend가 Render Tree의 노드들을 돌면서 UO를 그림.(Paint 작업)
그 다음은 노드들의 레이어를 순서대로 구성하는 Composition 단계(z-index가 낮은 요소를 먼저 놓는 것)
Layout 작업부터 Composition까지의 과정을 Operation이라고 함.
이러한 Parsing과 Layout, UI를 그리는 과정은 서버로부터 모든 데이터를 받고 나서 시작x
브라우저는 사용자에게 더 빠르게 화면을 출력해주기 위해 서버로부터 데이터의 일부를 받고 화면에 표시
또 데이터를 받으면 또 화면에 표시(이것 때문에 웹 페이지의 화면이 한번에 뜨지 않고, 부분적으로 뜨는 현상 발생)
 
 
정리
1. 사용자가 브라우저로 웹 사이트에 접속
2. 브라우저는 DNS를 통해 서버의 아이피 주소 파악
3. 브라우저는 서버와 3 Way Handshake
4. 브라우저는 서버에 데이터 요청(HTTP Request)
5. 서버가 브라우저에게 데이터 출력(HTTP Response)
6. 브라우저는 HTML Parsing하여 DOM Tree 생성
7. 브라우저는 HTML Parsing 중간에 CSS가 나오면 CSSOM Tree 생성(HTML Parsing을 중단x DOM Tree 생성 중단o)
8. 브라우저는 HTML Parsing 중간에 스크립트 태그가 나오면 JS Engine에게 권한을 넘겨서 AST 생성
9. DOM Tree + CSSOM Tree를 합침 => Render Tree 생성
10. 위 과정까지를 Construction이라고 함.
11. 랜더링 엔진은 Render Tree에 있는 Node를 배치(Layout 과정)
12. UI Backend는 Render Tree에 있는 Node의 UO를 그림(Painting 과정)
13. 마지막으로 Render Tree에 있는 Node를 순서대로 구성함(Composition 과정)
14. 위 과정을 Operation이라고 함.
15. 최종적으로 브라우저는 사용자에게 결과 화면 출력
 
 
 
https://youtu.be/TMRVGJulN8Y
자바스크립트 동작 순서
구성
1. js소속 : 콜 스택(Call Stack)
2. 브라우저 소속 : 웹 API, 콜백 큐(Callback Queue), 이벤트 루프(Event Loop)
콜 스택 : 함수를 받아서 착착착 수직으로 정리, 나중에 들어온 것이 먼저 나가는 구조
Web API : 웹 브라우저가 멈추지 않고 함수 실행하는 것을 도와줌(EX) setTimeout 같은 타임 걸린 함수)
콜백 큐 : Web Api가 주는 함수를 저장하는 역할(Web API가 "어? 타이머 끝났네, 실행하면 되겠다"하면 여기에 함수 저장)
이벤트 루프 : 콜 스택 감시하다가 일 없으면, 콜백 큐에 저장된 함수를 콜 스택으로 던짐.
 
ps. 콜 스택의 Last IN, First OUT을 고려해서 웹 브라우저(웹 api, 콜백큐, 이벤트 루프)가 도와줌

Js 동작순서

 
https://youtu.be/GAyZ_QgYYYo
웹 브라우저에 URL 입력하면 일어나는 일 - 인프라 위주
네트워크 지식
정리 필요
 
https://youtu.be/70bzGTx-BHo
WEB, WAS
정리 필요