01. Flask시작하기 - 서버만들기
sparta → projects → prac 폴더를 열고 시작!
-
2) Flask 패키지 설치하고 시작!
리마인드! 패키지 설치 화면 진입하기
윈도우 : 좌상단File → setting → Python interpreter
맥 : 좌상단Pycharm → Preference → Python Interpreter-
python interpreter 화면에서 + 버튼을 누르면 아래 창이 뜹니다!
(맥은 아래에, 윈도우는 오른쪽에 위치) -
flask로 검색한 후, Install package 클릭
-
-
3) Flask 기초: 기본 실행
-
Flask 프레임워크: 서버를 구동시켜주는 편한 코드 모음. 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있습니다.
프레임워크를 쓰지 않으면 태양초를 빻아서 고추장을 만드는 격!
프레임워크는 3분 요리/소스 세트라고 생각하면 되겠습니다! -
app.py 파일을 만들어 아래 코드를 붙여넣어봅니다.
파일 이름은 아무렇게나 해도 상관없지만,
통상적으로 flask 서버를 돌리는 파일은 app.py라고 이름 짓습니다!-
[코드스니펫] - 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)
-
-
오른쪽 클릭 → '
Run app'을 클릭하고, 터미널에 아래와 같은 메시지가 뜨면 실행 성공!
-
이제 크롬에서 http://localhost:5000/ 으로 접속해보세요.
화면에
Hello World!라는 메시지가 보이시나요? 그렇다면 성공한 것! 👏 -
종료하는 방법
터미널 창을 클릭하시고, ctrl + c 을 누르시면 서버를 종료할 수 있습니다.
-
-
4) Flask 기초: URL 나눠보기
-
@app.route('/) 부분을 수정해서 URL을 나눌 수 있습니다! 간단하죠?
url 별로 함수명이 같거나, route('/')내의 주소가 같으면 안됩니다.
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)
-
02. Flask시작하기 - HTML파일 주기
-
5) Flask 기초: 기본 폴더구조 - 항상 이렇게 세팅하고 시작!
Flask 서버를 만들 때, 항상,
프로젝트 폴더 안에,
ㄴstatic 폴더 (이미지, css파일을 넣어둡니다)
ㄴtemplates 폴더 (html파일을 넣어둡니다)
ㄴapp.py 파일이렇게 세 개를 만들어두고 시작하세요. 이제 각 폴더의 역할을 알아봅시다!
(꼭 참고!! venv는 실제로는 보이지만, 안보인다~라고 생각하세요! 기억하시죠?)
-
6) Flask 기초: HTML 파일 불러오기
templates 폴더의 역할을 알아보겠습니다.
HTML 파일을 담아두고, 불러오는 역할을 하죠!-
간단한 index.html 파일을 templates 안에 만들기
- [코드스니펫] index.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)
-
03. Flask시작하기 - 본격 API 만들기
-
7) 들어가기 전에: GET, POST 요청타입 - 리마인드
리마인드!
은행의 창구가 API와 같다는 것을 기억하시나요?
****같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 처리하는 것이 다른 것처럼,클라이언트가 요청 할 때에도, "방식"이 존재합니다.
HTTP 라는 통신 규약을 따른다는 거 잊지 않으셨죠? 클라이언트는 요청할 때 HTTP request method(요청 메소드)를 통해, 어떤 요청 종류인지 응답하는 서버 쪽에 정보를 알려주는 거에요.GET, POST 방식
여러 방식(링크)이 존재하지만 우리는 가장 많이 쓰이는 GET, POST 방식에 대해 다루겠습니다.
-
GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회
→ 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
→ 예: google.com?q=북극곰 -
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
→ 데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달
-
-
8) GET, POST 요청에서 클라이언트의 데이터를 받는 방법
-
예를 들어, 클라이언트에서 서버에 title_give란 키 값으로 데이터를 들고왔다고 생각합시다.
(주민등록번호 라는 키 값으로 850120- .. 을 가져온 것과 같은 의미)받은 값을 개발자가 볼 수 있게 print 로 찍어볼 수 있게 했습니다. 실전에선 print로 찍어주는 것 외에, 여러가지 작업을 할 수 있겠죠? - **[코드스니펫] - GET 요청 API코드** ```python @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코드** ```jsx $.ajax({ type: "GET", url: "/test?title_give=봄날은간다", data: {}, success: function(response){ console.log(response) } }) ``` - **[코드스니펫] - POST 요청 API코드** ```python @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코드** ```jsx $.ajax({ type: "POST", url: "/test", data: { title_give:'봄날은간다' }, success: function(response){ console.log(response) } }) ```
-
04. [모두의책리뷰] - POST 연습(리뷰 저장)
-
13) 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창이 뜨면 클라이언트 코드와 서버 코드가 연결 되어있는 것입니다.
-
-
서버부터 만들기
API 는 약속이라고 했습니다. API를 먼저 만들어보죠!
리뷰를 작성하기 위해 필요한 정보는 다음 세 가지 입니다.
-
제목(title)
-
저자(author)
-
리뷰(review)
따라서 API 기능은 다음 세 단계로 구성되어야 합니다.
-
클라이언트가 준 title, author, review 가져오기.
-
DB에 정보 삽입하기
-
성공 여부 & 성공 메시지 반환하기
정리하면, 만들 API 정보는 아래와 같습니다.
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': '리뷰가 성공적으로 작성되었습니다.'})
-
-
-
클라이언트 만들기
API 는 약속이라고 했습니다. API를 사용할 클라이언트를 만들어보죠!
리뷰를 작성하기 위해 필요한 정보는 다음 세 가지 입니다.
-
제목(title)
-
저자(author)
-
리뷰(review)
따라서 클라이언트 코드는 다음 세 단계로 구성되어야 합니다.
-
input에서 title, author, review 가져오기
-
입력값이 하나라도 없을 때 alert 띄우기.
-
Ajax로 서버에 저장 요청하고, 화면 다시 로딩하기
사용할 API 정보
A. 요청 정보
-
요청 URL=
/review, 요청 방식 =POST -
요청 데이터 : 제목(title), 저자(author), 리뷰(review)
B. 서버가 제공할 기능 : 클라이언트에게 보낸 요청 데이터를 데이터베이스에 생성(Create)하고, 저장이 성공했다고 응답 데이터를 보냄
C. 응답 데이터 : (JSON 형식) 'result'= 'success', 'msg'= '리뷰가 성공적으로 작성되었습니다.'
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(); } }) }
-
-
-
완성 확인하기
동작 테스트
제목, 저자, 리뷰를 작성하고 '리뷰 작성하기' 버튼을 눌렀을 때,
'리뷰가 성공적으로 작성되었습니다.'라는 alert가 뜨는지 확인합니다.
-
-
