[스파르타코딩클럽] 💻 웹개발 종합 - 4주차

[ Flask 프레임워크 ]

- 공식 홈페이지 : https://flask-docs-kr.readthedocs.io/ko/latest/index.html

- 파이썬으로 작성된 마이크로 웹 프레임워크

- Werkzeug 툴킷과 Jinja2 템플릿 엔진에 기반을 둔 프레임워크

- 웹 엔진과 붙여 사용 가능하며, API 서버를 만들기에 편리하다는 장점이 있음

[ Flask Application ]

- 주로 서버를 실행할 메인 파일을 app.py로 지칭하여 사용

- 파일 실행 시 http://localhost:5000/ 위치를 통해 연결 확인 가능

# 기본 형식
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello World!'

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True) # port번호를 통해 접속

[ Flask Routing ]

- 웹 애플리케이션은 구조화된 URL로 구성되어 있으며,

사용자가 인덱스 페이지를 거치지 않고 바로 원하는 페이지로 접근할 수 있음

- 위의 route() 데코레이터는 함수와 URL을 연결해주는 역할을 함

# 기본 형식
@app.route(‘/’)       # localhost:5000/ 페이지
def index():
  return ‘Index Page’
  
@app.route(‘/hello’)  # localhost:5000/hello 페이지
def hello():
  return ‘Hello World’

[ Flask 프레임워크 사용시 기본 구조 세팅 ]

- 프로젝트 폴더

└ static 폴더 (이미지, css 파일 관리)

└ templates 폴더 (html 파일 관리)

└ app.py (main 파일)

[ render_template Method ]

- 기본 프로젝트 폴더 내에 templates 폴더를 생성하여 html 파일을 관리할 경우

- render_template() 메소드를 통해 html파일을 간단하게 app.py와 render 가능

# 기본 형식
from flask import render_template

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

- Flask는 jinja 템플릿 엔진을 통해 자동으로 templates/html 파일을 이스케이핑

[ API 생성 예제 ]

- templates/ 폴더내에 index.html 생성

- 메인 앱이 될 app.py와 routing 방식을 사용하여 GET 요청 / POST 요청 방식으로 연결 확인

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- aJax / jQuery CDN -->
    <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>

통신 요청 방식	사용 범위	데이터 전달 방법
GET	- 통상적으로 데이터 조회 요청 - 데이터의 변동 없음 - Ex) 영화 목록 조회	- URL 뒤에 물음표를 붙여 key=value로 전달
POST	- 통상적으로 데이터 생성, 변경, 삭제 등 요청 - Ex) 회원가입, 회원탈퇴, 비밀번호 변경	- 보이지 않는 HTML body에 key:value 형태로 전달

# app.py
from flask import Flask
app = Flask(__name__)

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

# 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!'})

# 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!'})

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

(좌) 콘솔을 통한 GET 요청 정상 확인 (우) 콘솔을 통한 POST 요청 정상 확인

통신 요청 방식	ajax 요청 코드
GET	- type : "GET" - url : "/url?key=value" - data : { }
POST	- type : "POST" - url : "/url" - data : { key : value }

[ BS4 모듈을 통한 메타태그 크롤링 ]

- 메타태그(MetaTag) : 검색엔진 최적화(SEO)를 위한 웹페이지의 요약 정보를 담고 있는 태그

- 반드시 <body/> 태그 앞에 위치해야 하며 브라우저와 검색 엔진을 통해 해당 웹페이지의 정보를 나타낼 때 사용

# meta 태그 크롤링 예제
import requests
from bs4 import BeautifulSoup

# -- requests settings --
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)

# -- bs4 settings --
soup = BeautifulSoup(data.text, 'html.parser')

# -- meta tag crawling --
og_title = soup.select_one('meta[property="og:title"]')['content']
og_image = soup.select_one('meta[property="og:image"]')['content']
og_description = soup.select_one('meta[property="og:description"]')['content']

print(og_title) # 네이버 영화 페이지의 제목 출력
print(og_image) # 네이버 영화 페이지의 이미지 링크 출력
print(og_description) # 네이버 영화 페이지의 설명 텍스트 출력

《 모두의 책 리뷰 미니 프로젝트 예제 》

[ 폴더구조 ]

- bookReview

└ static

└ templates

└ index.html

└ app.py

[ 리뷰 저장 ]

- (클라이언트) 제목, 저자, 리뷰를 사용자가 직접 입력하여 POST 요청 방식으로 서버에 데이터를 전달

- (서버) 클라이언트로부터 전달받은 데이터를 DB에 저장

[ 리뷰 도식화 ]

- (서버) DB로부터 모든 데이터를 가져와서 클라이언트로 전달

- (클라이언트) 서버로부터 GET 요청 방식으로 전달받은 데이터를 브라우저에 표현

