[TIL] 웹개발 종합반 4주차

오늘은 서버만드는 방법을 배웠다.

- 웹브라우저(프론트엔드)에서, 데이터베이스에 저장되어있는 데이터를 가져오는 작업을했다.

 

- Flask 프레임워크를 활용해, 서버와 API를 만들었다. 

(프레임워크란 ? 웹사이트 등 소프트웨어를 더 쉽게 구축할 수 있도록 도와주는 도구 모음 같은 것들 )

 

Flask 프레임워크는 웹 서버를 구동하는데 필요한 복잡한 코드들을 쉽게 가져다 쓸 수 있다는 장점이 있었다.

 

Flask 프레임워크를 이용하기위해, VSCODE 에서 app.py(백엔드 부분)파일을 생성해야한다. (Flask 프레임워크에서 정한 규칙)

또한, templates 폴더안에 index.html(프론트엔드 부분) 을 생성해야한다. 

-여기까지가 규칙이었다.

 

또한 Flask 프레임워크에서, 원하는 라이브러리만 설치해서 관리할 수 있도록, 가상환경 (쉽게말해 무언가를 담을 수 있는 공구함)을 만들었다

( 명령어 : python -m venv venv ) 

 

클라이언트와 서버 연결 

---

(서버 코드 - app.py)

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
 
# MongoDB 연결
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.prmf9xh.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
 
# 메인 페이지 라우팅
@app.route('/')
def home():
    return render_template('index.html')
 
# POST 요청 처리
@app.route("/mars", methods=["POST"])
def mars_post():
    # 클라이언트에서 전달된 데이터 받기
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']
    
    # MongoDB에 저장할 문서 만들기
    doc = {
        'name' : name_receive,
        'address' : address_receive,
        'size':size_receive
    }
    # MongoDB에 문서 삽입하기
    db.mars.insert_one(doc)
 
    # 클라이언트에게 응답하기
    return jsonify ({'msg':'저장완료'})
 
# GET 요청 처리
@app.route("/mars", methods=["GET"])
def mars_get():
    # MongoDB에서 저장된 문서들 가져오기
    mars_data = list(db.mars.find({},{'_id':False}))
    
    # 가져온 문서들을 클라이언트에게 응답하기
    return jsonify({'result':mars_data})
 
if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)
 

(클라이언트 코드 - index.html)

<script>
    // 문서가 준비되면 show_order 함수 실행
    $(document).ready(function () {
        show_order();
    });
 
    // 주문 목록 가져오는 함수
    function show_order() {
        // /mars 경로로 GET 요청
        fetch('/mars').then((res) => res.json()).then((data) => {
            console.log(data);
            let rows = data['result'];
 
            // order-box 엘리먼트 초기화
            $('#order-box').empty();
 
            // 주문 목록을 테이블에 추가
            rows.forEach((a) => {
                let name = a['name'];
                let size = a['size'];
                let address = a['address'];
 
                let temp_html = `<tr>
                                    <td>${name}</td>
                                    <td>${address}</td>
                                    <td>${size}</td>
                                </tr>`;
                $('#order-box').append(temp_html);
            });
        });
    }
 
    // 주문 저장 함수
    function save_order() {
        // 입력된 주문 정보 가져오기
        let name = $('#name').val();
        let address = $('#address').val();
        let size = $('#size').val();
 
        // FormData 객체 생성 및 주문 정보 추가
        let formData = new FormData();
        formData.append("name_give", name);
        formData.append("address_give", address);
        formData.append("size_give", size);
 
        // /mars 경로로 POST 요청
        fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
            // 알림 메시지 출력 및 페이지 새로고침
            alert(data["msg"]);
            window.location.reload();
        });
    }
</script>
 

위 코드는 JavaScript 코드로, Flask 애플리케이션과 함께 동작하는 웹 페이지에서 주문 정보를 입력하고 저장하는 기능과, 저장된 주문 정보를 조회하는 기능을 구현하는 코드이다. 코드 내 주석은 다음과 같다.

• $(document).ready() 함수: 문서가 준비되면 실행됩니다. show_order() 함수를 호출한다.
• show_order() 함수: /mars 경로로 GET 요청을 보내서 주문 목록을 가져옵니다. 가져온 주문 목록을 테이블에 추가합니다.
• save_order() 함수: 입력된 주문 정보를 가져와서 /mars 경로로 POST 요청을 보냅니다. POST 요청을 보내면서 입력된 주문 정보를 FormData 객체에 추가합니다. 요청이 완료되면 알림 메시지를 출력하고 페이지를 새로고침합니다.

 

---

두번째로 재미있는 영화를 기록하는 사이트를 만들었다. 직접 URL과 별점 코멘트를 입력하면 아래와 같이 업데이트 된걸 볼 수 있다.

