개발일지 Week 4 / Flask 프레임워크를 이용해 서버 구동, API만들기

 

예대출신의 코딩 도전기 4주차

공부하며 정리한 내용입니다. 틀린 사항이 있으면 덧글로 알려주시면 감사하겠습니다.

1)Flask 시작하기

• 통상적으로 Flask서버 돌리는 파일 이름을 app.py로 명한다.

#Flask 프레임워크: 서버 구동에 필요한 코드 모음.

 

프레임워크? 라이브러리? 그 둘의 차이는?

• 프레임워크 : 특정 프로그램 개발을 위한 여러 요소와 매뉴얼이 되는 룰을 제공하는 프로그램 (자유도에 제약과 규약이 있다)
• 라이브러리 : 프로그램 개발에 도움을 주는 '도구의 모음' (자유도 측면에서 제약이 없음)

Flask 시작 코드

from flask import Flask 
app = Flask(__name__) 

# mongoDB를 이용시 조작을 위한 pymongo 임포트
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.reviewdb

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

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

#주의 : url별로 함수 명이 같거나, route('/') 등의 주소가 같으면 안된다.

2)Flask 기초

• 프로젝트 폴더구조

(프로젝트 폴더 내에)

ㄴ static 폴더 (이미지,css넣어둔다)

ㄴ templates 폴더 (html을 넣어둔다)

ㄴ app.py 파일

 

• Flask에 HTML불러오기

내장함수인 render_template 을 이용한다. (프레임워크인 만큼, 위의 폴더구조 등을 정확히 지키는 것이 이런 내장함수 작동을 위해 중요하다.)

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

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

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)
   
# 추후 API를 만들 때는 flask에서 import jasonify, request 도 추가해준다

 

3)Flask - API만들어 POST, GET 연습해보기

 

API 설계 기본 STEP

1. 클라이언트와 서버 확인하기
2. 서버부터 만들기
3. 클라이언트 만들기
4. 완성 확인하기

위 스텝을 미니 프로젝트를 진행하며 익혔다.

 

미니 프로젝트 : 모두의 책리뷰

완성본 링크 : http://spartacodingclub.shop/bookreview

리뷰를 작성하면 저장하고 보여주는 웹페이지를 예제로 진행하며 API 설계 단계를 따라가보면 이렇다.

db는 mongoDB를 이용, pymongo라이브러리로 조작한다.

*POST 연습

*버튼을 누르면 POST 요청으로 리뷰가 저장되게 만들기

 

(1) 클라이언트와 서버 확인하기

서버코드 - app.py

@app.route('/review', methods=['POST'])
def write_review():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': '이 요청은 POST!'})

클라이언트 코드 - index.html

function makeReview() {
                $.ajax({
                    type: "POST",
                    url: "/review",
                    data: {sample_give:'샘플데이터'},
                    success: function (response) {
                        alert(response["msg"]);
                        window.location.reload();
                    }
                })
            }

위의 API 정보를 요약하면

1. 요청정보 : 요청 URL = /review, 요청 방식 = POST
2. 서버가 제공할 기능 : 클라이언트에게 정해진 메시지를 보냄
3. 응답데이터 : 'result='success', 'msg'='리뷰가 성공적으로 작성되었습니다.' (JSON형식)

으로, 응답 데이터가 잘 출력되면 연결을 확인한 것이다.

 

(2) 서버부터 만들기

API는 약속이다. API를 먼저 만들어보자.

리뷰에 들어갈 정보는 제목(title), 저자(author), 리뷰(review) 이 세가지이다.

따라서 API의 기능은 다음 세 단계로 구성되어야 한다.

1. 클라이언트가 준 title, author, review 가져오기.
2. DB에 정보 삽입하기
3. 성공 여부 & 성공 메시지 반환하기

👉이를 정리하면, 사용할 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': '리뷰가 성공적으로 작성되었습니다!'})

 

 

(3) 클라이언트 만들기

리뷰를 작성하기 위해 필요한 정보는 다음 세 가지이다.

• 제목(title)
• 저자(author)
• 리뷰(review)

따라서 클라이언트 코드는 다음 세 단계로 구성되어야 한다.

1. input태그에서 title, author, review 텍스트값 가져오기
2. 입력값이 하나라도 없을 때 alert 띄우기.
3. Ajax로 서버에 저장 요청하고, 화면 다시 로딩하기

완성 코드

//리뷰 저장 API
            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가 뜨는지 확인

GET 연습

#저장된 리뷰를 화면에 보여주기(Read → GET)

POST 연습과 마찬가지로 API를 만들 때

1. 클라이언트와 서버 확인하기
2. 서버부터 만들기
3. 클라이언트 만들기
4. 연결 확인하기

순서로 진행한다.

(1) 클라이언트와 서버 확인하기

미리 적혀있는 서버-클라이언트 코드를 확인해보면

[서버코드 - app.py]

@app.route('/review', methods=['GET'])
def read_reviews():
    sample_receive = request.args.get('sample_give')
    print(sample_receive)
    return jsonify({'msg': '이 요청은 GET!'})

[클라이언트 코드 = index.html]

function showReview() {
		// 서버의 데이터를 받아오기
		$.ajax({
        type: "GET",
        url: "/review?sample_give=샘플데이터",
        data: {},
        success: function (response) {
            alert(response["msg"]);
        }
    })
}

새로고침 했을 때, '이 요청은 GET!'이라는 alert창이 뜨면 클라이언트 코드, 서버 코드가 연결 된 것이다.

 

(2) 서버부터 만들기

API에 필요한 기능은

1. DB에서 리뷰 정보 모두 가져오기
2. 성공 여부 & 리뷰 목록 반환하기

정리하면 만들 API 정보는 다음과 같다.

 

A. 요청 정보

• 요청 URL= /review , 요청 방식 = GET
• 요청 데이터 : 없음

B. 서버가 제공할 기능

• 데이터베이스에 리뷰 정보를 조회(Read)하고, 성공 메시지와 리뷰 정보를 응답 데이터를 보냄

C. 응답 데이터

• 'all_reviews'= 리뷰리스트 (JSON형식)

완성 코드

@app.route('/review', methods=['GET'])
def read_reviews():
    # 1. DB에서 리뷰 정보 모두 가져오기
    reviews = list(db.bookreview.find({}, {'_id': False}))
    # 2. 성공 여부 & 리뷰 목록 반환하기
    return jsonify({'all_reviews': reviews})

 

(3) 클라이언트 만들기

클라이언트 코드는 다음 세 단계로 구성되어야 한다.

1. 리뷰 목록을 (페이지가 로드될 때)서버에 요청하기
2. 요청 성공 여부 확인하기
3. 요청 성공시 리뷰를 올바르게 화면에 나타내기

완성 코드

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

(4) 완성 확인하기

화면을 새로고침했을 때, DB에 있는 리뷰가 화면에 잘 나타나면 성공

 

 

서버의 return = jasonify({'변수a' : '변수b'}) 의 변수명을 정하는 규칙이나 클라이언트의 success: function (response) { } 이부분의 response역할이 아직 정리가 잘 안된다. 관련 정보 더 찾아보기.