[ 클라이언트 파일 (index.html) JavaScript 코드 ]

- $(document).ready(function( ) ) { } : 브라우저가 불려오는 즉시 실행 되는 함수(최초 실행 함수)

  $(document).ready(function () {
    showReview();
  });

- makeReview( ) : 리뷰 박스의 각 요소들의 값을 가져와 POST요청 방식으로 서버로 전달하는 함수

  function makeReview() {
    let title = $("#title").val();
    let author = $("#author").val();
    let review = $("#bookReview").val();
    $.ajax({
      type: "POST",
      url: "/review",
      data: { title_give: title, author_give: author, review_give: review },
      success: function (response) {
        alert(response["msg"]);
        window.location.reload();
      },
    });
  }

- showReview( ) : 서버로부터 GET 요청방식을 통해 불러온 데이터들을 HTML 요소에 삽입하는 함수

  function showReview() {
    $.ajax({
      type: "GET",
      url: "/review",
      data: {},
      success: function (response) {
        let reviews = response["all_reviews"];

        for (let i = 0; i < reviews.length; i++) {
          let title = reviews[i]["title"];
          let author = reviews[i]["author"];
          let review = reviews[i]["review"];

          let temp_html = `<tr>
                             <td>${title}</td>
                             <td>${author}</td>
                             <td>${review}</td>
                           </tr>`;
          $("#reviews-box").append(temp_html);
        }
      },
    });
  }

[ 서버 파일 ( app.py ) ]

# app.py
from flask import Flask, render_template, jsonify, request
from pymongo import MongoClient

# -- Flask Server Run --
app = Flask(__name__)

# -- MongoDB Settings --
client = MongoClient('localhost', 27017)
db = client.dbsparta

# render_template 메소드를 통해 HTML 전달
@app.route('/')
def home():
    return render_template('index.html')

# -- API --
# 클라이언트로부터 리뷰 데이터 전달받아 딕셔너리형 데이터 생성 후 DB에 생성 [ POST 요청 ]
@app.route('/review', methods=['POST'])
def write_review():
    title_receive = request.form['title_give']
    author_receive = request.form['author_give']
    review_receive = request.form['review_give']

    doc = { 'title':  title_receive,
            'author': author_receive,
            'review': review_receive }
    db.bookreview.insert_one(doc)

    return jsonify({'msg': '리뷰 저장 완료'})

# DB내 collection의 데이터를 가져와 클라이언트로 전달 [ GET 요청 ]
@app.route('/review', methods=['GET'])
def read_reviews():
    reviews = list(db.bookreview.find({}, {'_id': False}))
    return jsonify({'all_reviews': reviews})


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

[ 완성 모습 ]

《 나홀로 링크 메모장 프로젝트 예제 》

[ 폴더구조 ]

- aloneMemo

└ static

└ index.css

└ templates

└ index.html

└ app.py

[ 기사 저장 ]

- (클라이언트) 포스팅박스를 통해 URL과 코멘트를 POST 요청 방식으로 서버에 전달

- (서버) 전달받은 URL의 메타 태그를 크롤링(제목, 이미지, 설명, 링크)하여 DB에 저장

[ 기사 도식화 ]

- (서버) DB로부터 저장되어 있는 데이터(제목, 이미지, 설명, 링크, 코멘트)를 클라이언트로 전달

- (클라이언트) GET요청 방식을 통해 서버로부터 전달받은 데이터를 브라우저에 표현

[ 기사 제거 ]

- (클라이언트) '삭제' 버튼을 통해 해당 기사의 정보를 POST 요청방식으로 서버에 전달

- (서버) 클라이언트로부터 전달받은 데이터를 DB에서 삭제

[ 클라이언트 파일 (index.html) JavaScript 코드 ]

- $(document).ready(function( ) ) { } : 브라우저가 불려오는 즉시 실행 되는 함수(최초 실행 함수)

  $(document).ready(function(){
    showArticle();
  });

- handleCommenting( ) : 간단 코멘트의 현재 글자수를 표시하고 총 글자수를 24자로 제한하는 함수

  function handleCommenting(response){
    $(".comment_count").html("(" + $(response).val().length + " / 24" + ")");
    if($(response).val().length > 24){
      $(response).val($(response).val().substring(0, 24));
      $(".comment_count").html("(24 / 24)");
    }
  }

- handlePosting( ) : 초기 포스팅박스를 '닫기' 상태로 유지하고 클릭시 마다 상태가 변하는 함수

  function handlePosting(){
    let status = $('.posting-box').css('display');
    if(status == 'block'){
      $('.posting-box').hide();
      $('#btn-posting-box').text('포스팅박스 열기');
    }else{
      $('.posting-box').show();
      $('#btn-posting-box').text('포스팅박스 닫기');
    }
  }

