1. Web개발의 이해 - FE/BE

웹(Web)

월드 와이드 웹(World Wide Web)은 인터넷상으로 정보를 공유하는 공간을 의미한다.

흔히 알고 있는 WWW가 이것의 줄임말이고 간단히 말해 웹(Web)이라고 한다.

 

웹은 인터넷을 구성하는 다양한 서버 중의 하나이다.

서버는 각각의 포트(port)를 가진다. 

위의 그림처럼 웹은 80이라는 포트번호를 가지고 있다.

 

웹의 작동 원리를 알기 위해서는 HTTP 개념을 알아야 한다.

 

HTTP

HTTP란 Hyper text transfer protocal의 약자로 서버와 클라이언트가 인터넷상에서 데이터를 주고 받기 위한 프로토콜이다. 즉, 문서뿐만 아니라 영상, 오디오 등 종류를 가리지 않고 전송이 가능하다.

 

프로토콜은 일종의 규정이라고 생각하면 된다. HTTP의 작동방식은 서버/클라이언트 방식을 따른다.

그림처럼 클라이언트가 서버에 먼저 요청을 하면 서버에서 응답을 하는 방식으로 작동하는 것이 클라이언트/서버 방식이다.

여기서 HTTP의 중요한 특징은 클라이언트가 요청하면 서버는 응답을 하고 연결을 끊는다. 이를 stateless라고 부르는데 stateless로 간단하게 HTTP의 장단점을 알아보면 이해가 쉬울 것이다.

 

HTTP의 장점 : stateless는 계속 연결 상태를 유지하는 것이 아니기에 클라이언트와 서버 간 최대 연결 개수보다 많은 요청과 응답 처리가능. 즉, 불특정다수로 하는 서비스에 적합.

*윈도우즈(Windows)는 최대 공유할 수 있는 숫자가 10개이다. 10명의 접속자 중 접속을 끊는 사람이 있어야 새로운 클라이언트가 접속할 수 있다.*

HTTP의 단점 : 연결을 끊어버리기 때문에, 클라이언트의 이전 상황을 모른다. 이러한 단점을 보완하고자 나타난 기술이 지금 우리가 잘 알고 있는 쿠키(Cookie)!!

 

다음은 웹의 핵심 개념인 HTTP로 웹의 동작원리를 살핀 그림이다.

 

• 헤더, 빈 줄, 바디 3가지로 나뉜다.
• 요청 메서드 : GET, PUT, POST, PUSH, OPTIONS 등의 요청 방식이 온다.
• 요청 URI : 요청하는 자원의 위치를 명시한다.
• HTTP 프로토콜 버전 : 웹 브라우저가 사용하는 프로토콜 버전이다.

첫번째 줄의 요청메소드는 서버에게 요청의 종류를 알려주기 위해서 사용됩니다.

각각의 메소드 이름은 다음과 같은 의미를 가집니다.

참고로 최초의 웹 서버는 GET방식만 지원해줬습니다.

• GET : 정보를 요청하기 위해서 사용한다. (SELECT)
• POST : 정보를 밀어넣기 위해서 사용한다. (INSERT)
• PUT : 정보를 업데이트하기 위해서 사용한다. (UPDATE)
• DELETE : 정보를 삭제하기 위해서 사용한다. (DELETE)
• HEAD : (HTTP)헤더 정보만 요청한다. 해당 자원이 존재하는지 혹은 서버에 문제가 없는지를 확인하기 위해서 사용한다.
• OPTIONS : 웹서버가 지원하는 메서드의 종류를 요청한다.
• TRACE : 클라이언트의 요청을 그대로 반환한다. 예컨데 echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용한다.

 

URL

URL(Uniform Resource Location) : 인터넷 상의 자원의 위치를 나타내는 역할

크게 3부분으로 나누어진다.

첫째, 프로토콜의 종류

둘째, 자원이 있는 서버의 IP주소 or 도메인 주소 or 포트번호

셋째, 자원의 위치

 

IP와 Port의 개념 쉽게 이해해보기

우리는 각자 집이라는 공간에서 살고 있다. 이때,

IP는 집 주소

Port는 집에 있는 각각의 방

로 생각하면 된다.

즉, 하나의 물리적 컴퓨터에는 여러 개의 서버가 동작할 수 있는데 각각의 서버는 포트값이 달라야한다.

 

생각해보기

HTTP와 HTTP뒤에 S가 붙은 HTTPS는 어떤 차이가 있을까?

HTTPS(Hyper text transfer protocal over secure  socket layer)는 HTTP와 달리 서버와 클라이언트 간 주고받는 데이터를 암호화하여 처리함. 즉, HTTP보다 보안이 강화된 버전이라고 보면 된다.

브라우저(Browser)

Browser : 월드와이드웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어

 

서버에서 전송한 데이터(HTML과 같은)가 클라이언트에 도착해야 할 곳이 Browser이다.
Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔진이 포함되어 있다.

 

랜더링 : 브라우저의 내용들을 하나로 합쳐서 보여주는 작업

 

렌더링엔진 종류 : Firefox의  Gecko, Safari의 WebKit, Chrome과 Opera의 Blink 등

*크롬의 크로미움은 V8 + Blink을 포함한 구글 브라우저 오픈소스 애플리케이션으로 Blink -> 크로미움으로 바뀐 것이 아님. 크로미움은 여전히 렌더링엔진으로 Blink사용*

HTML은 대게 구조화된 정보를 가지고 있기에 트리형태로 가지게된다.

 

위 그림은 WebKit의 mainflow

 

우선 html, css파일을 파싱한다.
파싱 : 문자 단위로 하나하나 해석을 해서 담긴 의미들을 파악하고 그것들을 어떤 데이터 객체로 구조화 시키는것.
Render Tree는 HTML의 변환된 파일인 DOM Tree와 CSS의 변환된 파일인 CSS Tree가 합쳐진 것.