웹개발 종합반_개발일지_Day 7

Hyeyeong·2022년 8월 7일

API Flask beautifulsoup frontend mongodb python 개발일지 스파르타코딩클럽 웹개발 종합반

웹개발 종합반

목록 보기

10/13

Ⅰ. 📚 오늘 배운 내용

서버 만들기 (로컬 개발 환경 만들기)
1) Flask 프레임워크 시작
2) flask 기본 폴더 구성
3) API 만들기

[prac] 화성땅 공동구매 페이지
1) 주문 저장하기
2) 주문 보여주기

[prac] 무비피디아 페이지
1) 조각 기능(meta 태그 크롤링) 구현
2) 기록 하기
3) 포스팅 보여주기

1. 서버 만들기 (로컬 개발 환경 만들기)

1) Flask 프레임워크 시작

Flask 프레임워크는 서버를 구동시켜주는 간편한 코드 모음

Flask 프레임워크 설치
PyCharm > 환경설정 > 프로젝트 : pythonprac > Python 인터프리터 > + 버튼 > flask 검색 > 패키지 설치

(1) flask 시작코드

통상적으로 flask서버를 돌리는 파일은 app.py로 이름을 지음
맥북은 AirPlay 수신모드를 끄고 실행해야 함

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)

http://localhost:5000/에서 로컬 개발 환경을 확인할 수 있음

2) flask 기본 폴더 구성

세팅을 위한 기본 폴더가 정해져 있음 (새로만들기 > 경로에서 필요한 폴더 추가하기)

static 폴더, templates 폴더, app.py 파일
templates : 주로 html 파일이 담김
static : 주로 이미지나 css파일이 담김

(1) `app.py` 파일에 `.html` 파일 연결

① templates 폴더에 index.html 파일 추가
② app.py 파일에 render 코드 추가

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)

3) API 만들기

(1) Get요청 Ajax

① .html파일에 Jquery 임포트 코드 및 Get 요청 Ajax 코드 추가

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        function hey(){
            $.ajax({
                type: "GET",
                url: "/test?title_give=봄날은간다",
                data: {},
                success: function (response) {
                    console.log(response)
                }
            })
        }
    </script>
</head>
<body>
    <h1>나의 첫 웹페이지!</h1>
    <button onclick="hey()">버튼을 만들자</button>
</body>
</html>

② app.py 파일에 Get 요청 API 코드 추가

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)

👉 output '버튼을 만들자'를 클릭했을 때_Get 요청

'title_give' 로 받은 '봄날은간다'(title_receive = request.args.get('title_give'))데이터가 print(title_receive)로 인해 print되고,
그 결과값을 받아서(return jsonify({'result':'success', 'msg': '이 요청은 GET!'}))의 'response'로 들어가서 콘솔창에 메시지가 적힘 ((success: function (response) { console.log(response) })

(2) Post요청 Ajax

① .html파일에 Jquery 임포트 코드 및 post 요청 Ajax 코드 추가

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        function hey() {
            $.ajax({
                type: "POST",
                url: "/test",
                data: {title_give: '봄날은간다'},
                success: function (response) {
                    console.log(response['msg'])
                }
            })
        }
    </script>
</head>
<body>
    <h1>나의 첫 웹페이지!</h1>
    <button onclick="hey()">버튼을 만들자</button>
</body>
</html>

resopse의 msg만 가져오게 설정

② app.py 파일에 Post 요청 API 코드 추가

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

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

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

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

👉 output '버튼을 만들자'를 클릭했을 때_Post 요청

🔥 [prac] 화성땅 공동구매 페이지

📍 준비 사항

MongoDB 로그인과 폴더 셋팅 및 서버 구축 관련(flask), mongoDB 관련(pymongo, dnspython, certifi) 패키지 설치

구현할 기능 : 주문하는 것과 주문한 리스트 보여주기

1) 주문 저장하기

(1) API 만들고 사용하기 - 이름, 주소, 평수 저장하기(Create → POST)

요청 정보 : URL= /mars, 요청 방식 = POST
클라(ajax) → 서버(flask) : name, address, size
서버(flask) → 클라(ajax) : 메시지를 보냄 (주문 완료!)

❗️ 작업 순서
① 클라이언트와 서버 연결 확인하기
② 서버부터 만들기
③ 클라이언트 만들기
④ 확인하기

① 클라이언트와 서버 연결 확인하기

app.py 실행해서 index.html 와의 연결 확인

② 서버부터 만들기

app.py 파일에 DB 연결 및 데이터 추가 코드 기입

③ 클라이언트 만들기

index.html 파일에 input에 기입되는 값을 데이터로 만든 후 app.py 파일과 연결 및 새로고침 기능 추가

④ 확인하기
👉 output

2) 주문 보여주기

(1) API 만들고 사용하기 - 저장된 주문을 화면에 보여주기(Read → GET)

