22020315 스파르타코딩 개발일지 EP.4
4주차 수업목표
- Flask 프레임워크를 활용해서 API를 만들기
- API를 만들고 클라이언트에 연결
- API를 만들고 클라이언트와 연결
1. 기본
HTML과 mongoDB까지 연동해서 서버를 만들기!!
우리는 컴퓨터가 한 대로 서버도 만들고, 요청도 함.
즉, 클라이언트 = 서버가 되는 것이죠. 이것을 바로 "로컬 개발환경"이라고 함
2. 폴더 세팅
폴더 네 개 만들고 시작하기!!
prac: flask 연습 코드를 작성
alonememo : "나홀로메모장" 관련 코드를 작성
bookreview : "모두의책리뷰" 관련 코드를 작성
moviestar : "마이페이보릿무비스타" 관련 코드를 작성
3. Flask시작하기 - 서버만들기
1) Flask 패키지 설치하고 시작하였음 하는 방법은 쉽다. File → setting → Python interpreter에서 +누르고 검색 후 설치
2) Flask 기초: 기본 실행
- Flask 프레임워크 : 서버를 구동시켜주는데 편하게 해주는 툴
- app.py 파일 만들어줌 : 통상적으로 flask 서버를 돌리는 파일은 app.py라고 이름짓는다고 함
- flask 시작 코드를 적고 run 시켜준 후 크롬에서 http://localhost:5000/ 으로 접속!
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)
3) Flask 기초: URL 나눠보기 : @app.route('/) 부분을 수정해서 URL을 나눌 수 있음
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'This is Home!'
@app.route('/mypage')
def mypage():
return 'This is My Page!'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
4. Flask시작하기 - HTML파일 주기
1) Flask 기초: 기본 폴더구조 - 항상 이렇게 세팅하고 시작
Flask 서버를 만들 때, 항상,
프로젝트 폴더 안에,
- static 폴더 (이미지, css파일)
- templates 폴더 (html파일)
- app.py 파일
이렇게 세 개를 만들어두고 시작
(꼭 참고!! venv는 실제로는 보이지만, 안보인다~라고 생각하세요! 기억하시죠?)
꿀팁 : 기존의 homework 파일에서 venv 폴더를 생성하시려면 File - Settings - Project: 000 - Python Interpreter에서 오른쪽 위에 톱니바퀴 - Add
2) Flask 기초: HTML 파일 불러오기 : templates 폴더의 역할!! HTML 파일을 담아두고, 불러오는 역할을 함
index라는 templates 폴더안 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h1>서버를 만들었다!</h1>
</body>
</html>
html 파일 불러오려면 : flask 내장함수 render_template를 이용!!
from flask import Flask, render_template
app = Flask(__name__)
## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
5. Flask시작하기 - 본격 API 만들기
* GET : 통상적으로 데이터 조회(Read) 요청할 때
예) 영화 목록 조회
- 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
ex) google.com?q=북극곰
* POST : 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
- 데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달
1) GET, POST 요청에서 클라이언트의 데이터를 받는 방법
클라이언트에서 서버에 title_give란 키 값으로 데이터를 들고왔다고 가정!!
GET 요청 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!'})
GET 요청 확인 Ajax코드
$.ajax({
type: "GET",
url: "/test?title_give=봄날은간다",
data: {},
success: function(response){
console.log(response)
}
})
POST 요청 API코드
@app.route('/test', methods=['POST'])
def test_post():
title_receive = request.form['title_give']
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 POST!'})
POST 요청 확인 Ajax코드
$.ajax({
type: "POST",
url: "/test",
data: { title_give:'봄날은간다' },
success: function(response){
console.log(response)
}
})
6. [모두의책리뷰] - 프로젝트 세팅: tatic, templates 폴더 app.py 만들기
7. [모두의책리뷰] - 뼈대 준비하기 : app.py 랑 index.html 파일 준비하기
8. [모두의책리뷰] - POST 연습(리뷰 저장)
1) API 만들고 사용하기 - 제목, 저자, 리뷰 정보 저장하기(Create → POST)
- 클라이언트와 서버 확인하기
만들어져 있는 API 정보
1. 요청 정보 : 요청 URL= /review , 요청 방식 = POST
2. 서버가 제공할 기능 : 클라이언트에게 정해진 메시지를 보냄
3. 응답 데이터 : (JSON 형식) 'result'= 'success', 'msg'= '리뷰가 성공적으로 작성되었습니다.'
서버코드 - app.py
## API 역할을 하는 부분
@app.route('/review', methods=['POST'])
def write_review():
# 1. 클라이언트가 준 title, author, review 가져오기.
# 2. DB에 정보 삽입하기
# 3. 성공 여부 & 성공 메시지 반환하기
return jsonify({'result': 'success', 'msg': '리뷰가 성공적으로 작성되었습니다.'})
클라이언트 코드 - index.html
function makeReview() {
// 1. 제목, 저자, 리뷰 내용을 가져옵니다.
// 2. 제목, 저자, 리뷰 중 하나라도 입력하지 않았을 경우 alert를 띄웁니다.
// 3. POST /review 에 저장을 요청합니다.
$.ajax({
type: "POST",
url: "/review",
data: { },
success: function (response) {
if (response["result"] == "success") {
alert(response["msg"] );
window.location.reload();
}
}
})
}
이렇게 만든 후 동작 테스트를 실행:
'리뷰 시작하기' 버튼을 눌렀을 때, '리뷰가 성공적으로 작성되었습니다.' 라는 내용의 alert창이 뜨면 클라이언트 코드와 서버 코드가 연결 되어있는 것입니다.
2) 서버부터 만들기
리뷰를 작성하기 위해 필요한 정보는 다음 세 가지 - 제목(title) - 저자(author) - 리뷰(review)
API 기능은 다음 세 단계로 구성되어야 합니다.
-클라이언트가 준 title, author, review 가져오기
-DB에 정보 삽입하기
-성공 여부 & 성공 메시지 반환하기
즉
A. 요청 정보
- 요청 URL= /review , 요청 방식 = POST
- 요청 데이터 : 제목(title), 저자(author), 리뷰(review)
B. 서버가 제공할 기능 : 클라이언트에게 보낸 요청 데이터를 데이터베이스에 생성(Create)하고, 저장이 성공했다고 응답 데이터를 보냄
C. 응답 데이터 : (JSON 형식) 'msg'= '리뷰가 성공적으로 작성되었습니다.'
@app.route('/review', methods=['POST'])
def write_review():
# title_receive로 클라이언트가 준 title 가져오기
title_receive = request.form['title_give']
# author_receive로 클라이언트가 준 author 가져오기
author_receive = request.form['author_give']
# review_receive로 클라이언트가 준 review 가져오기
review_receive = request.form['review_give']
# DB에 삽입할 review 만들기
doc = {
'title': title_receive,
'author': author_receive,
'review': review_receive
}
# reviews에 review 저장하기
db.bookreview.insert_one(doc)
# 성공 여부 & 성공 메시지 반환
return jsonify({'msg': '리뷰가 성공적으로 작성되었습니다.'})
3). 클라이언트 만들기
리뷰를 작성하기 위해 필요한 정보는 다음 세 가지 입니다.
- 제목(title)
- 저자(author)
- 리뷰(review)
따라서 클라이언트 코드는 다음 세 단계로 구성되어야 합니다.
- input에서 title, author, review 가져오기
- 입력값이 하나라도 없을 때 alert 띄우기.
- Ajax로 서버에 저장 요청하고, 화면 다시 로딩하기
function makeReview() {
// 화면에 입력어 있는 제목, 저자, 리뷰 내용을 가져옵니다.
let title = $("#title").val();
let author = $("#author").val();
let review = $("#bookReview").val();
// POST /review 에 저장(Create)을 요청합니다.
$.ajax({
type: "POST",
url: "/review",
data: { title_give: title, author_give: author, review_give: review },
success: function (response) {
alert(response["msg"]);
window.location.reload();
}
})
}
4)완성 확인하기 : 동작 테스트
제목, 저자, 리뷰를 작성하고 '리뷰 작성하기' 버튼을 눌렀을 때, '리뷰가 성공적으로 작성되었습니다.'라는 alert가 뜨는지 확인
9. [모두의책리뷰] - GET 연습(리뷰 보여주기)
1) API 만들고 사용하기 - 저장된 리뷰를 화면에 보여주기(Read → GET)
- 1 클라이언트와 서버 확인하기
- 2. 서버부터 만들기
- 3. 클라이언트 만들기
따라서 클라이언트 코드는 다음 세 단계로 구성되어야 합니다.
1. 리뷰 목록을 서버에 요청하기
2. 요청 성공 여부 확인하기
3. 요청 성공했을 때 리뷰를 올바르게 화면에 나타내기
- 사용할 API 정보는:
A. 요청 정보
- 요청 URL= `/review` , 요청 방식 = `GET`
- 요청 데이터 : 없음
B. 서버가 제공할 기능 : 데이터베이스에 리뷰 정보를 조회(Read)하고, 성공 메시지와 리뷰 정보를 응답
데이터를 보냄
C. 응답 데이터 : (JSON 형식) 'all_reviews'= 리뷰리스트
- 4. 완성 확인하기
10. [나홀로메모장] - 프로젝트 세팅
11. [나홀로메모장] - API 설계하기 : 프로젝트 설계 - 만들 API 설계
1) 포스팅API - 카드 생성 (Create)
A. 요청 정보
- 요청 URL= `/memo` , 요청 방식 = `POST`
- 요청 데이터 : URL(url_give), 코멘트(comment_give)
B. 서버가 제공할 기능
- URL의 meta태그 정보를 바탕으로 제목, 설명, 이미지URL 스크래핑
- (제목, 설명, URL, 이미지URL, 코멘트) 정보를 모두 DB에 저장
C. 응답 데이터
- API가 정상적으로 작동하는지 클라이언트에게 알려주기 위해서 성공 메시지 보내기
- (JSON 형식) 'result'= 'success'
2) 리스팅API - 저장된 카드 보여주기 (Read)
A. 요청 정보
- 요청 URL= `/memo` , 요청 방식 = `GET`
- 요청 데이터 : 없음
B. 서버가 제공할 기능
- DB에 저장돼있는 모든 (제목, 설명, URL, 이미지URL, 코멘트) 정보를 가져오기
C. 응답 데이터
- 아티클(기사)들의 정보(제목, 설명, URL, 이미지URL, 코멘트) → 카드 만들어서 붙이기
- (JSON 형식) 'articles': 아티클 정보
12. [나홀로메모장] - 조각 기능 구현해보기 : URL에서 페이지 정보 가져오기(meta태그 스크래핑)
메타 태그는, <head></head> 부분에 들어가는, 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그들입니다
예) 구글 검색 시 표시 될 설명문, 사이트 제목, 카톡 공유 시 표시 될 이미지 등
13. [나홀로메모장] - 뼈대 준비하기
14. [나홀로메모장] - POST 연습(메모하기)
15. [나홀로메모장] - GET 연습(보여주기)
느낀점 :
4주차는 너무 이해하기 어렵지만 진도부터 나가야겠다!!
친구초대링크: 혜택 받아가세요
https://spartacodingclub.kr/?f_name=%EA%B9%80%EC%98%81%EC%9D%B8&f_uid=61e82f002664a651fff7fc8d