[웹개발종합반] 4주차 개발일지 (1) - Flask, Mongdb, pymongo, 웹크롤링

사용한 코드는 깃허브에 올려놓았습니다.

https://github.com/Hong-been/Sparta/tree/main/bookreview

GitHub - Hong-been/Sparta: 스파르타 코딩클럽-웹개발종합반을 들으며 작성한 코드입니다.

---

 

서버에 저장된 파일을 웹페이지에 올리기

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

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

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

• 유의사항: "templates"폴더 내부에 index.html 파일을 만들어야 한다.

API 만들기

• 지금까지 API를 통해 정보를 가져오기 위해, Ajax방식으로 가져왔다.
• 클라이언트가 요청할 때 HTTP 통신 규약에 따른다.
• request method를 통해, 어떤 요청 종류인지 서버에게 정보를 알려준다.
• 가장 많이쓰는 요청 방식
  • GET: 보통 데이터 조회, 전달할 때
  • POST: 보통 데이터 생성, 변경, 삭제할 때

GET 방식 이해하기

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

1. 클라이언트(=자바스크립트 콘솔)에서 ajax방식으로 서버(=app.py에서 실행되고 있음)에게 get요청을 보낸다.
2. 키 title_give의 값 "봄날은간다" 인 데이터를 조회하고 싶다고 요청하면, 서버에서 클라이언트가 원하는 키 title_give에 해당하는 데이터가 무엇인지 알아차린다.
3. 아하! 넌 봄날은간다를 값으로 가지고 있는 키 title_give 데이터를 조회하고싶니? 오케오케 나 그거 있으니까 조회해라.
4. 너가 원하는거 조회 성공코드 보내줄게= 클라이언트에서 response로 받는다.
5. = 서버에서 return으로 보낸다

POST방식 이해하기

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

1. 클라이언트가 서버에게 post방식으로 데이터 업데이트, 생성, 삭제 등을 위해 데이터를 건네주면서 요청한다.
2. 서버에서 받기로 한 title_give의 값을 받는다.
3. 잘 받았다고 return으로 성공코드를 보낸다
4. = 클라이언트는 response로 받는다.

모두의 책리뷰

• POST 연습 순서
  1. 클라-서버 확인
  2. 서버 만들기
  3. 클라 만들기
  4. 완성 확인

1. POST: 리뷰를 입력-서버에 저장하기

동작 설명

1. 브라우저의 "리뷰 작성하기" 버튼을 누르면 "makeReview()" 함수가 동작한다.
2. "makeReview()"는 POST방식으로, {sample_give:'샘플데이터'} 형태의 데이터를 건네준다.
3. 서버는 정상적으로 데이터를 받으면,
4. jsonify({'msg': '이 요청은 POST!'})를 반환한다.
5. 서버가 반환한 json을 클라가 response로 받고, msg에 해당하는 값을 alert로 띄운다. 그리고 새로고침.

• app.py에서 클라이언트가 post방식으로 보낸 데이터를 받고, 서버에 저장하는 부분

## API 역할을 하는 부분
@app.route('/review', methods=['POST'])
def write_review():
    title_receive=request.form['title_give']
    author_receive = request.form['author_give']
    review_receive = request.form['review_give']

    doc={
        'title':title_receive,
        'author':author_receive,
        'review':review_receive
    }
    db.bookreview.insert_one(doc)

    return jsonify({'msg': 'Complete to save!'})

• index.html에서 브라우저에 입력된 데이터를 post방식으로 서버에 보내는 부분

function makeReview() {
    let title=$('#title').val()
    let author=$('#author').val()
    let review=$('#bookReview').val()

    $.ajax({
        type: "POST",
        url: "/review",
        data: {
            title_give:title,
            author_give:author,
            review_give: review
        },
        success: function (response) {
            alert(response["msg"]);
window.location.reload();
        }
    })
}

2. GET방식: 서버에 저장된 데이터를 브라우저에 전달하기

동작 설명

1. 브라우저가 준비되면 "showReview()" 함수를 호출한다.
2. 서버에 GET방식으로 저장된 데이터를 요청한다.
3. 서버에서 저장된 데이터를 json방식으로 return해서 보내준다.
4. 클라이언트에서 response로 받고, 브라우저에 표시한다.

• index.html의 페이지 로딩이 끝나면 저장된 데이터를 브라우저에 표시하는 부분

$(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>`

                $('#reviews-box').append(temp_html)
            }
        }
    })
}

• app.py의 브라우저에서 get방식으로 서버에 데이터를 요청하면, 모든 저장된 데이터를 꺼내 주는 부분

@app.route('/review', methods=['GET'])
def read_reviews():
    reviews = list(db.bookreview.find({}, {'_id': False}))
    return jsonify({'all_reviews': reviews})

웹 브라우저 사진

---

나홀로 메모장

API 설계하기

기능 1) url, 코멘트를 서버로 보내주면, 서버에서 데이터(링크, 이미지, 제목, 설명, 코멘트)를 저장한다.

• 요청 URL= /memo
• 요청 방식 = POST
• 요청 데이터 : URL(url_give), 코멘트(comment_give)
• URL의 meta태그 정보를 바탕으로 제목, 설명, 이미지URL 스크래핑
• (제목, 설명, URL, 이미지URL, 코멘트) 정보를 모두 DB에 저장
• API가 정상적으로 작동하는지 클라이언트에게 알려주기 위해서 성공 메시지 보내기
• (JSON 형식) 'result'= 'success'

기능 2) 데이터베이스에 저장된 데이터를 클라이언트에게 보내준다.

• 요청 URL= /memo
• 요청 방식 = GET
• DB에 저장돼있는 모든 (제목, 설명, URL, 이미지URL, 코멘트) 정보를 가져오기
• 아티클(기사)들의 정보(제목, 설명, URL, 이미지URL, 코멘트) → 카드 만들어서 붙이기
• (JSON 형식) 'articles': 아티클 정보

 

---

이번 주차 강의에는 get/post 요청방식을 적용해보는 미니 프로젝트가 많다.

그래서 개념과 적용을 잘 연결하기위해,

스스로 계속 설명을 써가면서 개발하게 되었다.

그결과 개발일지가 점점 길어짐 ㅠㅋㅋㅋㅋㅋ

 

아마 일주일만 지나도 '어...뭐더라...!' 하게 될 내 자신을 알기때문에 ^^....

미래의 나를 위해 머리에 번뜩!하고 이해가 되는 순간 구구절절 모두 써놔야 한다.ㅋㅋㅋㅋㅋ

 

혹시 검색해볼 사람에게 조금이라도 도움이 되기위해서 블로그에도 올립니다~!