스파르타 코딩 클럽 [웹개발종합반] 4주차 WIL(Week I Learned) - Flask / 서버 / API

60391 단어 내일배움카드 스파르타코딩클럽 국비지원코딩 코딩독학 국비지원코딩

4주차 - Flask / 서버 /API

4주차에는 드디어 강의 내용에 내가 모르는 것들로 100% 가득 차 있었다.
그래서 조금 두렵기도 했고 설렜다.
부딪혀보고 나니 확실히 처음 배우는 것이라서 엄청 익숙하지가 않았다.
그래도 실습 여러 개를 영상보면서 정리하며 따라해도 조금 익숙해지지가 않았다.
하지만, 숙제를 할 때 했던 것을 가져와서 하긴 했지만 그래도 해설 코드를 보지 않고
나 혼자 했기 때문에 확실히 조금은 익숙해진 것 같기도 하다!

또한 1, 2주차 숙제를 나 혼자서 Develope 시켰다는 것이 굉장히 뿌듯했다!

Flask 시작하기 - 서버 만들기

서버를 돌아가게 만드는 파일 이름은 통상적으로 app.py로 많이 쓰인다.

Flask : 프레임워크

※ 프레임워크 VS 라이브러리

프레임워크 : 남이 짜둔 규칙이나 틀 안에서 자유로운 코딩

라이브러리 : 자유롭게 코딩하는데 남이 만들어 놓은 것을 중간에 갖다 쓰는 것

따라서, 통상적으로 프레임워크는 하나의 프레임워크에서 작업하고

라이브러리는 여러 개를 사용할 수 있다!

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)

👉 port 5000으로 접속할 수 있는 서버를 만들었다!

@app.route(”/”) : 사용자가 주소창에 엔터를 치면 “/”가 자동으로 맨 끝에 붙지만 숨겨져서 사용자의 눈에는 보이지 않는다.

