Client-Server overview-2

Kim Jin Seong·2022년 4월 4일

web

Django

목록 보기

8/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 코드로 수행해야 하는 작업에 대한 이해

Static Sites

정적 사이트는 특정 리소스가 요청될 때마다 서버에서 하드 코딩된 컨텐츠를 반환하는 사이트이다.
만약 /static/myproduct1.html 에 제품 정보에 대한 페이지가 담겨있다면, 이 페이지는 어떤 사용자에게나 동일하게 반환되고, 비슷한 제품을 사이트에 추가하고 싶다면 다른 페이지를 추가해야할 것이다.
이는 다른 섹션을 추가하는 경우 모든 페이지를 개별적으로 변경해야하는 수고를 감수해야하기 때문에, 매우 비효율적이다.
적은 수의 페이지를 가지고 있거나, 같은 컨텐츠를 모든 유저에게 보내고 싶을 때 유리
작동 방식
1. 사용자가 페이지 탐색을 원할 때, 브라우저는 지정된 HTML 페이지의 URL에 HTTP GET Request를 보낸다.
2. 서버는 요청 받은 문서를 파일 시스템에서 탐색하고 문서와 HTTP Response status code 200 OK를 포함하는 HTTP Response를 반환한다.
  1. 다른 코드도 반환 가능: 404 Not Found, 301 Moved Permanently
정적 사이트는 GET Request만 필요한데, 정적 사이트에 대한 서버는 변경할 수 있는 데이터는 저장하지 않기 때문에, Response를 바꿀 필요가 없다.

Dynamic Sites

동적 사이트는 특별한 URL과 데이터 요청에 의해 생성된 컨텐츠를 반환할 수 있다.
데이터 베이스에 저장된 데이터를 이용
- Get Request 받음
- 서버는 제품 ID를 결정, 데이터베이스에서 데이터를 가져와 HTML 템플릿에 데이터를 집어넣어 HTML 페이지 생성
데이터 베이스를 통해 제품 정보를 쉽게 확장, 수정 및 효율적으로 저장할 수 있다.

Dynamic Request 자세히 보기

스포츠 팀 매니저 웹 사이트에서 다음 게임을 위해 제안된 최고의 라인업을 얻기 위한 과정을 예시로 동적 HTTP Request 및 Response 사이클에 대해 단계별로 자세히 살펴보자.
코치가 팀 이름과 플레이어의 수를 포함한 폼을 전송했을 때, 작업 시퀀스
1. 웹 브라우저에서 기본 URL을 사용해 서버에 HTTP GET Request 생성
  1. /best
  2. 팀 및 플레이어의 수를 URL 인자로 인코딩 /best?team=my_team_name&show=11
    
    or URL 패턴 /best/my_team_name/11/ 로 인코딩
  3. 데이터를 가져오는 데만 사용하기 때문에 GET Request를 사용한다.
2. 웹 서버에서 해당 Request가 동적임을 감지하고 웹 어플리케이션에 전달.
  1. 정의된 설정에 의한 패턴 매칭방법에 기반해 URL 처리 방법 결정
3. 웹 어플리케이션은 해당 Request가 URL에 기반한 최고의 라인업을 얻는 것인지 확인하고(/best/) URL에서 필요한 팀 이름과 플레이어의 숫자를 찾고 데이터베이스에서 필요한 정보를 가져온다.
  1. 추가로 내부 인자들을 사용해 어떤 플레이어가 최고인지 정의하고, 클라이언트 측 쿠키에서 로그인한 코치의 신분을 확인할 수 있다.
4. 웹 어플리케이션은 이전 단계에서 얻은 데이터와 HTML template을 이용해 HTML 페이지를 동적으로 생성한다.
5. 웹 어플리케이션은 생성된 HTML 페이지를 웹 서버를 경유한 뒤, 브라우저에게 HTTP 상태 코드 200 OK 와 함께 반환한다.
  1. HTML 반환이 실패한다면 다른 코드와 반환된다. 404 등
