웹 서버와 웹 클라이언트가 요청을 보내고 응답을 주고 받는 과정을 이해하고,
웹 브라우저가 동작하는 방식을 이해하는 것은 매우 중요하다.
그 중에서도 웹 크롤링으로 데이터를 자동화해서 수집하는 것은 필요한 기술이면서도,
법적으로 침해하지 않아야 하는 선을 지켜야 하는 기술이다.
HTTP(HyperText Transfer Protocol)
데이터의 형식, 부호화, 인증, 오류 수정 등을 포함한다.
-
Connectionless
- 연결을 유지하지 않고 필요할 때 만 연결되어 통신
-
Stateless
- HTTP는 상태를 저장하지 않는다.
- 모든 요청을 서로 연관성을 가지지 않고 독립적.
- HTTP 쿠키를 사용하면 상태를 저장하는 세션을 할 수 있다.
HTTP의 흐름
- TCP 3 way Handshake & 4 way Hand shake
-
TCP 연결을 연다.(3 way hand shake)
-
HTTP 메세지 Request (인코딩된 텍스트)
-
서버의 Response
-
연결 종료 (4 way hand shake)
HTTP 메세지
Web Server & WAS
정적 웹 페이지와 동적 웹 페이지
Static web pages
- Web server는 파일 경로 이름을 받아 경로와 일치하는 file contents를 반환한다.
- 항상 동일한 페이지를 반환한다.
- ex) image, html, css, javascript와 같은 정적 파일들
Dynamic web pages
- 인자의 내용에 맞게 동적인 contents를 반환한다.
- 웹 애플리케이션 서버에서 실행되는 프로그램(Servlet)을 통해서 만들어진 결과물
Web server와 Was의 차이
Web Server
- 클라이언트로부터 HTTP 요청을 받아 정적 페이지 제공,
- 클라이언트의 동적 페이지 요청을 WAS에 전달, WAS의 처리 결과를 클라이언트에게 제공
- ex) Apache Server, Nginx 등
WAS(Web Application Server)
- DB 조회나 다양한 로직 처리를 요구하는 동적 페이지를 제공하기 위한 애플리케이션 서버.
- Web Server + Web Container
- Web Container란 JSP, Servlet을 실행시킬 수 있는 소프트웨어를 뜻한다.
- ex) Apache Tomcat, Jeus, JBoss 등
Web Server와 WAS를 분리하는 이유
- 기능을 분리하여 서버 부하 방지
- WAS는 DB 조회나 다양한 로직을 처리하느라 바쁘기 때문에 단순한 정적 컨텐츠는 Web Server에서 빠르게 클라이언트에 제공하는 것이 좋다.
- 여러대의 WAS를 연결 가능
- 장애 처리에 유리하다.
예를 들어, 앞 단의 Web server에서 오류가 발생한 WAS를 이용하지 못하도록 한 후 WAS를 재부팅함으로써 사용자는 오류를 느끼지 못하고 이용하게 할 수 있다.
- 장애 처리에 유리하다.
- 여러 웹 애플리케이션의 서비스
- 하나의 서버에서 PHP Application과 Java Application을 함께 사용할 수 있다.
즉, 자원 이용의 효율성 및 장애 극복, 배포 및 유지보수의 편의성을 위해 Web server와 WAS를 분리한다.
Web Server & WAS : https://deep-wide-studio.tistory.com/213
Web Server와 WAS의 차이 : https://gmlwjd9405.github.io/2018/10/27/webserver-vs-was.html
웹 브라우저
웹 브라우저란?
- 동기적으로 텍스트와 그림, 멀티미디어 파일 등 컨텐츠를 검색 및 열람하기 위한 응용 프로그램
- ex) chrome, safari, ...
웹 브라우저의 구조
- 사용자 인터페이스
- 주소 표시줄, 이전/다음 버튼, 북마크 등 페이지 뷰 이외의 다른 부분
- 브라우저 엔진
- 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어
- 렌더링 엔진
- HTML, CSS를 파싱해 화면에 표시
- 통신
- HTTP요청과 같은 네트워크 호출에 사용됨
- JS 엔진
- 자바스크립트 코드를 해석하고 실행
- UI 백엔드
- 기본적인 위젯(콤보 박스 등)을 그림
- 자료 저장소
- cookie, local storage 등 브라우저 메모리를 저장하는 웹 데이터베이스
렌더링 엔진
- 렌더링 엔진은 좀 더 빠르게 동작하기 위해
일련의 과정들이 비동기적으로 진행.
렌더링 엔진의 동작 과정
-
브라우저는 서버로부터 전달 받은 HTML 문서를
parsing하여 DOM node 생성. -
이를 기반으로 DOM(Document Object Model) Tree 생성
-
CSS 파일을 스타일 시트 객체로 Parsing하여 CSSOM(CSS Object Model) 생성
-
DOM과 CSSOM을 통해 Render Tree 생성. Render Tree는 문서를 시각적으로 만들어주는 역할을 함
-
Render Tree 배치 (Layout). Render Tree는 위치와 크기를 가지고 있지 않기 때문에 어느 공간에 위치해야 할지 결정
-
UI 백엔드에서 Render Tree의 각 node를 화면의 pixel값으로 나타냄 (Paint)
JS Engine
- HTML Parser는 <script> 태그를 만나면 DOM 생성을 중지하고 JS 엔진으로 권한을 넘김.
JS 엔진은 javascript 파일을 로드하고 파싱하여 실행.
자바스크립트의 실행이 완료되면 다시 HTML 파서로 권한을 넘김.
이처럼 브라우저는 동기적으로 HTML, CSS, Javascript를 처리하는데
제어 권한이 JS 엔진에 있을 때, Javascript 코드가 미완성인 DOM을 조작하면 에러가 발생한다 .
이것이 HTML 파일에서 Javascript 코드를 <body>태그 하단에 위치시키는 이유이다.
참조 : https://velog.io/@thyoondev
https://bbangson.tistory.com/87
