개발공부 28일차 [웹개발 종합반 4~5주차 2회완강]

💡라이브러리란?

쉽게 비유 하자면 톱, 망치, 삽 같은 연장(도구)입니다. 
사람들이 흔히 도구를 사용하여 썰고, 박고, 땅파는 역할과 같습니다. 
도구를 사용하다 보면 급할 때는 톱으로 못을 박을 수도 있습니다. 
IT 프로젝트 시에 개발자는 도구를 선택하는 입장이기 때문에, 
어떤 도구를 사용하든 사용자가 원하는 것을 만들어 줄 수만 있으면 됩니다.


💡프레임워크란?
차, 비행기, 배같은 탈것과 같은 운송수단입니다. 
사람이 탑승하여 시동을 걸고, 기어를 넣고, 핸들을 작동하고, 운전을 해야 합니다. 
하지만, 앞서서 제시한 탈것들은 라이브러리처럼 좀처럼 대체가 어렵습니다.

이유는 하늘을 날려면 비행기를 타야하고, 도로를 달리려면, 자동차가 훨씬 유용합니다. 
바다에서는 배를 타야만 합니다. 애초에 그 목적에 맞게 만들어졌기 때문에, 
톱이나 망치를 가지고 탈 것을 직접 만들 필요를 없게 합니다.

다만, 정해진 규칙에 따라 시동걸고, 기어를 넣고, 핸들을 돌리기만 하면 됩니다. 
즉, 라이브러리와는 달리 프레임워크는 이미 프로그래밍할 규칙이 정해져 있음을 말합니다.

flask - 서버만들기

1. 가상환경 만들기
   app.py파일을 생성 후 터미널에 python3 -m vene venv 를 적고 인터프리터 경로를 venv가있는걸로 변경한다.
2. 플라스크 라는 프레임워크 깔기 pip install flask
3. templates 폴더 만들고 index.html파일 만들기

<기본뼈대>

from flask import Flask
app = Flask(__name__)

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

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

html파일과 연동하기.

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

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

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

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

render_template 을 넣어준다.

templates 폴더에 아래와 같은index.html파일을 불러온다.

파이썬 코드에서 직접적으로 HTML을 리턴하도록 해주는 방식이다.

 

1. GET 요청

• 통상적으로 데이터 조회(Read)를 요청할 때, 사용합니다!

      예) 영화 목록 조회 → 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달

2. POST 요청

• 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 사용합니다!

     예) 회원가입, 회원탈퇴, 비밀번호 수정

      → 데이터 전달 : 바로 보이지 않는 HTML

 

GET요청

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

@app.route('/test', methods=['GET'])
#/test라고 하는 창구로 get요청으로 들어온다.

def test_get():
   title_receive = request.args.get('title_give')
#'title_give'라는 데이터가 있으면 쏙 가지고 와서 title_receive라는 변수에 넣어준다.

   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})
#백엔드에서 프론트로 내려줄때 result:success, msg는 '이 요청은 GET!'이렇게 내려준다.

function hey() {
        fetch("/test")
          .then((res) => res.json())
          .then((data) => {
            console.log(data);
          });
      }
// hey()가 실행되면 "/test"로 app.py안에 /test의 내용을 가지고옴. 
//console.log(data); 의 data = 'result':'success', 'msg': '이 요청은 GET!'
//이렇게 내려와짐.

POST요청

@app.route('/test', methods=['POST'])
def test_post():
  title_receive = request.form['title_give']
  print(title_receive)
#터미널엔 블랙팬서가 찍혀야한다.
  return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

function hey(){
      let formData = new FormData();
      formData.append("title_give", "블랙팬서");

      fetch("/test", { method: "POST", body: formData })
        .then((res) => res.json())
        .then((data) => {
          console.log(data);
        });
      }

fetch - 보내다

 

화성땅 사기

POST요청

function save_order() {
    let name = $("#name").val();
//id:name의 value값을 변수 name에 넣는다.
    let address = $("#address").val();
    let size = $("#size").val();

    let formData = new FormData();
    formData.append("name_give", name);
//app.py안에 name_give로 name값을 보낸다.
    formData.append("address_give", address);
    formData.append("size_give", size);

    fetch("/mars", { method: "POST", body: formData })
      .then((res) => res.json())
      .then((data) => {
        alert(data["msg"]);
//백엔드로 보내져서 내용이 저장이 완료되면 msg의 값이 팝업창으로 뜬다.
        window.location.reload();
      });
  }

@app.route("/mars", methods=["POST"])
def mars_post():
    name_receive = request.form['name_give']
#name_give로 넘어온 name값을 변수 name_receive에 넣는다.
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

    doc = {
        'name': name_receive,
#name은 name_receive라고 한다.
        'address': address_receive,
        'size': size_receive
    }

    db.mars.insert_one(doc)
