개발공부 14일차[API연동 / Flask]

일단 오늘 블로그를 쓰기에 앞서 아직 이해를 못했다..

너무 어렵다 ..

웹개발 종합반 4주차는 한 10번은 들어야 이해를 할까 싶다....어쩌면 정리한다고 이미 4주차는 2~3회독 했을지도..

 

api 요청 → request

요청에 대한 api응답 → response

 

 

서버만들기

1. 폴더를 만든다.
2. app.py라는 파일을 만든다.
3. 터미널을 생성한다.
4. 가상환경을 잡는다. (가상환경 : 프로젝트 별로 라이브러리를 담아두는 통)
   python3 -m venv venv
5. 오른쪽 하단에 3.9.6-bit를 눌러서 ‘venv’:venv로 만들어야함
6. 새터미널 열어주기
7. 새폴더 생성 templater
8. templates 에 새파일로 index.html 만들기
9. 원하는 프레임워크 깔아주기
   pip install flack pymongo dnspython requests bs4
   
   

GET 요청

• 통상적으로 데이터 조회(Read)를 요청할 때 사용한다.→ 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
• 예) 영화 목록 조회

POST요청

• 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete)요청 할 때 사용한다.→ 데이터 전달 : 바로 보이지 않는 HTML
• 예) 회원가입, 회원탈퇴, 비밀번호 수정

불러오는 기능과 저장하는 기능을 만들때 저장하는 기능을 먼저해야 불러오는 기능을할때 잘 되고 있는지 확인 가능하다.

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

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

@app.route("/mars", methods=["POST"])
def movie_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg':'POST 연결 완료!'})

@app.route("/mars", methods=["GET"])
def movie_get():
    return jsonify({'msg':'GET 연결 완료!'})

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

    <script>
        $(document).ready(function () {
            show_order();
        });
        function show_order() {
            fetch('/mars').then((res) => res.json()).then((data) => {
                console.log(data)
                alert(data['msg'])
            })
        }
        function save_order() {
            let formData = new FormData();
            formData.append("sample_give", "샘플데이터");

            fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
                console.log(data);
                alert(data["msg"]);
            });
        }
    </script>

강의때 뼈대로 제공된 기본 툴 내용이다.

POST

1. 데이터 명세
   잘 연결됬는지 확인하기
