web application은 어떻게 작동하는가?

HTTP requests and responses 과정

출처 : https://codesensei.medium.com/http-request-and-response-and-how-web-applications-work-76780d4cb14c

 

Chrome, Firefox, Safari와 같은 Browser를 열고 Website의 URL(예:hackerhero.com)을 입력하면 

Browser는 어떤 컴퓨터가 입력한 URL에 해당하는 사이트에 대한 정보를 갖고 있는지 알아야 한다. 

 

DNS Server은 이름과 전화번호를 매칭 하는 전화번호부와 같이 웹사이트와 IP주소를 매칭 한 리스트를 갖고 있다. 

DNS Server은 Browser에게 가져온 Website에 해당하는 IP주소를 알려준다. 알맞은 IP주소를 찾게 되면 해당 주소를 갖고 있는 Server Computer에게 http requests를 보낸다. 

 

Server Computer는 받은 http request에 따라 일정 동작을 내부적으로 처리한 뒤 결과를 http response로 Browser에게 보낸다. 

 

http response는 기본적으로 Webstie의 기본적인 틀과 텍스트를 포함하는 html디자인적 요소를 포함하는 css화면의 동적인 요소를 담당하는 javascript로 구성되어 있으며 Browser는 위의 구성요소들을 바탕으로 하여 사용자가 보는 화면을 랜더링 해준다.

 

 

 

IKEA store 비유

출처 : https://codesensei.medium.com/http-request-and-response-and-how-web-applications-work-76780d4cb14c

 

가구를 사기 위해 IKEA에 방문한 고객들은 각자 구매하고자 하는 가구를 나타내는 "주문 양식"을 작성한 채로 가게에 들어가기 위해 줄에 서 대기하고 있다. 

 

1. 차례가 된 고객이 접수원에게 "주문 양식"을 주면 접수원들은 주문을 직원들에게 넘겨준다.  

 

직원들은 한국어, 영어, 독일어 등 다양한 언어중 하나를 사용하여 주문을 처리하기 위해 서로 의사소통을 한다. 

 

2. 직원들이 주문이 들어온 가구를 조립하기 위한 부품을 받기 위하여 창고에 방문하여 창고관리자에게 원하는 부품을 요청한다. 

 

3. 창고관리자는 직원에게 요청받은 부품을 내어주고 직원들은 이 부품들을 이용하여 주문이 들어온 가구를 조립한다. 

 

4. 조립이 완료되면 가구를 접수원에게 건네준다. 

 

접수원은 고객에게 완성된 가구를 전달하고 다음 고객에 대해서 위의 과정을 반복한다. 

 

 

 

IKEA store 비유가 어떻게 Server에 적용될까?

출처 : https://codesensei.medium.com/http-request-and-response-and-how-web-applications-work-76780d4cb14c

 

 

- 고객들이 주문 양식에 작성한 주문은 http request이라고 할 수 있다.  

- 접수원 web Server이다. 

- 직원들이 사용하는 언어는 Python, JAVA 등과 같은 프로그래밍 언어이다. 

- 가구를 조립할 부품들을 모아둔 창고는 data를 저장한 database이다. 

 

Key Points

1. Apache HTTP 또는 Nginx와 같은 Web Server는 http requests를 받아 특정 프로그래밍 언어에 전달한다. 

 

2. 직원들이 받은 요청을 처리하기 위해 Python, JAVA, PHP 중 하나의 특정 언어를 사용하여 서로 의사소통하며

data를 조합하거나 가공하며 필요한 경우 Data base에 접근하여 data를 가져온다.

이때 주목할 점은 고객들은 직원들이 어떤 언어를 사용하든 관심이 없으며 원하는 요청만 잘 처리하면 된다.

 

3. 창고는 database를 나타내며 가구를 조립하는데 필요한 부품들을 정리하는 다양한 방법이 있는 것처럼

다양한 목적을 위해 최적화된 다양한 database가 존재한다. 

 

4. IKEA 비유에서 가구는 HTML, CSS, Javascript를 나타내며

특정 언어(프로그램 언어)를 사용하는 직원들에 의해 조립되어 고객에게 전해지는 최종 출력이다. 

 

5. 서버 내부에서 request를 처리하기 위한 방법들을 정해 놓는 프로그래밍을 'Back end'라고 한다. 

 

6. Browser 상에 HTML, CSS, javascript을 이용하여 사용자가 볼 수 있는 화면을 구성하는 것을 'Front end'라고 한다. 

 

7. 프로그래밍 언어와 다양한 Database는 서로 종속되지 않기 때문에 어떠한 조합도 가능하지만 

Web Server는 특정 프로그래밍 언어와 함께 작동하도록 구축되는 경우가 많다. 

 

 

Intro to Frameworks

Frameworks는 IKEA 직원들이 가구를 어떻게 조립해야 할지를 정해 놓은 작업 지침서와 같이 

프로그래밍 언어가 요청을 처리하기 위해  어떻게 작동해야 하는지에 대한 특정 철학을 가진 코드 모음이다. 

 

유명한 Frameworks 중 하나인 MVC를 예를 들면 다음과 같다. 

 

MVC는 요청을 처리하기 위해 작동하는 방식을 세가지 영역으로 구분하여 나타낸다. 

 

1. 'Models'(MVC의 M)라는 그룹은 데이터베이스와 관련된 모든 작업을 처리한다. 

 

2. 'Views'(MVC의 V)라는 그룹은 사용자가 최종적으로 보게 되는 HTML, CSS 및 Javascript를 함께 처리한다. 

 

3. 'Controller'(MVC의 C)라는 그룹은 고객이 요청하는 정보를 가져와 작업을 수행하는 사람을 제어하고 조정한다.

컨트롤러를 정보 흐름을 관리하는 Models와 Views의 사장이라고 생각하면 편하다. 

 

- 아래 그림은 각 프로그래밍 언어에서 사용되는 MVC Frameworks를 정리한 것이다. 

출처 : https://codesensei.medium.com/http-request-and-response-and-how-web-applications-work-76780d4cb14c

* 주의 : MVC는 직원들이 일하는 방식을 구성하는 하나의 방법일 뿐이며 다양한 방법들이 존재한다. 

 

 

★ 출처

Http request and response and how web applications work

---