3. 웹 응용2: 웹 서버

WWW, HTTP, IP 주소와 포트 번호

World Wide Web

WWW

• HTTP 프로토콜을 이용하여 HTML 문서를 전달
• 웹 서버(Web Server): Apache, IIS, Nginx, Lighttpd 등
• 웹 브라우저 (Web Browser): Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari

HTTP (Hyper Text Transfer Protocol)

• HTML 문서의 전달을 정의한 프로토콜

HTML (Hyper Text markup Language)

• Web에서 사용될 하이퍼 텍스트 문서를 만들기 위한 언어
• 태그 (tag)를 기반으로 원하는 정보를 표현

HTTP (HyperText Transfer Protocol)는 웹의 애플리케이션 계층 프로토콜

클라이언트/서버 모델

• 클라이언트는 웹 객체들을 요쳥하고 받아서 디스플레이 하는 브라우저 (browser)
• 서버는 요청에 응답하여 객체들을 보내는 웹 서버

HTTP 요청 메시지 (HTTP Request Message)

• 두 유형의 HTTP 메시지: 요청 (request), 응답 (resopnse)
• HTTP 요청 메시지

HTTP 응답 메시지 (HTTP Response Message)

IP 주소와 포트 번호

• 인터넷에 연결된 컴퓨터는 각각 고유의 IP (Internet Protocol) 주소를 가짐
  IPv4: 32비트, IPv6: 128 비트
• 포트 번호
  컴퓨터 내의 프로세스 (실행 중인 프로그램)을 구분하는 번호
  예: HTTP 서버: 80, FTP 서버: 21
• 윈도우에서 자신의 컴퓨터 IP 주소 확인
  ipconfig 명령
• 루프백 주소 (loopback address)
  자기 자신의 컴퓨터 주소
  127.0.0.1

플라스크 (Flask)

플라스크 (Flask)

플라스크 설치

• prog 가상환경에는 플라스크가 이미 설치되어 있음
  C:> pip install flask
  C:> flask --version

플라스크 기본 사용법

• 플라스크 객체 생성
  from flask import Flask
  app = Flask(name) => 는 언더 스코어 기호 ' ' 2개 연속