따라서 @app.route(”/”) 는 [localhost:5000](http://localhost:5000) 이 주소창에 쳐졌을 때를 의미하고

그때 home이라는 함수를 실행한다!

port : 출입구의 이름 → port 5000 : 5000번 출입구에 서버를 만들었다!

def home() 함수의 return 값 : 웹페이지에서 출력될 문구

→ <button></button> 을 입력하면 버튼이 나온다!

접속 : localhost:5000 입력!

→ 내가 만든 서버에 5000번 문으로 접속하겠다라는 의미

Flask에 HTML 파일 주기

현재 프로젝트 폴더에 templates / static 이라는 폴더를 만들고

html 파일은 templates 폴더에, CSS파일은 static 폴더에 넣는다.

그리고 나서 파이썬에서 import render_template 를 하고

함수 return 값을 render_template(”html파일이름”) 이렇게 하면

html을 가져올 수 있다!!

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

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

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

API 만들기

API : 서버가 클라이언트의 요청을 받기 위해서 만들어 놓는 창구

API의 여러 종류 중 주로 쓰는 2가지 종류

GET : 통상적으로 데이터 조회 요청 시
POST : 통상적으로 데이터 생성, 변경, 삭제 요청 시

서버에 요청할 때 → Ajax로 콜하기

① GET으로 API 만들기

API 만들기 → 클라이언트에서 Ajax로 콜하기 반복

API 만들기

request , jsonify 추가로 import

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

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

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

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

Ajax로 콜하기

[localhost:5000](http://localhost:5000) 에 가서 개발자도구 콘솔에서 Ajax 콜을 해보면,

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

콘솔에 이렇게 찍힌다!

이때 response는 서버에서 클라이언트에게 내려주는 정보이다.

이 response의 내용은?

Flask로 만든 서버의 jsonify를 사용해서 만든

return jsonify({'result':'success', 'msg': '이 요청은 GET!'}) 리턴 값이다!!

과정 분석

Flask 서버로 GET type 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!'})

Ajax로 콜을 한다 (고객이 간다)

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

→ 상세 정보 : type은 GET 이고, url이 /test?title_give=봄날은간다

이때,

서버에서 API를 만들 때 methods=["GET"] 이렇게 타입은 GET으로 받는다고 약속했기 때문에 Ajax로 콜할 때 GET 타입으로 요청
서버에서 API를 만들 때 창구 이름을 /test 로 했기 때문에 Ajax로 콜하는 url도 /test 로 요청
서버에서 API를 만들 때 "title_give" 로 정보를 요청하라고 약속했기 때문에 Ajax로 콜할 때 ?title_give=봄날은간다 로 요청 (? 뒤에는 요청할 데이터)

이때, API에서 일어나는 일

고객이 “title_give” 에 봄날은간다 를 가지고 API에 왔다.

title_receive = request.args.get('title_give') : title_give 로 가져온 값 가져와봐! 한 후 title_receive에 저장
print(title_receive) : 서버에 클라이언트가 가져온 값(title_give) 출력
return jsonify({'result':'success', 'msg': '이 요청은 GET!'}) : 값을 클라이언트에게 제공(Ajax의 response으로 저장됨)

② POST로 API 만들기

: 생김새가 조금 다르지만, 원리는 GET과 같다!

: GET과 비교하며 생각해보자!

Flask 서버로 POST type API를 만들어 놨다.

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

API 경로 : /test / 타입 : POST

title_receive = request.form['title_give'] : 클라이언트가 title_give 로 가져온 값 title_receive에 저장

→ GET과 원리는 똑같지만 request 뒤 생김새가 다르다. .form["title_give"]

Ajax로 콜을 한다.

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

찾아갈 경로 : /test / 타입 : POST

GET과 다른점 : DATA를 주는 방식

GET : data를 url으로 url: "/test?title_give=봄날은간다" 이렇게 서버에 전달, data는 빈 값 data : {},

POST : data를 data에 data: { title_give:'봄날은간다' } 이렇게 서버에 전달, url에는 찾아갈 경로만 입력 url : "/test",

[모두의책리뷰] - POST 연습(리뷰 저장)

서버 DB에 요청한 데이터 저장

서버 코드

서버에서 하는 일 : API에서 데이터(제목, 저자, 리뷰)를 받아서 DB에 저장

→ DB에 데이터를 추가하는 insert 사용

@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': '저장 완료!'})

title_give / author_give / review_give 으로 받은 데이터를 변수에 저장하고,

DB에 데이터를 저장하기 위해

doc = {
        "title" : title_receive,
        "author" : author_receive,
        "review" : review_receive
    }

이렇게 doc을 딕셔너리 형태로 저장하고

db.bookreview.insert_one(doc) 이렇게

DB에 bookreview라는 collection에 doc 데이터를 저장한다.

클라이언트 코드

클라이언트에서 하는 일 : 제목, 저자, 리뷰를 가져와서 서버로 보낸다.

function makeReview() {

		let title = $("#title").val();
    let author = $("#author").val();
    let review = $("#bookReivew").val();

	  $.ajax({
	      type: "POST",
	      url: "/review",
	      data: {title_give: title, author_give:author, reivew_give:review},
	      success: function (response) {
	          alert(response["msg"]);
	          window.location.reload();
	      }
	  })
}

makeReview() 라는 함수가 호출될 때 실행

		let title = $("#title").val();
    let author = $("#author").val();
    let review = $("#bookReivew").val();

JQuery를 활용해서 각 input(제목, 저자, 리뷰)의 값을 저장한다.

	  $.ajax({
	      type: "POST",
	      url: "/review",
	      data: {title_give: title, author_give:author, reivew_give:review},
	      success: function (response) {
	          alert(response["msg"]);
	          window.location.reload();
	      }
	  })
}

Ajax를 통해 data를 미리 약속한 title_give / author_give / review_give 를 Key로, input의 값을 저장한 변수들을 각각의 Value로 하는 딕셔너리로 저장해서 요청한다.

👉 이렇게 하면 서버의 DB에 요청한 데이터들(제목, 저자, 리뷰)이 잘 저장된다.

[모두의책리뷰] - GET 연습(리뷰 보여주기)

2. 리뷰 보여주기

서버 코드

서버에서 하는 일 : 클라이언트로부터 데이터를 받을 것이 없고, 모든 데이터(제목, 저자, 리뷰)를 DB에서 가져와서 그대로 클라이언트에 내려주면 된다!

→ DB에서 여러 데이터를 조회하는 find 사용

@app.route('/review', methods=['GET'])
def read_reviews():
    reviews = list(db.bookreview.find({}, {'_id': False}))
    return jsonify({'all_reviews': reviews})

클라이언트의 데이터가 저장된 DB에서 데이터를 가져오는 find 를 사용해서

list(db.bookreview.find({}, {'_id': False})) 코드 작성 → _id 열 빼고 모든 데이터를 리스트로 reviews라는 변수에 저장

그 후 return 값으로 all_reviews 라는 Key, 데이터가 들어 있는 변수 reviews 를 value로 하는 딕셔너리로 반환

클라이언트 코드

클라이언트에서 하는 일 : all_reviews 가 잘 내려오면 그것을 받아서 for문을 돌면서 리뷰들을 붙여주기

페이지가 새로고침되면 showReview() 라는 함수 실행

→ 페이지가 처음 열렸을 때 새로고침되므로 기존의 리뷰들 보여줄 수 있다.

→ 리뷰 작성하기를 누르면 페이지가 새로고침되게 해서 작성한 리뷰까지 추가되어서 보여진다.

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

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

all_reviews 라는 서버에서 내려준 DB 데이터가 response에 저장되어 있다.

따라서, response 중에 all_reviews 만을 뽑아서 reviews 변수에 저장

현재 reviews 변수에는 제목, 저자, 리뷰가 딕셔너리 형태로 저장되어 있으므로

for문을 통해서 i번째 데이터 추출 후 jquery를 통해서 append하여 html 태그 추가해서 화면에 보여주기

[나홀로 메모장] - API 설계

API에 어떤 기능이 필요한지 먼저 설계

필요한 기능

URL / 코멘트를 서버에 보내서 서버에서 그 데이터를 저장하는 것
카드들(데이터들)을 보여주기

→ DB에 저장해야할 것 : 카드의 요소들(이미지, 제목, 제목링크, 요약, 코멘트)

서버 DB에 카드 정보 생성 API

요청 정보

요청 URL = /memo / 요청 방식 = POST
요청 데이터(클라이언트로부터 받는 데이터) : URL(url_give), 코멘트(comment_give)

서버가 제공할 기능

URL의 meta태그 정보를 바탕으로 제목, 설명,이미지URL 스크래핑
제목, 설명, URL, 이미지URL, 코멘트 정보를 모두 DB에 저장

클라이언트에게 줄 데이터

API가 정상적으로 작동하는지 클라이언트에게 알려주기 위해 성공 메세지 보내기
(JSON 형식) “result” = “success”

서버 DB에 저장된 카드 정보 보여주기 API

요청 정보

요청 URL = /memo / 요청 방식 = GET
요청 데이터(클라이언트로부터 받는 데이터) : 없음

서버가 제공할 기능

DB에 저장되어 있는 모든 정보(제목, 설명, URL, 이미지URL, 코멘트) 내려주기

클라이언트에게 줄 데이터

article(기사)들의 정보(제목, 설명, URL, 이미지URL, 코멘트) → 카드 만들어서 붙이기
(JSON 형식) “articles” : 아티클 정보

[나홀로 메모장] - 미리 테스트해보는 조각 기능 구현

우리는 URL을 넣어서 이미지, 제목, 요약을 자동으로 가져오게 해야한다.

이 URL에 이 정보들은 안의 태그에 있다.

따라서, meta태그를 스크래핑해야한다!

※ meta 태그는 눈에 보이는 태그 이외의 사이트의 속성을 설명해주는 태그이다.

meta태그 스크래핑

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

title = soup.select_one("head > meta:nth-child(9)")
print(title)

이렇게 하면 meta 태그 내용이 나오지 않는다.

이유는, 웹 페이지에서 검사를 눌러서 나오는 meta 태그의 순서와 파이썬 코드가 접속했을 때 나오는 meta 태그의 순서가 다르기 때문이다.

따라서, Beautifulsoup을 사용하는 다른 방법을 알아야 한다!

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

title = soup.select_one("meta[property="og:title"]")
print(title)

title = soup.select_one("meta[property="og:title"]")

👉 meta 태그 중에서 property="og:ttitle" 인 meta 태그를 가져오라는 뜻!

[나홀로메모장] - POST 연습 (메모하기)

서버

클라이언트로부터 데이터 받기

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

타이틀, 이미지, 디스크립션 크롤링하기

@app.route('/memo', methods=['POST'])
def saving():
    url_receive = request.form['url_give']
    comment_receive = request.form['comment_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')

    title = soup.select_one('meta[property="og:title"]')["content"]
    image = soup.select_one('meta[property="og:image"]')["content"]
    desc = soup.select_one('meta[property="og:description"]')["content"]

크롤링한 데이터 DB에 저장하기

@app.route('/memo', methods=['POST'])
def saving():
    url_receive = request.form['url_give']
    comment_receive = request.form['comment_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')

    title = soup.select_one('meta[property="og:title"]')["content"]
    image = soup.select_one('meta[property="og:image"]')["content"]
    desc = soup.select_one('meta[property="og:description"]')["content"]

    doc = {
        'title': title,
        'image': image,
        "desc" : desc,
        "url" : url_receive,
        "comment" : comment_receive
    }
    db.articles.insert_one(doc)

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

클라이언트

서버에 보낼 데이터 가져오기

function postArticle() {
    let url = $("#post-url").val();
    let comment = $("#post-comment").val();

Ajax로 데이터 보내기

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"]);
	      }
	  })
	}

