Let's Code/Server

웹이 구현되는 과정

피넛butter 2019. 8. 25. 15:33

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

 

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

 

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

 

 

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의 문법이 왜 차이가 나는지 알 수 있었다.