- handleRemove( ) : 기사 '삭제' 버튼 클릭시 확인 안내 문구를 보여주는 함수

  function handleRemove(response){
    if(confirm("정말 삭제하시겠습니까?")){
      deleteArticle($(response));
    } else{
      false;
    }
  };

- deleteArticle( ) : 현재 눌러진 '삭제' 버튼 요소의 'title'과 'comment' 값을 POST요청 방식으로 서버로 전달하는 함수

  function deleteArticle(response){
    let data = $(response)[0].dataset;
    let title = data.title;
    let comment = data.comment;
    $.ajax({
        type : 'post',
        url : '/delete',
        data : {article_title : title, article_comment : comment},
        success: function(response){
            alert(response["msg"]);
            window.location.reload()  // 페이지 새로 고침
        }
    })
  }

- postArticle( ) : 현재 포스팅박스의 url 값과 comment 값을 POST요청 방식으로 서버로 전달하는 함수

  function postArticle(){
    let url = $(".post-url").val();
    let comment = $(".post-comment").val();
    $.ajax({
        type : 'post',
        url : '/memo',
        data : {url_give : url, comment_give : comment},
        success: function(response){
            alert(response["msg"]);
            window.location.reload()  // 페이지 새로 고침
        }
    })
  }

- showArticle ( ) : 서버로부터 GET요청 방식을 통해 title, image, comment 등의 정보를 전달받아 html 요소에 삽입하는 함수

  function showArticle(){
    $.ajax({
      type: "GET",
      url: "/memo",
      data: {},
      success: function(response){
        let articles = response['all_articles'];
        for(let i=0; i<articles.length; i++){
          let title = articles[i]["title"];
          let image = articles[i]["image"];
          let comment = articles[i]["comment"];
          let url = articles[i]["url"];
          let description = articles[i]["description"];

          let temp_html = `<div class="card">
                            <img
                              class="card-img-top"
                              src="${image}"
                              alt="Card image cap"
                            />
                            <div class="card-body">
                              <a href="${url}" class="card-title">${title}</a>
                              <p class="card-text">${description.slice(0, 180)}</p>
                              <p class="card-comment">${comment.slice(0, 24)}</p>
                            </div>
                            <button type="button"
                                    class="article-btn btn btn-danger" 
                                    data-title="${title}"
                                    data-comment="${comment}"
                                    onclick="handleRemove(this)">삭제</button>
                          </div>`;

          $(".card-columns").append(temp_html);
        }
      }
    })
  }

[ 서버 파일 ( app.py ) ]

from flask import Flask, render_template, jsonify, request
import requests
from bs4 import BeautifulSoup
from pymongo import MongoClient

# -- flask settings --
app = Flask(__name__)

# -- pyMongo settings --
client = MongoClient('localhost', 27017)
db = client.dbsparta

## -- flask APP Routing --
@app.route('/')
def home():
   return render_template('index.html')

# Listing API
@app.route('/memo', methods=['GET'])
def listing():
    articles = list(db.articles.find({}, {'_id': False}))
    return jsonify({'all_articles': articles})

# Posting API
@app.route('/memo', methods=['POST'])
def saving():
    url_receive = request.form['url_give']
    comment_receive = request.form['comment_give']

    # request
    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_receive, headers=headers)

    # bs4 set
    soup = BeautifulSoup(data.text, 'html.parser')
    og_title = soup.select_one('meta[property="og:title"]')['content']
    og_image = soup.select_one('meta[property="og:image"]')['content']
    og_description = soup.select_one('meta[property="og:description"]')['content']

    # pyMongo set
    doc = {'title': og_title,
           'image': og_image,
           'description': og_description,
           'url': url_receive,
           'comment': comment_receive}

    db.articles.insert_one(doc)

    return jsonify({'msg': '기사 저장이 완료되었습니다.'})

# Delete API
@app.route('/delete', methods=['POST'])
def delete_article():
    title = request.form['article_title']
    comment = request.form['article_comment']

    # pyMongo set
    collection = db.articles
    target_data = collection.find_one({'title': title, 'comment': comment}, {'_id': False})
    collection.delete_one(target_data)

    return jsonify({'msg': '기사가 제거되었습니다.'})

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

[ 완성 모습 ]

《 나홀로 쇼핑몰 프로젝트 예제 》

[ 폴더구조 ]

- aloneShop

└ static

└ index.css

└ eva_t.jpg

└ templates

└ index.html

└ app.py

[ 주문 정보 저장 ]

- (클라이언트) 주문 정보 입력을 통해 이름, 수량, 주소, 전화번호를 POST 요청 방식으로 서버에 전달

- (서버) 전달받은 데이터들의 정보를 DB에 저장

[ 주문 내역 표시 ]

- (서버) DB로부터 저장되어 있는 데이터를 클라이언트로 전달

- (클라이언트) GET요청 방식을 통해 서버로부터 전달받은 데이터를 브라우저에 표시