기사저장을 눌러서 postAritcle()이 실행되어서 ajax 콜을 하고 난 후 페이지가 새로고침 되게 하기

window.location.reload(); 사용

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();
	      }
	  })
	}

[나홀로메모장] - GET 연습 (보여주기)

서버

DB에 저장한 데이터 내려주기

→ list(db.articles.find({}, {'_id': False})) 로 DB의 데이터를 가져와서 articles 변수에 저장

jsonify 로 클라이언트에게 내려주기

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

클라이언트

function showArticles() {
    $.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 url = articles[i]["url"];
                let desc = articles[i]["desc"];
                let comment = articles[i]["comment"];

                let temp_html = `<div class="card">
                                    <img class="card-img-top"
                                         src="${image}"
                                         alt="Card image cap">
                                    <div class="card-body">
                                        <a target="_blank" href="${url}" class="card-title">${title}</a>
                                        <p class="card-text">${desc}</p>
                                        <p class="card-text comment">${comment}</p>
                                    </div>
                                </div>`

                $("#cards-box").append(temp_html);
            }
        }
    })
}

4주차 숙제

Author And Source

이 문제에 관하여(스파르타 코딩 클럽 [웹개발종합반] 4주차 WIL(Week I Learned) - Flask / 서버 / API), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ohk9134/스파르타-코딩-클럽-웹개발종합반-4주차-WILWeek-I-Learned-Flask-서버-API

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[BOJ][삼성기출] 14891. 톱니바퀴

[인프런] 버블 정렬 응용 - JavaScript

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다