html코드는 강의사이트에서 제공해주는 기초 뼈대들로 구성했고

 

기록하기 버튼을 눌렀을때, 서버에 데이터를 보내서 DB에 저장하고,

웹사이트에 실시간으로 게시되도록 하는 기능을 하는 핵심코드는 아래와같다.

 

(클라이언트 코드 - index.html)

$(document).ready(function () {
    listing(); // 페이지 로딩 시 목록을 보여주는 함수 호출
});
 
function listing() {
    // 영화 목록을 가져와서 카드 형태로 보여주는 함수
    fetch('/movie').then(res => res.json()).then(data => {
        let rows = data['result'];
        $('#cards-box').empty();
        rows.forEach((a) => {
            let comment = a['comment'];
            let title = a['title'];
            let image = a['image'];
            let desc = a['desc'];
            let star = a['star'];
 
            let star_repeat = '⭐'.repeat(star);
 
            let temp_html = `<div class="col">
                                <div class="card h-100">
                                    <img src="${image}" class="card-img-top">
                                    <div class="card-body">
                                        <h5 class="card-title">${title}</h5>
                                        <p class="card-text">${desc}</p>
                                        <p>${star_repeat}</p>
                                        <p class="mycomment">${comment}</p>
                                    </div>
                                </div>
                            </div>`;
            $('#cards-box').append(temp_html);
        });
    });
}
 
function posting() {
    // 새로운 영화 정보를 서버에 전송하는 함수
    let url = $('#url').val();
    let comment = $('#comment').val();
    let star= $('#star').val();
 
    let formData = new FormData();
    formData.append("url_give", url);
    formData.append("comment_give", comment);
    formData.append("star_give", star);
 
    fetch('/movie', {method: "POST",body: formData}).then(res => res.json()).then(data => {
        alert(data['msg']);
        window.location.reload();
    });
}
 
function open_box() {
    // 새로운 영화 정보를 작성하는 폼을 열어주는 함수
    $('#post-box').show();
}
 
function close_box() {
    // 새로운 영화 정보를 작성하는 폼을 닫아주는 함수
    $('#post-box').hide();
}
 

(클라이언트 코드 - app.py)

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
 
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.prmf9xh.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
 
import requests
from bs4 import BeautifulSoup
 
@app.route('/')
def home():
    return render_template('index.html')
 
@app.route("/movie", methods=["POST"])
def movie_post():
    url_receive = request.form['url_give']
    comment_receive = request.form['comment_give']
    star_receive = request.form['star_give']
    
    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)
    soup = BeautifulSoup(data.text, 'html.parser')
 
    ogtitle = soup.select_one('meta[property="og:title"]')['content']
    ogimage = soup.select_one('meta[property="og:image"]')['content']
    ogdesc = soup.select_one('meta[property="og:description"]')['content']
    
    doc = {
       'title' : ogtitle,
       'image' : ogimage, 
       'desc' : ogdesc,
       'url' : url_receive,
       'comment' : comment_receive,
       'star' : star_receive
    }
    
    db.movies.insert_one(doc)
 
    return jsonify({'msg':'저장완료'})
 
@app.route("/movie", methods=["GET"])
def movie_get():
    all_movies = list(db.movies.find({},{'_id':False}))
    return jsonify({'result':all_movies})
 
if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

 

※ 참고 용어

• Flask: 파이썬 웹 프레임워크
• pymongo: 파이썬에서 MongoDB를 다루기 위한 모듈
• requests: HTTP 요청을 보내는 모듈
• BeautifulSoup: HTML, XML 등의 문서에서 원하는 정보를 추출하는 모듈

@app.route('/') : 기본 경로로 접속했을 때 실행되는 함수입니다. render_template 함수를 이용해 index.html 파일을 불러오고, 이를 사용자에게 보여줍니다.

@app.route("/movie", methods=["POST"]): "/movie" 경로로 POST 방식의 요청이 들어왔을 때 실행되는 함수입니다. 사용자가 입력한 URL을 이용해 requests 모듈을 이용해 HTML을 가져오고, BeautifulSoup 모듈을 이용해 원하는 정보를 추출합니다. 이를 이용해 MongoDB에 새로운 도큐먼트를 생성합니다.

@app.route("/movie", methods=["GET"]): "/movie" 경로로 GET 방식의 요청이 들어왔을 때 실행되는 함수입니다. MongoDB에 저장된 도큐먼트를 모두 불러와 JSON 형식으로 반환합니다.

if __name__ == '__main__':: 이 코드가 실행될 때만 웹 애플리케이션이 동작합니다. '0.0.0.0'은 모든 IP에서 접근 가능하도록 설정하고, port=5000은 포트 번호를 5000으로 설정합니다. debug=True는 디버그 모드를 활성화합니다.