• 웹 요청 경로 지정 및 실행 함수 작성
  @ap.route("\") <- 요청 경로 지정
  def hello(): <- 실행 함수 작성
  return "< h1 >Hello World!< \h1 >

• app.route()는 플라스크 route() 함수의 장식자 (decorator)
  함수의 장식자는 기존 함수의 코드를 변경하지 않고 함수의 동작을 조정
  위 코드에서는 route() 함수 (메서드)의 장식자는 플라스크 웹 서버의 '/' 경로로 요청이 들어 오면 hello() 함수의 리턴 값을 웹 브라우저로 응답

• 플라스크 웹 서버 구동
  ifname==" main":
  app.run() <-실행되는 컴퓨터 IP 주소, 포트번호 5000
  IP 주소와 포트 번호 명시적 지정 가능
  app.run(host="127.0.0.1", port="8080")

from flask import Flask

# 플라스크 객체 생성
app = Flask(_name_)

# 웹 요청 경로 실행 함수
@app.route("/")
def hello():
 return "<h1> Hello World!"<h1>
 
 @app.route("hello")
 def hello2():
  return "<h1>안녕, 순천향 !! </h1>"

# 플라스크 서버 구동
if_name_=="_main_":
  app.run()   # 실행되는 컴퓨터 IP 주소, 포트번호 5000
# app.run(host="127.0.0.1" , port="8080")

플라스크 기본 예

from flask import Flask

# 플라스크 객체 생성
app = Flask(_name_)

# 웹 요청 경로 실행 함수
@app.route("/")
def hello():
  return "<h1> Hello World! < /h1 >"

@app.route("/hello")
def hello2():
  return "<h1> 안녕, 순천향 !! < /h1 >"

# 플라스크 서버 구동
if_name_=="_main_":
  app.run()
# app.run(host="127.0.0.1", port="8080")

플라스크 템플릿 (Template)

• 플라스크 Jinja2 템플릿 엔진을 사용하여 독립적인 HTML 파일을 처리
• 템플릿 엔진은 정적인 HTML 문서에 프로그래밍과 처리 기능을 적용하여 동적으로 웹페이지를 생성하고 렌더링

HTML 파일에 동적인 데이터를 표현
사용자에게 보여주는 부분 (HTML)과 처리하는 부분 (응용 코드, 파이썬)을 분리

• 템플릿으로 사용되는 파일들은 templaes폴더에 위치
• render_template() 함수를 사용하여 HTML 파일들을 렌더링

원두 가격 정적 웹 사이트 예 - coffe0.ipynb

from flask import Flask, render_template

# 플라스크 객체 생성
app = Flask(_name_)

# 라우팅 경로 요청 시 실행 함수
@app.route("/prices0")
def prices():
  return render_template("prices0.html")

# 플라스크 서버 구동
if_name_=="_main_":
app.run # 실행되는 컴퓨터 IP 주소, 포트번호 5000

원두 가격 정적 웹 사이트 예 - templates/prices0.html

<html>
  <head>
    <title> Welcome to the Beans'R'Us Pricing Page</title>
  </head>
  
  <body>
    <H2>Welcome to the Beans'R'Us Pricing Page</h2>
    <p>Current price of coffee beans = <strong>$6.42</strong></p>
    <p>Price on Thu Aug 27 16:30:59 2023</p>
  <body>
    </html>

• 하지만 정적인 페이지임.
• Jinja 템플릿 엔진을 사용하여 동적 페이지를 생성할 수 있음.

Jinja 2 기본 구문

• 템플릿 HTML 마크업 기호
• 표현식: {% ...... %}
• 변수: {{ }}
• 주석: {# ...... #}

원두 가격 동적 웹 사이트 예 - coffee.ipynb

from flask import Flask, render_template
# 플라스크 객체 생성
app = Flask(__name__) 

# 라우팅 경로 요청 시 실행 함수
@app.route("/prices")
def prices(): 
  import random
  import time
  
p = random.uniform(4,7) # 원두 커피 가격을 랜덤으로 생성
price = round(p, 2) # 소수점 2자리까지 반올림
daytime = time.asctime() # 현재 시간
return render_template("prices.html", pr = price, dt = daytime)

# 플라스크 서버 구동
if __name__ == "__main__":
  app.run() # 실행되는 컴퓨터 IP 주소, 포트번호 5000

원두 가격 동적 웹 사이트 예 - templates/prices0.html

<html>
  <head>
<title>Welcome to the Beans'R'Us Pricing Page</title>
  </head>
  
<body>
  <h2>Welcome to the Beans'R'Us Pricing Page</h2>
  <p>Current price of coffee beans = <strong>$ {{ pr }} </strong></p>
  <p>Price on {{ dt }} </p>
  </body>
</html>

Jinja2 템플릿 구문 예: for 문 - for.ipynb

from flask import Flask, render_template

app = Flask(__name__)
@app.route('/for')
def loop_test():
  dept_list = ['컴퓨터공학과', '전자공학과', '기계공학과', '화공과']
  return render_template('loop.html', values=dept_list)
if __name__ == '__main__':
  app.run(port="8080") # 8080 포트

Jinja2 템플릿 구문 예: for 문 - templates/loop.html

<!DOCTYPE html>
<html>
  <head>
    <title>Loop</title>
</head>
  <body>
    <div id='main'>
    <ul>
      {% for value in values %}
      <li>{{ value }}</li>
      {% endfor %}
      </ul>
    </div>
  </body>
</html>

Jinja2 템플릿 구문 예: if 문 - if.ipynb

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/if')
def if_test():
return render_template('condition.html', size = "Big")

if __name__ == '__main__':
app.run(port="8080") # 8080 포트

Jinja2 템플릿 구문 예: if 문 - templates/loop.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id='main'>
    {% if size == "Big" %}
    <h1> 안녕, 컴퓨터공학과 ! </h1>
    {% elif size == "Medium" %}
    <h3> 안녕, 컴퓨터공학과 ! </h3>
    {% elif size == "Small" %}
    <h6> 안녕, 컴퓨터공학과 ! </h6>
    {% else %}
    안녕, 컴퓨터공학과 !
    {% endif %}
    <p> Size: {{ size }} </p>
  </div>
  </body>
</html>