Client-Server overview-1

Kim Jin Seong·2022년 4월 2일

web

Django

목록 보기

7/10

본 포스팅은 Back-end 개발 입문과 홈페이지 제작 기술 기반 마련을 위한 공부자료입니다.
Django 공식 문서와 MDN web docs를 참고자료로 작성됐습니다.

https://www.djangoproject.com/
https://developer.mozilla.org/ko/docs/Learn/Server-side/Django

목표

서버가 브라우저에게 “동적 요청”을 받을 때 어떤 일이 발생하는지에 대한 이해
Client-Server가 동적 웹사이트에서 어떻게 상호작용을 하는지에 대한 이해
Server-side 코드로 수행해야 하는 작업에 대한 이해

웹 서버와 HTTP

웹 브라우저는 Hyper Text Transport Protocol( HTTP )을 사용해 웹 서버와 통신한다.
- 웹 페이지 링크 클릭, Form 전송, 검색 등을 할 때 HTTP Request 전송
HTTP Request 시 포함되는 정보
- 대상 서버 및 리소스를 식별하기 위한 URL e.g. HTML 파일, 서버의 특별한 데이터 요소, 실행도구 등
- 필요한 기능을 정의할 메소드( 파일 획득, 데이터 저장 등 ) GET: 특정 리소스를 얻는다. e.g. 제품의 대한 정보 또는 제품 목록을 제공하는 HTML 파일 POST: 새로운 리소스를 만든다. e.g. 새로운 기사 추가, DB의 새로운 연결 추가 HEAD: 특정 리소스의 내용 부분을 제외한 메타 데이터 정보를 가져온다. e.g. 리소스가 변경된 경우 GET 요청을 통해 리소스 다운로드 PUT: 기존에 있던 리소스 업데이트( 없다면 새로 생성 ) DELETE: 특정 리소스를 삭제 TRACE, OPTIONS, CONNECT, PATCH: 고급작업을 위함. 자세한 것은 구글링을..!
URL 매개변수 GET Requests
- 이름/값 쌍을 끝에 추가해 서버에 보낸 URL 데이터를 인코딩한다.
  
  e.g. http://mysite.com?name=Fred&age=11 이 있다고 가정한다.
1. ? 는 URL과 URL 매개변수를 분리한다.
2. = 은 매개변수의 이름과 값을 분리한다.
3. & 는 이름/값 쌍을 분리한다.
4. 매개변수는 사용자가 변경해 다시 제출할 수 있으므로 본질적으로 “안전하지 않음”이다.
5. 때문에 URL 매개변수 / GET Request는 서버에 데이터를 업데이트하는 요청에 사용하지 않는다.
POST
- POST Request는 요청한 본문 내에 인코딩된 데이터를 새 리소스에 추가한다.
Cookie
- 클라이언트 측 쿠키는 서버가 로그인 상태 및 권한/자원에 대한 액세스를 결정하는 키를 포함, 클라이언트에 대한 세션 데이터를 포함한다.
웹 서버의 작동 방식
1. 클라이언트의 요청 메시지 수신까지 대기
2. 메시지 수신 시 해당 요청 처리
3. 웹 브라우저에 HTTP Response 메시지 전달
  1. HTTP Response status code 포함: 요청 성공 여부
    
    e.g. 200 0k, 404 Not Found, 403 Forbidden
4. 클라이언트에 HTML 페이지가 반환 되면 웹 브라우저에 의해 렌더링
  1. 이 과정에서 브라우저는 다른 리소스와 링크를 찾을 수도 있다.
    
    e.g. HTML page, 별도의 HTTP Request를 통한 파일 다운로드

`GET` Request

HTTP Request
- 아래 보이는 코드의 각 라인은 요청 정보를 포함하고 있는데, 이런 요청의 첫 부분을 Header라고 한다.

GET https://developer.mozilla.org/en-US/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1
Host: developer.mozilla.org
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: https://developer.mozilla.org/en-US/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7
Accept-Language: en-US,en;q=0.8,es;q=0.6
Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true

