웹 서버

웹 서버란?

• 웹 서버는 보통 소프트웨어를 말하지만, 웹 서버 소프트웨어가 동작하는 컴퓨터를 말하기도 함
• 웹 서버의 가장 중요한 기능은 클라이언트가 요청하는 HTML 문서나 각종 리소스를 전달하는 것
• 웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장되어 있는 정적 데이터이가나 동적 결과가 될 수 있음
  cf. 여기서 동적 결과란 웹 서버에 의해서 실행되는 프로그램을 통해서 만들어진 결과값
• 웹 서버와 클라이언트의 소통 방식은 1. 웹의 동작 참조

웹 서버 소프트웨어의 종류

• 현재 가장 많이 사용되는 웹 서버는 Apache, NGINX, Microsoft IIS
• 현재 Apache의 서버가 가장 높은 점유율을 보이고 있지만, Nginx가 지속적 성장세를 보이고 있음. 두 웹 서버는 모두 오픈소스 소프트웨어.

NGINX

: Apache web server는 대중적이기 때문에 NGINX에 대해 추가적으로 알아보고자 함

• NGINX는 'Apache server를 능가하는 성능'이라는 뚜렷한 목표하에 제작됨
• 시작부터 NGINX는 동적 파일을 클라이언트에게 제공함에 있어 Apache 보다 훨씬 더 적은 메모리량을 사용하였음. 그리고 이는 초당 4배 더 많은 클라이언트의 요청을 수행할 수 있을만큼의 차이와도 같음
• 그러나, 이러한 성능은 flexbility의 감소로 이어졌음 (차후 다시 공부)

browser의 동작

Why we should know 'browser'?

: 웹을 통해 전달되는 데이터는 어딘가에서 해석되어야 함.
서버에서 전송한 HTML과 같은 데이터가 클라이언트에 도착하는 곳이 'browser'
Browser에는 데이터를 해석해주는 'Parser'와 데이터를 화면에 표현해주는 'Rendering Engine'이 포함되어 있으며, 브라우져 마다 다른 종류의 Redering Engine 사용
이런 작업의 대부분은 browser 내부에서 이루어지기 때문에 반드시 알아야 하는 것은 아님. 그러나 browser의 내부를 이해하면 웹 개발을 하며 맞닥뜨리는 난해한 문제들의 해결이 가능하고, 보다 최적화된 웹 개발을 할 수 있음.

browser의 구성

1. The user interface: 주소창, 뒤로가기/앞으로가기 버튼, 즐겨찾기 메뉴 등을 포함하는 인터페이스. 사용자가 요청하여 보고 있는 화면 페이지를 제외한 모든 브라우저의 부분이 모두 인터페이스
2. The browser engine: UI와 Rendering engine 사이에 발생하는 action들을 정렬시키는 역할 수행
3. The rendering engine: 사용자가 요청한 콘텐츠를 화면에 보여주는 역할을 담당 아래에 다시 자세히 설명
4. Networking: HTTP request와 같은 네트워크 요청을 위한 부분으로, 사용자가 사용하는 플랫폼에 맞는 작업을 수행
5. UI backend: 콤보 박스들과 화면 등의 기본 위젯들을 그리는데에 사용되며, 사용자의 플랫폼에 따라 다른지 않은 'generic'한 인터페이스를 사용자에게 보여줌.
6. JavaScript interpreter: JavaScript 코드를 Parsing하고 실행하는데 사용
7. Data storage: browser 또한 데이터들을 browser 내에 cookie와 같은 형태로 저장할 필요가 있기 때문에 존재하는 지속적 계층. 때문에 browser 역시 localStorage, IndexedDB, WebSQL 그리고 FileSystem과 같은 storage mechanism을 지원

The flow of Rendering Engine

