스파르타코딩클럽 4주차 필기

Hanal·2021년 10월 5일
스파르타코딩클럽
0

1. Flask 시작하기 - 서버만들기

2)Flask 패키지 설치하고 시작!

리마인드! 패키지 설치 화면 진입하기
윈도우: 좌상단File -> setting -> Python interpreter

  • python interpreter 화면에서 + 버튼을 누르기
  • flask로 검색한 후, install package 클릭

3) Flask 기초: 기본 실행

  • Flask 프레임워크: 서버를 구동시켜주는 편한 코드 모음. 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있다.
    => 프레임워크를 쓰지 않으면 태양초를 빻아서 고추장을 만드는 격! 프레임워크는 3분 요리/소스 세트라고 생각하면 됨!

  • app.py 파일을 만들어 아래 코드를 붙여넣기.
    => 통상적으로 flask 서버를 돌리는 파일은 app.py라고 이름 지음.

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을 클릭하고 터미널에 메시지가 잘 뜨면 실행 성공.

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)

2. Flask시작하기 - HTML파일 주기

5)Flask 기초: 기본 폴더구조 - 항상 이렇게 세팅하고 시작!

  • Flask 서버를 만들 때, 항상,

프로젝트 폴더 안에,
ㄴstatic 폴더 (이미지, css파일을 넣어둡니다)
ㄴtemplates 폴더 (html파일을 넣어둡니다)
ㄴapp.py 파일

이렇게 세 개를 만들어두고 시작하세요. 이제 각 폴더의 역할을 알아봅시다!

(꼭 참고!! venv는 실제로는 보이지만, 안보인다~라고 생각하세요! 기억하시죠?)

6)Flask 기초: HTML 파일 불러오기

  • templates 폴더의 역할: HTML 파일을 담아두고, 불러오는 역할.
  1. 간단한 index.html 파일을 templates 안에 만들기
    [코드스니펫]index.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>
  1. 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)

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

7)들어가기 전에: GET, POST 요청타입

  • 리마인드! API는 은행의 창구와 같음. 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 처리하는 것이 다른 것처럼, 클라이언트가 요청할 때에도, "방식"이 존재함. 클라이언트는 요청할 때 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란 키 값으로 데이터를 들고왔다고 생각하자. (주민등록번호라는 키 값으로 850520-..을 가져온 것과 같은 의미)
    =>받은 값을 개발자가 볼 수 있게 print로 찍어볼 수 있게 했다. 실전에선 pirnt로 찍어주는 것 외에, 여러가지 작업을 할 수 있겠죠?

[코드스니펫]-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)
    }
  })

4.[모두의책리뷰]-프로젝트 세팅

9) 문제 분석 - 완성작부터 보기!

  • sparta -> projects -> bookreview 폴더를 열고 시작!
http://spartacodingclub.shop/bookreview

10)프로젝트 설정 - flask 폴더 구조 만들기

  • static, templates 폴더 + app.py 만들기!

5.[모두의책리뷰]- 뼈대 준비하기

11)프로젝트 준비 - app.py 준비하기

[코드스니펫] - 모두의책리뷰 -app.py

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

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta

## HTML을 주는 부분
@app.route('/')
def home():
    return render_template('index.html')

## API 역할을 하는 부분
@app.route('/review', methods=['POST'])
def write_review():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': '이 요청은 POST!'})


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


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

12)프로젝트 준비-index.html 준비하기

[코드스니펫]- 모두의책리뷰-index.html

<!DOCTYPE html>
<html lang="ko">

    <head>
        <!-- Webpage Title -->
        <title>모두의 책리뷰 | 스파르타코딩클럽</title>

        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
              integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
              crossorigin="anonymous">

        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
                integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
                crossorigin="anonymous"></script>

        <!-- 구글폰트 -->
        <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap" rel="stylesheet">

        <script type="text/javascript">

            $(document).ready(function () {
                showReview();
            });

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

            function showReview() {
                $.ajax({
                    type: "GET",
                    url: "/review?sample_give=샘플데이터",
                    data: {},
                    success: function (response) {
                        alert(response["msg"]);
                    }
                })
            }
        </script>

        <style type="text/css">
            * {
                font-family: "Do Hyeon", sans-serif;
            }

            h1,
            h5 {
                display: inline;
            }

            .info {
                margin-top: 20px;
                margin-bottom: 20px;
            }

            .review {
                text-align: center;
            }

            .reviews {
                margin-top: 100px;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <img src="https://previews.123rf.com/images/maxxyustas/maxxyustas1511/maxxyustas151100002/47858355-education-concept-books-and-textbooks-on-the-bookshelf-3d.jpg"
                 class="img-fluid" alt="Responsive image">
            <div class="info">
                <h1>읽은 책에 대해 말씀해주세요.</h1>
                <p>다른 사람을 위해 리뷰를 남겨주세요! 다 같이 좋은 책을 읽는다면 다 함께 행복해질 수 있지 않을까요?</p>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">제목</span>
                    </div>
                    <input type="text" class="form-control" id="title">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">저자</span>
                    </div>
                    <input type="text" class="form-control" id="author">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">리뷰</span>
                    </div>
                    <textarea class="form-control" id="bookReview"
                              cols="30"
                              rows="5" placeholder="140자까지 입력할 수 있습니다."></textarea>
                </div>
                <div class="review">
                    <button onclick="makeReview()" type="button" class="btn btn-primary">리뷰 작성하기</button>
                </div>
            </div>
            <div class="reviews">
                <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">제목</th>
                        <th scope="col">저자</th>
                        <th scope="col">리뷰</th>
                    </tr>
                    </thead>
                    <tbody id="reviews-box">
                    <tr>
                        <td>왕초보 8주 코딩</td>
                        <td>김르탄</td>
                        <td>역시 왕초보 코딩교육의 명가답군요. 따라하다보니 눈 깜짝할 사이에 8주가 지났습니다.</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>

</html>

6.[모두의책리뷰]-POST연습(리뷰저장)

13)API만들고 사용하기 - 제목, 저자, 리뷰 정보 저장하기 (Create -> POST)

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

  • 여기서는 적혀 있는 쌍으로 되어있는 서버-클라이언트 코드를 확인하고 갈게요.
  • 분홍 형광펜 부분이 서로 어떻게 매칭되는지 확인. (notion 확인)
  • 만들어져 있는 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. 서버부터 만들기

  • 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. 클라이언트 만들기

  • API는 약속. API를 사용할 클라이언트를 만들자!

리뷰를 작성하기 위해 필요한 정보는 다음 세 가지.
-제목(title)
-저자(author)
-리뷰(review)

따라서 클라이언트 코드는 다음 세 단계로 구성되어야 합니다.
1. input에서 title, author, review 가져오기
2. 입력값이 하나라도 없을 때 alert 띄우기.
3. 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();
        }
    })
}

4. 완성 확인하기

  • 동작 테스트
    제목, 저자, 리뷰를 작성하고 '리뷰 작성하기'버튼을 눌렀을 때, '리뷰가 성공적으로 작성되었습니다.'라는 alert가 뜨는지 확인합니다.

7. [모두의책리뷰]-GET연습(리뷰 보여주기)

14) API 만들고 사용하기 - 저장된 리뷰를 화면에 보여주기 (Read -> GET)

노션 참고.

profile
Hanal
My goal is to become a developer. I will upload what I learned on a weekly basis.
이전 포스트

스파르타코딩클럽 3주차 필기

다음 포스트

스파르타 코딩클럽 5주차 필기

0개의 댓글

관련 채용 정보