6. 웹 브라우저가 반환된 HTML을 처리하고 HTML에서 참조하는 다른 CSS 파일이나 Javascript 파일을 얻기 위해 별도의 Request를 보낸다.
7. 웹 사이트는 파일 시스템에 있는 정적 파일을 가져오고 죽시 브라우저에 반환한다.
데이터베이스에 업데이트를 기록하는 것도 비슷한 과정을 통해 처리한다.
- 단, POST Request로 인코딩 되어야 한다.

웹 어플리케이션이 수행하는 추가적인 작업

웹 어플리케이션의 작업은 HTTP Requests를 전달 받고 HTTP Responses를 반환하는 것이다.
보통 데이터베이스와 상호작용해 정보를 얻어오거나 업데이트를 진행하지만, 다른 작업을 처리하거나 데이터베이스와 상호작용을 하지 않을 수도 있다.
예를 들면, 사용자가 사이트에 등록되어 있는지 확인하기위해 이메일을 보내는 것과 같이 로깅 또는 기타 작업을 수행할 수 있다.

HTML 외에 반환할 수 있는 것

Server-side 웹 사이트 코드는 HTML 스니펫/파일만을 반환하지는 않는다.
text, PDF, SCV 등 다양한 파일과 JSON, XML 등의 데이터를 동적으로 생성해 반환할 수 있다.
페이지 컨텐츠( AJAX )를 동적으로 업데이트할 수 있도록 데이터를 웹 브라우저로 반환하는 아이디어는 꽤 오래전부터 고안되어왔다.
최근에는 단일 페이지 앱이 인기가 있어짐에 따라, 웹 사이트는 필요한 경우 동적으로 업데이트 되는 단일 HTML 페이지로 작성되었다.
이런 스타일의 웹 사이트는 서버에서 해야할 계산을 웹 브라우저에서 처리해 웹 사이트가 기본 어플리케이션처럼 작동하도록 할 수 있다.

Framework를 통한 Server-side 웹 프로그래밍 단순화

Server-side Web Framework는 지금까지 설명한 작업을 쉽게 처리할 수 있는 코드를 제공한다.
리소스/페이지에 대한 URL을 특정 처리 기능에 매핑하는 메커니즘 제공
- 분리된 리소스의 타입에 대한 코드 보관을 간단하게 만들어 준다.
- 핸들러 기능을 변경하지 않고, 한 섹션에서 특정 기능을 위해 사용되는 URL을 변경할 수 있기 때문에, 유지 보수 측면에서도 이점을 가진다. e.g. 리소스 URL이 /best, /best/junior 인 HTTP 요청 전달 맵핑
```
# file: best/urls.py
#

from django.conf.urls import url

from . import views

urlpatterns = [
    # example: /best/
    url(r'^$', views.index),       # /best를 views 모듈의 index함수에 전달
    # example: /best/junior/
    url(r'^junior/$', views.junior)# /best/junior를 junior 함수에 전달  
]
```
View 함수를 통해 데이터베이스의 정보를 가져오는 작업을 단순화
- 데이터 구조는 기본 데이터베이스에 저장할 필드를 저장하는 .model 클래스에서 정의된다.
- 아래 예제는 정확한 team_type이 junior 인 모든 팀의 목록을 가져온다.
```
# best/views.py

from django.shortcuts import render

from .models import Team

def junior(request):
    list_teams = Team.objects.filter(team_type__exact="junior")
    context = {'list': list_teams}
    return render(request, 'best/index.html', context)
```
- junior() 함수가 주니어 팀 목록을 얻은 뒤 원래 HTTP Request, HTML Template, context( 템플릿에 포함될 정보 )를 매개변수로 하는 render() 함수를 호출한다.
- render() 함수는 컨텍스트와 HTML 템플릿을 사용해 HTML을 가공하고 HTTP Response객체에 반환하도록 하는 함수이다.