# 브라우저와 서버의 통신 과정

## 통신 과정 한 눈에 보기

![기존의 기술과 \`AJAX\`의 차이점](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MQx0fk_vV-x9RA6Gx4B%2F-MQx1ClnjOBkIVv2R6Wh%2Fimage.png?alt=media\&token=b9c50d13-2df0-446e-8112-5c55d26cd102)

* datastore : 데이터 저장소 
* backend processing: 백엔드에서 처리하는 공정 
* legacy systems : 기존의 시스템이라고 볼 수 있다. 즉, 서버에서 하는 일(체계)이다. 
* server-side : 서버 측 
* systems 시스템(체계)

![브라우저 통신](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MQx2TyXjHL0m6L1fQll%2F-MQx4ne9NEJwkhvOnTA4%2Fimage.png?alt=media\&token=633b6a30-80b6-4e07-a269-2f826ed1e41a)

1. 사용자가 도메인을 통해 사이트를 **요청**하면 브라우저에서는 서버에 데이터를 요청(통신)한다.
2. 요청된 데이터를 꺼내서 사용자의 브라우저에 데이터를 **전송**(응답)한다. 
3. 전송받은 데이터를 브라우저는 **조합**을 해서 `UI`에 **렌더링** 한다.

## 음식 주문에 비유

위의 설명을 좀 더 쉽게 와 닿도록 식당이라는 환경에서 보자

![브라우저와 서버의 통신 과정을 음식 주문에 비유](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MQxA1LMBYkEPKaMj6bU%2F-MQxAb5GLWYQnlVbBQ64%2Fimage.png?alt=media\&token=764e2fb0-bb0e-4c93-84f0-0f0925f7c467)

1. 손님이 메뉴판(UI)을 보고 음식을 주문(요청)한다. 
2. 주문을 주방(서버)에 전달 
3. 식품창고(데이터베이스)에서 재료(데이터)를 요청 
4. 주방에서 요리를 만든다 
5. 완성된 요리를 손님에게 제공(응답)