부스트코스(boostcourse) 웹 프로그래밍 기초

HTTP(Hypertext Transfer Protocol)

서버와 클라이언트가 인터넷상에서 데이터를 주고 받기 위한 프로토콜

그렇다면 프로토콜은 무엇인가?

컴퓨터 내부 혹은 컴퓨터 사이에서 데이터의 교환 방식을 정의 하는 규칙 체계
기기 간 통신은 교환되는 데이터의 형식에 대해 상호 합의를 요구한다.
어떠한 데이터 형태도 전송할 수 있다. (이미지, 오디오, 텍스트 문서 등)

HTTP 작동방식

클라이언트가 "요청"을 서버에 보내면 이 "요청"을 받아 서버가 클라이언트에게 "응답" 한다.

HTTP와 HTTPS 의 차이

암호화의 차이
HTTPS의 경우 암호화가 필요하기에 추가적인 시간 및 비용이 발생한다.
HTTPS의 S는 secure socket 즉 보안 통신망이다.

URL(Uniform Resource Locator)

인터넷 상의 자원의 위치
특정 웹 서버의 특정파일에 접근하기 위한 경로 혹은 주소
접근 프로토콜 + ip주소 또는 도메인 이름 + 문서의 경로 + 문서이름

브라우저의 동작

브라우저는 월드와이드웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어
서버에서 받은 문서(HTML, CSS, Javascript)를 해석하고 실행하여 화면에 표현하기 위한 해석기(Parser) 들을 가지고 있다.

사파리 브라우저에서 처리되는 webkit렌더링엔진의 처리과정

HTML을 해석해서 DOM Tree를 만들고, CSS를 해석해서CSS Tree(CSS Object Model)을 만든다.
해석 과정에서 Parsing이 필요하며 해석 방식은 소스코드의 컴파일 과정과 비슷하다.
DOM Tree와 CSS Tree는 연관되어 있으므로 Render Tree로 다시 조합된다.
이렇게 조합된 결과는 화면에 표현되는 크기와 위치 정보를 담고 있다.
이후에 이렇게 구성된 Render Tree정보를 통해서 화면에 어떤 부분에 어떻게 색칠을 할지 Painting과정을 거치게 된다.

HTML / CSS 파싱 및 DOM트리 만들기 > (HTML+CSS)렌더트리 만들기 > 렌더트리 배치 > 렌더트리 그리기

브라우저에서의 웹 개발

HTML 문서구조
CSS 코드는 보통 head 태그 안에 두며, 길어지면 link를 이용해서 따로 분리한다.
Javascript 코드는 body 태그 밖에 두며, 길어지면 link 이용해서 따로 분리한다.
Javascript 코드는 위치에 따라 body 태그 내용이 언제 나오는지 달라진다.
JavaScript 코드는 body 태그 닫히기 전에 위치하는 것이 렌더링을 방해하지 않아 좋고,
CSS코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고 할 수 있게 하는 것이 좋다.

웹 서버란?

웹 서버는 소프트웨어를 말하지만 웹 서버 소프트웨어가 동작하는 컴퓨터를 칭한다.
클라이언트가 요청하는 HTML문서나 각종 리소스를 전달한다.
대표적으로 Apache, Microsoft, Nginx, Google 등

WAS(Web Application Server)

클라이언트는 서비스를 제공하는 서버에게 정보를 요청하여 응답 받은 결과를 사용한다.

DBMS(Database Management System)

다수의 사용자들이 데이터베이스 내의 데이터를 접근할 수 있도록 해주는 소프트웨어

대표적으로 mySQL, Oracle 등

미들웨어(middleWare)

클라이언트와 DBMS 사이에 또다른 서버를 두는 방식이며 미들웨어에서는 대부분의 로직을 동작시킨다.

WAS는 일종의 미들웨어로 웹 클라이언트(웹 브라우저) 의 요청 중 보통 웹 애플리케이션이 동작하도록 지원하기 위함이다.

WAS도 보통 자체적으로 웹 서버 기능을 내장하고 있다.
하지만 규모가 커질수록 웹 서버와 WAS를 분리한다. 그 목적은 장애 극복 기능(failover)인 경우가 많다. 즉, 웹 사이트를 무중단으로 운영하기 위해서 사용한다.