[ 주문 내역 제거 ]

- (클라이언트) 'X' 버튼을 통해 해당 주문내역의 정보를 POST 요청방식으로 서버에 전달

- (서버) 클라이언트로부터 전달받은 데이터를 DB에서 삭제

[ 클라이언트 파일 (index.html) JavaScript 코드 ]

- $(function( ) ) { } : 브라우저가 불려오는 즉시 실행 되는 함수(최초 실행 함수)

  $(function () {
    $(".exchange_rate__btn").empty(); // 환율 표시란 비우기
    $.ajax({                          // GET요청 방식으로 새로고침시 마다 새로운 환율 적용
      type: "GET",
      url: "http://spartacodingclub.shop/sparta_api/rate",
      data: {},
      success: function (response) {
        let rate = response["rate"];

        $(".exchange_rate").append(`<span>: ${rate}</span>`);
      },
    });

    showOrders()                      // 주문내역 표시
  });

- showOrders( ) : GET요청 방식을 통해 서버로부터 받은 데이터를 HTML 요소에 삽입하는 함수

  function showOrders(){
    $.ajax({
      type: "GET",
      url: "/orderInfo",
      data: {},
      success: function(response){
        let orders = response['all_orders'];
        for(let i=0; i<orders.length; i++){
          let order_name = orders[i]["order_name"];
          let order_amount = orders[i]["order_amount"];
          let order_address = orders[i]["order_address"];
          let order_phone = orders[i]["order_phone"];

          let temp_html = `<tr>
                            <td>${order_name}</td>
                            <td>${order_amount}</td>
                            <td>${order_address}</td>
                            <td>${order_phone}
                              <button type="button"
                                      class="delete-btn btn btn-danger"
                                      data-name="${order_name}"
                                      data-amount="${order_amount}"
                                      onclick="handleRemove(this)">X</button>
                            </td>
                          </tr>`;

          $(".orders_table").append(temp_html);
        }
      }
    })
  }

- addOrders( ) : 입력한 주문정보 값을 가져와 POST요청 방식으로 서버로 전달하는 함수

  function addOrders(){
    let name = $(".order-name").val();
    let amount = $(".order-amount").val();
    let adreess = $(".order-address").val();
    let phone = $(".order-phone").val();
    $.ajax({
        type : 'post',
        url : '/orderInfo',
        data : {name_give: name, amount_give: amount,
               address_give: adreess, phone_give: phone },
        success: function(response){
            alert(response["msg"]);
            window.location.reload()  // 페이지 새로 고침
        }
    })
  }

- deleteOrder( ) : 'X' 버튼 클릭을 통해 해당 주문내역의 정보를 POST 요청방식으로 서버로 전달하는 함수

  function deleteOrder(response){
    let data = $(response)[0].dataset;
    let name = data.name;
    let amount = data.amount;
    $.ajax({
        type : 'post',
        url : '/delete',
        data : {order_name : name, order_amount : amount},
        success: function(response){
            alert(response["msg"]);
            window.location.reload()  // 페이지 새로 고침
        }
    })
  }

[ 서버 파일 ( app.py ) ]

from flask import Flask, render_template, jsonify, request
from pymongo import MongoClient

# -- flask settings --
app = Flask(__name__)

# -- pyMongo settings --
client = MongoClient('localhost', 27017)
db = client.dbsparta

## -- flask APP Routing --
@app.route('/')
def home():
   return render_template('index.html')

# Listing API
@app.route('/orderInfo', methods=['GET'])
def listing():
    orders = list(db.orders.find({}, {'_id': False}))
    return jsonify({'all_orders': orders})

# Ordering API
@app.route('/orderInfo', methods=['POST'])
def saving():
    name_receive = request.form['name_give']
    amount_receive = request.form['amount_give']
    address_receive = request.form['address_give']
    phone_receive = request.form['phone_give']

    # pyMongo set
    doc = {'order_name': name_receive,
           'order_amount': amount_receive,
           'order_address': address_receive,
           'order_phone': phone_receive}

    db.orders.insert_one(doc)

    return jsonify({'msg': '주문이 완료되었습니다.'})

# Delete API
@app.route('/delete', methods=['POST'])
def delete_article():
    name = request.form['order_name']
    amount = request.form['order_amount']

    # pyMongo set
    collection = db.orders
    target_data = collection.find_one({'order_name': name, 'order_amount': amount}, {'_id': False})
    collection.delete_one(target_data)

    return jsonify({'msg': '주문 정보가 제거되었습니다.'})

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

[ 완성 모습 ]

저작자표시 비영리 변경금지

《 모두의 책 리뷰 미니 프로젝트 예제 》

《 나홀로 링크 메모장 프로젝트 예제 》

《 나홀로 쇼핑몰 프로젝트 예제 》

티스토리툴바