2. 클라이언트와 서버 연결 확인하기
   1. 어떤버튼에 들어가있는지 확인하기
   2. 주문하기 버튼에 save_order라고 적혀 있는걸 확인
   3. let formData = new FormData(); formData.append("sample_give", "샘플데이터");fetch('/mars', → fetch 이름이 mars
   4. sample_give라는 이름으로 fetch값을 통해 백엔드로 정보를 보냄
   5. app.py 파이썬 파일에 @app.route(”/mars” 라는 값으로 정보가 들어옴
   6. app.py파일의 sample_receive = request.form['sample_give'] sample_give가 값을 찾을꺼임
   7. sample_receive = “샘플데이터”가 되는거임
   8. print(sample_receive) →”샘플데이터를 찍고
   9. return jsonify({'msg':'POST 연결 완료!'}) →POST 연결 완료! 라는 메세지를 찍어줌
   10. 백엔드 부분에서 저장이되면 자바스크립트로 다시 보내져서 data값에 {'msg':'POST 연결 완료!'}가 들어감.
3. 서버부터 만들기
   1. 서버를 받을땐name_receive = request.form['name_give'] address_receive = request.form['address_give'] size_receive = request.form['size_give'] 로 변경 해준다.
   2. sample_receive = request.form['sample_give'] 를
   3. mongoDB에 넣기 위해
   4. from pymongo import MongoClient client = MongoClient('mongodb+srv://sparta:test@cluster0.wpply3w.mongodb.net/?retryWrites=true&w=majority') db = client.dbsparta 를 넣어줌
   5. 데이터를 넣기 위해
   6. doc = { 'name':name_receive, →name이라는 키에 name_receive를 넣어줌 'address':address_receive, 'size':size_receive } db.mars.insert_one(doc) 를 넣어줌
4. 서버가 해야할일 - name, address,size를 받아서 DB에 넣어주기
5. 클라이언트 만들기
   1. 이름에 대한 input값, 주소에대한 Input값, 평수값을 담아서 넘겨줌
   2. 값을 가지고온다. (jqury 사용)
   3. let name = $("#name").val(); let address = $("#address").val(); let size = $("#size").val();
   4. name, address, size로 값을 줘야하기 때문에
   5. formData.append("sample_give", "샘플데이터");값도 formData.append("name_give", name);
      formData.append("address_give", address); formData.append("size_give", size); 변경된 값으로 넣어준다
6. 완성 확인하기
   웹페이지에서 값을 입력 후 저장을 했을때 적었던 값을 비우는 방법
   window.location.reload()

 

GET

1. 클라이언트에서 페이지가 로딩이되면 어떤게 불리는지 찾는다.
   $(document).ready(function () {
          show_order();
      });
   1. 페이지가 로딩됬을때 show_order() 불린다.
   2. fetch(/’mars’) → /mars라고 하는 백엔드 API에 전달
2. 파이썬에 가서 확인하기.
   get 연결 완료 라고 알려주고 있음
3. 자바스크립트 data값으로 들어감.
4. 일단 data를 다 가지고 와야하기 때문에 리턴위에
   mars_data = list(db.mars.find({},{'_id':False}))
   return jsonify({'result':mars_data}) 적어준다.
   → DB에서 모든 데이터를 다 가지고와서 클라이언트로 내려주는 거임
5. 리스트를 받기
6. index.html 파일에 let rows = data[’result’] 를 적어준다.
7. 반복문으로 데이터를 돌려서 보여줌.
   rows.forEach((a) ⇒{
       let name = a["name"];                                                    →let name에 a안에 name값을 담는다.
       let address = a["address"];
       let size = a["size"];
       let temp_html = <tr>
                                           <td>${name}</td>
                                          <td>${address}</td>
                                           <td>${size}</td>
                                          </tr>;
       $('#order-box').append(temp_html)
   })

위내용 결과코드 

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

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

from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.wpply3w.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta

@app.route("/mars", methods=["POST"])
def movie_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

    doc = {
        'name':name_receive,
        'address':address_receive,
        'size':size_receive
    }
    db.mars.insert_one(doc)

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

@app.route("/mars", methods=["GET"])
def movie_get():
    mars_data = list(db.mars.find({},{'_id':False}))
    return jsonify({'result':mars_data})

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

<script>
      $(document).ready(function () {
        show_order();
      });
      function show_order() {
        fetch("/mars")
          .then((res) => res.json())
          .then((data) => {
            let rows = data["result"];
            $('#order-box').empty()
            rows.forEach((a) => {
              let name = a["name"];
              let address = a["address"];
              let size = a["size"];
              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();

        let formData = new FormData();
        formData.append("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"]);
            window.location.reload();
          });
      }
    </script>
  </head>

  <body>
    <div class="mask"></div>
    <div class="order">
      <h1>화성에 땅 사놓기!</h1>
      <h3>가격: 평 당 500원</h3>
      <p>
        화성에 땅을 사둘 수 있다고?<br />
        앞으로 백년 간 오지 않을 기회. 화성에서 즐기는 노후!
      </p>
      <div class="order-info">
        <div class="input-group mb-3">
          <span class="input-group-text">이름</span>
          <input id="name" type="text" class="form-control" />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text">주소</span>
          <input id="address" type="text" class="form-control" />
        </div>
        <div class="input-group mb-3">
          <label class="input-group-text" for="size">평수</label>
          <select class="form-select" id="size">
            <option selected>-- 주문 평수 --</option>
            <option value="10평">10평</option>
            <option value="20평">20평</option>
            <option value="30평">30평</option>
            <option value="40평">40평</option>
            <option value="50평">50평</option>
          </select>
        </div>
        <button
          onclick="save_order()"
          type="button"
          class="btn btn-warning mybtn"
        >
          주문하기
        </button>
      </div>
      <table class="table">
        <thead>
          <tr>
            <th scope="col">이름</th>
            <th scope="col">주소</th>
            <th scope="col">평수</th>
          </tr>
        </thead>
        <tbody id="order-box">
          <tr>
            <td>홍길동</td>
            <td>서울시 용산구</td>
            <td>20평</td>
          </tr>
          <tr>
            <td>임꺽정</td>
            <td>부산시 동구</td>
            <td>10평</td>
          </tr>
          <tr>
            <td>세종대왕</td>
            <td>세종시 대왕구</td>
            <td>30평</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

---

조각기능구현 / 크롤링

1. 썸네일 사진 - og:image

2. 썸네일 제목 - og:title

3. 썸네일 설명 - og:description

 

크롤링 하는방법 

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']
ogdesc = soup.select_one('meta[property="og:description"]')['content']
ogimage = soup.select_one('meta[property="og:image"]')['content']
print(ogtitle,ogdesc,ogimage)

meta[property="og:title"] → meta안에 property="og:title"를 가져올 수 있음

 

 

오늘 진짜 뭔 말인지도 모르고 하루를 다 써버렸다 이게 말인가..? 3주차 까지는 그래도 한번 더 듣고 몇번 들으면 이해가됬는데 이건 뭐.. 에..?이게 왜..?또 이러고 있다 오전에 강의를 시작하고.. 오후에 끝나고 블로그를 쓰는 지금까지도 오늘 들은게 이해가 안된다..ㅎ..

아직 2번의 연습이 있다고 했고 .. 남자친구도 지금 당장 꼭 이해를 하고 넘어갈 필요없다 그냥 일단 지나가고 나주에 또 사용할때 해보면 된다 라고 하지만.. 

난...ㅠㅠ 이해하고싶다고...!!!!!!!!왜 저기에 저건지는..!!!!!!!!!!