웹개발 종합반 4주차

핵심 : HTML과 mongoDB 연동을 통한 서버 구축.

1. 파이썬 Flask패키지 => 웹서버

Flask 프레임워크 : 서버를 구동시켜주는 편한 코드 모음. 서버 구동 시 필요한 것들을 가져다 쓸 수 있다.

# 플라스크 기본 코드
from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

=> 위의 코드는 Flask 서버 기본 세팅이 되는 코드다.

디렉토리 구조 : static(이미지나 CSS파일), templates(html파일), app.py(Flask가 동작하는 파이썬 파일, 서버파일), venv 디렉토리는 Virtual Environment 즉, 가상 환경 디렉토리이다. 반드시 생성되어야 하며 만지지 말자!!

=> templates 디렉토리 안에 index.html이 제일 처음 보여지는 웹 페이지가 됨. 즉, app.py는 templates/index.html을 제일 처음 보여주게 짜여져있음. 는 아래문장 참고.

@app.route('/')
def home():
   return render_template('index.html')

2. index.html 띄워보기.

<templates/index.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>서버를 만들었다!</h1>
</body>
</html>

<app.py>

from flask import Flask, render_template
app = Flask(__name__)

## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.

@app.route('/')
def home():
   return render_template('index.html')

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

3. GET과 POST

* GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회 → 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달 → 예: google.com?q=북극곰

* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정 → 데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달

ㆍGET 요청 API 코드

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

ㆍGET 요청 확인 Ajax 코드 (크롬 검사 -> 콘솔에 쳐보면 나옴.)

$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
  })

ㆍPOST 요청 API 코드

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

ㆍPOST 요청 확인 Ajax 코드

$.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
    success: function(response){
       console.log(response)
    }
  })

4. meta 태그

<head> </head> 부분에 들어가는 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그. ex) 검색엔진에 표시되는 설명문, 사이트 제목, 카톡 공유시 표시될 이미지.

og : SNS에 공유할 때 미리보기로 보여지는 것. (카톡 공유할 때 페이지 사진이랑 글 뜨는 것 처럼)

meta 태그 스크래핑(크롤링)

import requests
from bs4 import BeautifulSoup

url = 'https://movie.naver.com/movie/bi/mi/basic.nhn?code=171539'

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get(url,headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

# 여기에 코딩을 해서 meta tag를 먼저 가져와보겠습니다.
# select_one으로 meta tag 가져오기.
og_image = soup.select_one('meta[property="og:image"]')
og_title = soup.select_one('meta[property="og:title"]')
og_description = soup.select_one('meta[property="og:description"]')

print(og_image)
print(og_title)
print(og_description)

# 가져온 meta tag의 content 가져오기
url_image = og_image['content']
url_title = og_title['content']
url_description = og_description['content']

print(url_image)
print(url_title)
print(url_description)

5. 숙제