요청 정보 : URL= /mars, 요청 방식 = GET
클라(ajax) → 서버(flask) : (없음)
➟ 로딩이 되자마자 모든 주문을 가져오기만 하면 됨
서버(flask) → 클라(ajax) : 전체 주문을 보내주기

❗️ 작업 순서
① 클라이언트와 서버 연결 확인하기
② 서버부터 만들기
③ 클라이언트 만들기
④ 확인하기

① 클라이언트와 서버 연결 확인하기

app.py 실행해서 index.html 와의 연결 확인(app.py파일의 def web_mars_get(): 부분과 index.html파일의 ajax get 부분)

② 서버부터 만들기

app.py 파일에 데이터 가져오는 코드 기입

③ 클라이언트 만들기

index.html 파일에 로딩 시 데이터 가져오는 코드 기입 후 콘솔로 확인하기

❗️ 추가된 데이터를 콘솔과 DB에서 확인할 수 있음

index.html 파일에 로딩 시 DB의 리스트를 조건문으로 가져오고, DB 값을 태그 내 탬플릿으로 붙이기

④ 확인하기
👉 output

🔥 [prac] 무비피디아 페이지

📍 준비 사항

MongoDB 로그인과 폴더 셋팅 및 서버 구축 관련(flask), mongoDB 관련(pymongo, dnspython, certifi), 크롤링 관련(bs4, requests) 패키지 설치

구현할 기능 : 영화 url을 이용해서 영화 포스터 이미지, 제목, 설명을 크롤링한 후 별점과 코멘트를 입력하여 포스팅하기

1) 조각 기능(meta 태그 크롤링) 구현

❗️ 프로젝트를 본격적으로 하기 전에 미리 조각 기능으로 체크하기

조각 기능 : 프로젝트를 만들기 전에 프로젝트에 필요한 기술을 따로 구현하여 체킹하는 과정

meta 태그 : 사이트 속성을 설명해주는 태그(구글 검색 혹은 카카오톡 공유시 표시되는 설명문, 사이트 제목, 이미지 등), 사이트 내<head>에 <meta property="">로 있음

(1) meta 태그 크롤링

① 크롤링 기본 코드 추가

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

print (soup)으로 작동 확인

② soup.select으로 meta 값 가져오기

📍 기존 데이터를 크롤링했던 코드와 차이가 있음

기존 데이터
movies = soup.select('#old_content > table > tbody > tr')

메타 데이터
title = soup.select_one('meta[property="og:title"]')['content']

👉 input

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

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']
print(title, image, desc)

👉 output

2) 기록 하기

(1) API 만들고 사용하기 - 포스팅API (Create → POST)

요청 정보 : URL= /movie, 요청 방식 = POST
클라(ajax) → 서버(flask) : url, star, comment
서버(flask) → 클라(ajax) : 메시지를 보냄 (포스팅 완료!)

❗️ 작업 순서
① 클라이언트와 서버 연결 확인하기
② 서버부터 만들기
③ 클라이언트 만들기
④ 확인하기

① 클라이언트와 서버 연결 확인하기

app.py 실행해서 index.html 와의 연결 확인

② 서버부터 만들기

app.py 파일에 DB 연결, 크롤링 임포트 코드 및 크롤링 후 데이터 추가 코드 기입

③ 클라이언트 만들기

index.html 파일에 input에 기입되는 값을 데이터로 만든 후 app.py 파일과 연결 및 새로고침 기능 추가

④ 확인하기
👉 output

3) 포스팅 보여주기

(1) API 만들고 사용하기 - 보여주기API (Read → GET)

요청 정보 : URL= /movie, 요청 방식 = GET
클라(ajax) → 서버(flask) : (없음)
서버(flask) → 클라(ajax) : 전체 영화를 보내주기

❗️ 작업 순서
① 클라이언트와 서버 연결 확인하기
② 서버부터 만들기
③ 클라이언트 만들기
④ 확인하기

① 클라이언트와 서버 연결 확인하기

app.py 실행해서 index.html 와의 연결 확인

② 서버부터 만들기

app.py 파일에 데이터 가져오는 코드 기입

③ 클라이언트 만들기

index.html 파일에 로딩 시 DB의 리스트를 조건문으로 가져오고, DB 값을 태그 내 탬플릿으로 붙이기

④ 확인하기
👉 output

Ⅱ. 📝 회고

(임시 저장해놓고 퇴고를 안 해서 업로드를 안 하고 있었던 4주차 개발일지!) index.html에서 function 코드 작성할 때 url에 웹사이트 주소 대신 왜 /movie라고 작성하는지 궁금했었는데, app.py 파일에 작성한 @app.route("/movie", methods=["POST"])에 따라 api를 post나 get형식으로 가져온다는 것을 의미한다고 한다.

Ⅲ. ☑️ TO DO

4주차 homework

Hyeyeong

코딩입문 코린이

이전 포스트

웹개발 종합반_homework_3주차

다음 포스트

웹개발 종합반_개발일지_Day 7