ABOUT ME

IT 및 초보 개발자로 성장하기

Today
Yesterday
Total
  • 22020315 스파르타코딩 개발일지 EP.4
    2022년 스파르타코딩 2022. 3. 15. 21:05
    반응형

    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 

    반응형

    댓글

사라져라~얍!