[스코클] 비개발자를 위한 웹개발 종합반-4주차

take-away

1. 사소한 타이핑 하나만 빠져도 전체가 작동을 안함 (쉼표, 괄호, 따옴표, 콜론 등등등등등)

2. 서버와 클라이언트, 데이터베이스 간에 주고받는 신호의 구조를 잘 알아야 함

3. 다양한 기능을 구현해 보고, 이를 언제든 쓸 수 있게 잘 저장/쌓아놓는 것이 중요

 

1. 4주차 이번주 할것

- Flask

- 미니프로젝트1 (화성땅 공동구매)

- 미니프로젝트2 (스파르타피디아)

- 1주차: 웹프론트엔드 / 2주차 

- 3주차: MongoDB / Atlas

- 4주차: Flask 서버 (app.py 파일)

*. 로컬개발환경: 내컴퓨터에서 만들고 내컴퓨터에서 테스트해보기

 

2. Flask: 서버를 만들수 있는 '큰'라이브러리 (=프레임워크)

- 서버를 구동시켜주는 편한 코드 모음. 서버를 구동하려면 필ㅇ한 복잡한 일들을 쉽게 가져다 쓸수 있음

- 프레임워크는 3분요리/소스세트라고 생각하면 되겠다.

- 토앙적으로 flask서버를 돌리는 파일은 app.py라고 명명한다.

- Flask 환경 구축

from flask import Flask
app = Flask(__name__)

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

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


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

2.1. Flask서버를 만들 때 기본 서버 구조가 있음.

- static 폴더 (이미지, css파일을 넣어둡니다)

- templates 폴더 (html파일을 넣어둠)

- app.py

*venv: 실제는 보이지만, 안보인다...... 라고 생각하기

2.2. 서버와 template 연결하기 (templates 폴더 (directory) 만들고 그 안에 html 파일 만들기

from flask import Flask, render_template  #template과 연결하기
app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html')   #template과 연결하기

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

* 서버 (app.py)에서 실행 - 서버가 해당 내용을 준거야 (배포만 하면 딴 사람도 볼 수 있음)

** html 에서 실행 - 내컴퓨터에 있는 내용을 연 것뿐)

 

3. Flask 시작하기 - 본격 API 만들기

3.1. API (은행의 창구) 만들기!!

- get: 데이터 조회 요청 (read); 데이터 전달: url뒤에 물음표 붙여 key=value로 전달

- post: 데이터 생성(create), 변경(update), 삭제(delete) - 회원가입, 탈퇴, 비번수정 등; 데이터 전달: 바로보이지않는 html body에 key:value형태로 전달

 

3.2. 프로젝트를 위해 사용한 library

- pymongo

- dnspython

- flask

 

4. 실습하기1 - 화성땅 구매하기

 

4.1. 주요기능1: 주문하기

4.1.1. 요청정보: URL=/mars, 요청방식 = POST

4.1.2. 클라(ajax)->서버(flask): name, address, size

4.1.3. 서버(flask)->클라(ajax): 메시지를 보냄 (주문완료!)

4.2. 주요기능2: 주문한 것을 보여주기

4.2.1. 요청정보: URL=/mars, 요청방식=Get

4.2.2. 클라(ajax)->서버(flask): 없음 - 새로고침하면 불러올수 있게

4.2.3. 서버(flask) -> 클라(ajax): 전체주문을 보내주기

 

5. 실습하기2-스파르타피디아

5.0. 필요한 라이브러리 

5.0.1. 서버: flask

5.0.2. 데이터베이스 연결: pymongo, dnspython

5.0.3. 크롤링: requests, bs4

5.1. 조각기능: 프로젝트 시작 전, 프로젝트에 필요한 기술을 먼저 구현하는 것이 좋음. 그 다음 API

5.1.1. meta tag 주소 붙이면 관련 정보가 딸려 나오는 기능 (카톡에 홈페이지 공유시 주소, 썸넬, 제목 등이 함께 나옴)

meta태그 예시 - 이미지, 제목, 주소 등이 나옴

5.1.2. 크롤링: 원하는 내용을 크롤링 할 수 있는지 테스트

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)  # 전체 데이터 잘 가져오는지 확인
title = soup.select_one('meta[property="og:title"]')['content'] #meta에 property가 'og.title인걸 가져와
image = soup.select_one('meta[property="og:image"]')['content'] #meta에 property가 'og.title인걸 가져와
desc = soup.select_one('meta[property="og:description"]')['content'] #meta에 property가 'og.title인걸 가져와
print(title, image, desc)

5.2. 주요기능1: 포스팅하기- 영화url을 넣으면 자동으로 포스터 이미지, 제목, 디스크립션을 크롤링해오기

5.2.0. API 만들고 사용하기 (포스팅API

5.2.1. 요청정보: URL=/movie, 요청방식=post

5.2.2. 클라(ajax) -> 서버(flask): url, star, comment

5.2.3. 서버(flask) -> 클라(ajax): 메시지를 보냄(포스팅 완료!)

5.2.4. DB: image, title, description (url에서 가져옴), star, comment 저장

* 쉼표 하나 안붙이니까 기능이 작동을 안함.. (index.html에서 data 맨 뒤에 쉼표..

5.3. 주요기능2: 카드(틀) 만들기

5.3.1. 요청정보: url=/movie, 요청방식 = get

5.3.2. 클라(ajax) -> 서버(flask): (없음)

5.3.3. 서버(flask) -> 클라(ajax): 저장된 영화를 화면에 보내주기

 

5. 실습하기3-팬명록 만들기

5.1. 기능1: 응원남기기(post) - 정보 입력 후 '응원남기기' 버튼 클릭 시 주문목록에 추가

5.2. 기능2: 응원보기(get) - 페이지 로딩 후 하단 응원목록이 자동으로 보이기