#저장된 name, address, size값을 mongoDb에 저장한다.

    return jsonify({'msg':'저장완료!'})
#저장이 완료되면 msg로 '저장완료!' 가 뜨게한다.

GET요청

function show_order() {
  fetch("/mars")
// /mars로 get요청을 보냄
    .then((res) => res.json())
    .then((data) => {
      let rows = data["result"];
// rows라는 변수에 백엔드에서 보내준 result값을 넣어준다.
      $("#order-box").empty();
      rows.forEach((row) => {
//가져온 result값이 담긴 rows를 반복문으로 돌린다.
          let name = row["name"];
          let address = row["address"];
          let size = row["size"];
//가져온 데이터를 변수를 만들어서 각각 넣어준다.
          let temp_html = `<tr>
                              <td>${name}</td>
                              <td>${address}</td>
                              <td>${size}</td>
                          </tr>`;
        $("#order-box").append(temp_html);
      });
    });
}

@app.route("/mars", methods=["GET"])
def mars_get():
    mars_data = list(db.mars.find({},{'_id':False}))
#mongoDB에서 저장되어있는 데이터 전체를 불러오고 mars_data라는 변수에 넣어준다.
    return jsonify({'result':mars_data})
#불러온 데이터를 result로 프론트에 보내준다.

1. 조각기능?

 😎 프로젝트 내부에서 꼭 만들 필요는 없습니다!

• flask 라이브러리를 사용하지 않는 기능이 있다면?
  • → app.py 밖에서 조각으로 구현해 붙여보세요!
• 그렇게 하는 이유가 있나요?
  • → 일일히 테스트를 flask에서 브라우저를 열고 진행하지 않아서 더 빨라요!
• 어떻게 하는데요?
  • → app.py 말고 다른 파일을 만들어봐요! 예) dbprac.py
  • 새로 만든 파일에서 코드를 작업해서 성공하면 복사해서 app.py로 가져와요!

import requests
from bs4 import BeautifulSoup

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

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')

ogtitle = soup.select_one('meta[property="og:title"]')['content']
#ogtitle이라는 변수에 meta태그인데 property가 og:title인걸 컨텐츠값만 가저온다.
ogdesc = soup.select_one('meta[property="og:description"]')['content']
ogimage = soup.select_one('meta[property="og:image"]')['content']
print(ogtitle,ogdesc,ogimage)

조각한 코드를 python파일에 넣는다.

 

POST요청

function posting() {
        let url = $("#url").val();
        let comment = $("#comment").val();
        let star = $("#star").val();

        let formData = new FormData();
        formData.append("url_give", url);
//url_give에 유저가 입력한 url을 넣기 위해 변수 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();
          });
      }

@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)
#유저에게 받은 url을 넣어주기 위해 변수 url_receive를 넣어준다.
  soup = BeautifulSoup(data.text, 'html.parser')

  ogtitle = soup.select_one('meta[property="og:title"]')['content']
#ogtitle이라는 변수에 meta태그인데 property가 og:title인걸 컨텐츠값만 가저온다.
  ogdesc = soup.select_one('meta[property="og:description"]')['content']
  ogimage = soup.select_one('meta[property="og:image"]')['content']

  doc = {
    'title':ogtitle,
    'desc':ogdesc,
    'image':ogimage,
    'comment':comment_receive,
    'star':star_receive
  }
  db.movies.insert_one(doc)
#mongoDB에 데이터 저장하기.
  return jsonify({'msg':'저장완료!'})

GET요청

function listing() {
        fetch("/movie")
          .then((res) => res.json())
          .then((data) => {
            let rows = data["result"];
            $("#cards-box").empty();
            rows.forEach((row) => {
              let title = row["title"];
              let desc = row["desc"];
              let img = row["image"];
              let comment = row["comment"];
              let star = row["star"]

              let star_repeat = '⭐'.repeat(star)

              let temp_html = `<div class="col">
                                <div class="card h-100">
                                  <img
                                    src="${img}"
                                    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);
            });
          });
      }

@app.route("/movie", methods=["GET"])
def movie_get():
  all_movies = list(db.movies.find({},{'_id':False}))
#all_movies라는 변수에 mongoDB에 movies폴더에 저장된 내용을 다 불러와서 넣는다.
  return jsonify({'result':all_movies})

 

비동기처리

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다.

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

자바스크립트 비동기 처리와 콜백 함수

블로그에는 4주차내용만 올렸지만 이전에 5주차 내용도 이미 올렸기때문에 4주차 내용만 좀 더 보완해서 올렸다.

이번에 4~5주차 다시 들으면서 혼자 만들어보다보니 이전에는 아예 이해도 못했던 내용들을 조금씩 이해하게됬다. 

진짜 처음 4주차 들었을때는 멘붕 가득이였는데 역시 여러번 들어서 이해못할건 없는 것 같다.