웹이 구현되는 과정

웹이 구현되는 과정을 간단하게 정리하겠습니다.

 

우선 인터넷이란 것이 무엇인지, 서버와 클라이언트가 무엇인지, 프론트엔드와 백엔드는 어떻게 구분되는지 정리한 후, 웹이 유저에게 전달되기까지의 작동 원리를 요약하겠습니다.

 

해당 내용은 네이버의 부스트코스를 정리 + 강의에서 제공되는 별도의 링크를 번역/정리했습니다.

 

 

1. Intro to HTTP

 

용어 정의

 

• 인터넷: 네트워크들의 네트워크라 할 수 있다. LAN보다 더 폭넓은 개념.
• HTTP: 서버와 클라이언트가 데이터를 주고 받기 위한 프로토콜로, 서로 통신하기 위해 사용하는 일정한 양식이다.
• URL: Uniform Resource Locator의 약자로, 1) 접근 포로토콜://IP 주소로 표현되기도 하며 2) 도메인 이름/문서 경로/문서 이름과 같이 도메인 형태로 표현되기도 한다.
• IP: 라우터 당 하나씩 있는 집 주소로, 포트는 그보다 작은 IP 내 '방'의 개념이다. 포트로 이미지, 동영상, 오디오, 텍스트 문서 등을 전송할 수 있다.

 

 

HTTP의 속성

 

• HTTP의 속성은 무상태(Stateless)로, 연결을 끊은 후 데이터가 저장되지 않는다.
• 장점: 계속 연결을 유지하지 않기 때문에 최대 연결 수보다 더 많은 요청을 처리할 수 있다 (최대 공유자 10명 초과 가능).
• 단점: 이전 데이터를 불러올 수 없다(ex. 장바구니에서 결제까지 못 감).
  • 이 단점을 보완하기 위해 '쿠키' 등장.

 

절차

• 기본적으로 [클라이언트가 서버에게 요청 → 서버가 클라이언트에게 응답]하는 형식
• 서버 요청 순서

1. CONNECT
2. REQUEST
3. RESPONSE

• 요청 양식
  • 요청 Method: GET, POST, PUT, DELETE, HEAD, OPTIONS, TRACE
  • 요청 URL
  • HTTP: Protocol Version
    • HTTPS는 HTTP의 보완이 강화된 버전.

 

 

2. Front-End와 Back-End

 

프론트 엔드가 클라이언트 사이드라면 백엔드는 서버 사이드

Front-End

• 웹콘텐츠를 잘 보여주기 위해 구조를 만든다.

• 적절한 배치와 일관된 디자인으로

• 사용자 요청을 반영

• 언어

  • HTML: 문서의 구조를 결정
  • CSS: 서식
  • JavaScript: 위 코드를 움직이고 변경 (유저의 요청을 동적으로 처리)

  세 가지 언어의 관계 참고: https://html-css-js.com/

 

Back-End

: 서버 사이드에서 클라이언트의 요청을 해결.

• 알아야 할 것

1. 프로그래밍 언어: Java, Python, PHP, JavaScript
2. 웹의 동작 원리
3. 문제 해결을 위해 알고리즘, 자료구조
4. 운영체제, 네트워크
5. 프레임워크 (Spring)
6. DBMS (My SQL, Oracle)

 

 

3. 웹의 동작 원리 

참고: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

 

Browser

기능: 서버에 웹의 자원들 (HTML 문서, PDF, 사진 등)을 요청해 브라우저 창에 띄우는 것

 

 

UI: 주소창, 뒤로가기 버튼, 북마크 버튼 등 페이지 자체를 제외한 모든 메뉴

Browser engine: UI와 rendering engine 사이 소프트웨어 동작을 가능케 함

Rendering engine: 자원을 스크린에 픽셀 단위로 구현.

Networking: HTTP 요청 등 플랫폼에 따라 다른 실행을 처리

JavaScript Interpreter: 자바스크립트를 해석하고 실행

UI Backend: 위젯 구현.

 

Rendering Engine

• 크롬 같은 경우는 탭마다 독립적인 Rendering engine 사용.
• PDF와 같이 확장자가 다른 경우 플러그인을 사용하여 구현한다
• 전반적인 과정

HTML 파싱 (해석) → 렌더 트리로 구조화 → 이를 기준으로 CSS 배치/해석 → 화면에 직접 구현

• 크롬이 쓰는 Webkit의 과정

HTML을 파싱해서 DOM 트리라는 객체 모형으로 구조화 + CSS 파싱해서 서식 규칙을 추출

→ 둘을 합쳐 구조와 비쥬얼을 합친 렌더 트리 설계 (레이아웃 = 만들어진 배치)

→ 실제 화면에 구현

 

Parsing

: 파싱은 HTML, CSS 등의 언어를 컴퓨터의 언어로 번역하는 과정이라고 할 수 있다.

• HTML의 Parsing 알고리즘

State상태에 따라 흡수하는 대상과 배출되는 결과 결정.

< 괄호를 여는 순간 Tag Open State 시작 (< 흡수), 알파벳을 입력하면 Tag name state (a-z흡수하고 문자 토큰 배출), > 괄호 닫으면 Data state (> 흡수하고 태그 배출).

 

비슷하게 Head, Body 등에 따라 다른 토큰을 배출한다. 

 

• 브라우저의 에러 자동수정

HTML의 Syntax 에러를 자동으로 고친다.

 

ex)

1. </br>을 자동으로 <br>로 수정

2. 테이블 요소가 <table></table> 태그 안에 포함되어 있지 않을 경우, 자동으로 이 요소를 감싸는 table 태그 생성

    

<table>
	<table> 
		<tr><td>inner table</td></tr> 
	</table> 
	<tr><td>outer table</td></tr> 
</table>

얘를

 

<table> 
	<tr><td>outer table</td></tr> 
</table> 
<table> 
	<tr><td>inner table</td></tr> 
</table>

요로케 해서 inner table과 outer table을 대등한 형제 관계로 만들기

 

3. 하나의 서식 안에 다른 서식을 넣은 경우, 후자 무시

4. 태그 속에 숨겨진nested 태그의 경우, 한 태그 당 최대 20개만 표기

5. body 태그가 제대로 닫히지 않은 경우, 자동 닫아주기.

 

* Webkit 같은 경우는 이를 지원하기 때문에 자바스크립트를 body 태그 밖에 위치시켜도 돌아가지만, 자동 에러 수정 기능이 없는 브라우저의 경우 body 태그 뒤에 오는 스크립트를 무시하기 때문에 꼭 body 태그 안 쪽에 위치시키는 것이 좋습니다.

 

 

CSS의 파싱

 

 

HTML과 비슷한 구조.

 

 

감상: HTML과 CSS의 문법이 왜 차이가 나는지 알 수 있었다.