첫 번째, 두 번째 라인
- 요청 타입 GET
- 대상 리소스 URL /en-US/search
- URL 인자 q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev
- 대상/호스트 웹 사이트 developer.mozilla.org
- 특정 프로토콜 버전 식별 문자열 HTTP/1.1
마지막 라인
- Server-side 쿠키의 정보 sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...
나머지 라인
- 브라우저 정보, 다룰 수 있는 요청의 정렬한 정보를 포함

`GET` Response

위에 요청에 대한 응답으로 Header에 다음과 같은 정보를 포함하고 있다.

HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer1.webapp.scl3.mozilla.com
Vary: Accept,Cookie, Accept-Encoding
**Content-Type**: text/html; charset=utf-8
Date: Wed, 07 Sep 2016 00:11:31 GMT
Keep-Alive: timeout=5, max=999
Connection: Keep-Alive
**X-Frame-Options**: DENY
Allow: GET
X-Cache-Info: caching
**Content-Length**: 41823

<!DOCTYPE html>
<html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false >
<head prefix="og: http://ogp.me/ns#">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <script>(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);</script>
  ...

응답 성공을 알림 200 OK
응답 포맷 text/html
문자 집합 charset=utf-8
Body의 크기 41823
다른 사이트의 <iframe> 삽입을 허용하지 않음 DENY
Response Header의 나머지 부분은 응답, 서버 및 브라우저가 처리하는 방법에 대한 정보를 포함하고 있다.

`POST` Request

HTTP POST는 사용자의 정보를 포함한 폼을 작성해 서버에 저장하기 위한 요청을 전송할 때 만들어진다.

POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1
Host: developer.mozilla.org
Connection: keep-alive
Content-Length: 432
Pragma: no-cache
Cache-Control: no-cache
Origin: https://developer.mozilla.org
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: https://developer.mozilla.org/en-US/profiles/hamishwillee/edit
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8,es;q=0.6
Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _ga=GA1.2.1688886003.1471911953; ffo=true

csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&**user-fullname=Hamish+Willee**&user-title=&user-organization=&user-location=Australia&user-locale=en-US&user-timezone=Australia%2FMelbourne&user-irc_nickname=&user-interests=&user-expertise=&user-twitter_url=&user-stackoverflow_url=&user-linkedin_url=&user-mozillians_url=&user-facebook_url=

GET Request와 거의 비슷해 보이지만, 첫 번째 줄의 POST 키워드를 통해 이 요청이 POST Request임을 보여주고 있다
가장 큰 차이점은 URL이 인자를 가지고 있지 않다는 것이다.
- 폼을 참조한 정보는 요청 본문에 인코딩 되어 있다. e.g. 새 사용자의 전체 이름 설정 user-fullname=Hamish+Willee

`POST` Response

HTTP/1.1 **302 FOUND**
Server: Apache
X-Backend-Server: developer3.webapp.scl3.mozilla.com
Vary: Cookie
Vary: Accept-Encoding
Content-Type: text/html; charset=utf-8
Date: Wed, 07 Sep 2016 00:38:13 GMT
**Location: https://developer.mozilla.org/en-US/profiles/hamishwillee**
Keep-Alive: timeout=5, max=1000
Connection: Keep-Alive
X-Frame-Options: DENY
X-Cache-Info: not cacheable; request wasn't a GET or HEAD
Content-Length: 0

브라우저에게 POST 성공 302 FOUND
지정된 페이지를 로드하기 위한 HTTP Request 정보 Location
나머지는 GET Response와 유사

Reference

https://developer.mozilla.org/ko/docs/Learn/Server-side/First_steps/Client-Server_overview#anatomy_of_a_dynamic_request

Kim Jin Seong

Data Study

이전 포스트

Server-side Programming Overview

다음 포스트

Client-Server overview-1

Django

목표

웹 서버와 HTTP

`GET` Request

`GET` Response

`POST` Request

`POST` Response

Reference

Server-side Programming Overview

Client-Server overview-2

0개의 댓글

Client-Server overview-1

Django

목표

웹 서버와 HTTP

GET Request

GET Response

POST Request

POST Response

Reference

Server-side Programming Overview

Client-Server overview-2

0개의 댓글

`GET` Request

`GET` Response

`POST` Request

`POST` Response