1. 네트워크 레이어에서 사용자가 요청한 문서의 콘텐츠들을 가져오는 것으로부터 시작되며, 대개 8KB 단위로 쪼개져서 가져옴
2. HTML 문서를 Parsing 하여 **'Content Tree'**라고 불리는 DOM(Document Object Model)node로 구성된 Tree 형성
3. 외부 CSS 파일과 style elements 내에 존재하는 style data들을 Parsing 한 후, Style 정보들과 HTML의 visual instruction들을 더해 'Render Tree' 형성
4. Render Tree의 각 node들이 각각 화면 내의 정해진 위치에 자리하도록 Layout 과정 수행
5. UI backend 계층을 이용하여, 자신의 알맞은 자리에 위치한 node들을 Painting

• 이해를 돕기 위해 점진적 절차에 따라 설명이 되었지만, 실제로는 보다 나은 사용자 경험(UX)을 위해 Redering Engine은 모든 HTML이 Parsing될 때 까지 기다리지 않고 해석된 HTML 문서들을 바로 Layout과 Painting 작업으로 보냄. Parsing되지 않은 문서들은 지속적으로 절차에 따른 작업 수행

Main flow examples(WebKit in Safari)

cf. Parsing-general

• Parsing은 Rendering Engine에서 아주 중요한 절차이기 때문에, 따로 알아둘 필요가 있음
• 문서를 Parsing 한다는 것은 해당 문서를 Parsing code가 사용할 수 있는 구조로 변환한다는 것을 의미
• Parsing의 결과는 대개 문서의 구조를 나타내는 node들로 이루어진 Tree 형태이며, 이는 'Parse Tree' 혹은 'Sytnax Tree'라고 불림

[함께보기] https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

웹 Front-End와 웹 Back-End

웹 Front-End (Client-Side)

1. 사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)을 제공한다.
2. 사용자의 요청(요구사항)에 반응해서 동작한다.

웹 Front-End의 역할

• 웹 콘텐츠를 잘 보여주기 위해 신문, 책 등과 같이 구조를 잘 만들어야 함(HTML)
• 적절한 배치와 일관된 디자인 등을 보기좋게 제공해야 함(CSS)
• 사용자 요청을 소통하듯 잘 반영해야 함(JavaScript)

HTML 코드 예시 : HTML은 원하는 문서의 구조를 표현

<h1>Welcome to My house</h1>
<section>
	<h2>Location</h2>
	<p>Somewhere in Seoul</p>
	<h2>Features</h2>
	<p>have two rooms, one bathroom</p>
</section>
<footer>contact: 010-XXXX-XXXX</footer>

CSS 코드 예시 : HTML 태그를 꾸미기 위한 규칙을 표현

.window-header-icon{
	left:-28px;
	position:absolute;
	top:8px;
}

.window-header-inline-content{
	cursor:default;
	display:inline-block;
	margin:4px 6px 0 0
}

JavaScript 코드 예시 : HTML, CSS를 움직이고, 변경하는 등의 기능을 수행

let aCardList = [];
for (var i = 0 ; i < cardList.length ; i++){
	let str = `${cardList[i]}번째 카드`;
	let id = `list-${cardList[i]}`;
	aCardList.push(<li id={id} key={i} draggable='true' 
					onDragStart={dragStart}> {str} </li>)
}

웹 Back-End (Server-Side)

: 정보를 처리하고 저장하며, 요청에 따라 정보를 내려주는 역할 수행 ex) 쇼핑몰에서의 back-end : 상품 정보를 가지고 있고 주문을 받아서 저장하고, 사용자가 관심있어 하는 상품을 골라주는 역할을 수행

Back-End 개발자가 알아야 할 것들

• 프로그래밍 언어(Java, Python, PHP, JavaScript)
• 웹의 동작 원리
• 알고리즘, 자료구조 등 프로그래밍 기반 지식
• 운영체제와 네트워크에 대한 이해
• Framework에 대한 이해(ex: Spring)
• DBMS에 대한 이해(ex: MySQL, Oracle)

cf. 웹 개발 시에는 크롬의 개발자 도구라는 편리한 기능을 사용하기 위해 크롬 브라우져를 사용하는 것이 권장됨