TIL: 항해99 웹개발 종합반 4주차 (1)

211229_WED

4-1.

• 서버: 컴퓨터에 돌아가는 하나의 프로그램
• 하나의 컴퓨터로 서버를 만들고 브라우저를 통해 확인 -> 로컬 서버/개발 환경

4-2.

• Flask 서버에서 돌아가는 프로그램의 이름은 통상 'app.py' 라고 짓는다
• Flask framework: 서버를 구동시켜주는 편한 코드 모음
• 하나의 framework와 + 여러 개의 library를 사용하여 서버 제작

4-3.

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)

• 새로 산 맥북에서 flask를 통해 localhost 5000을 열려고 하자,
  OSError: [Errno 48] Address already in use
  라는 문구와 함께 에러가 나왔고, 강의 FAQ에서 하라는 대로 터미널에서 port 5000을 사용하고 있는 pid#를 찾아 종료했지만, 문제는 해결되지 않았다.
  ('활성 상태 보기'에서 pid# 검색결과 제어센터가 5000port를 사용하고 있는 것을 알 수 있었고, 터미널로 kill -9 pid# 을 통해 종료하여도 제어센터가 다시 반복적으로 사용하고 있다는 것을 알 수 있었다.)
  맥북 시스템 환경설정 -> 공유 -> Airplay 수신모드 체크 해제 를 통해 해결할 수 있었다.
• port 는 인터넷 상에 뚫어놓은 번호 (localhost:5000 -> 내가 만든 서버에 5000번 문)

4-4.

• Framework를 쓸 경우, (flask) 정해진 폴더 구조가 있다
  • app.py
  • folders
    • static (.css, image)
    • templates (.html = index.html)

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

@app.route('/') **-> localhost:5000('/')**
def home():
   return render_template('index.html') **-> templates 폴더에 있는 index.html을 보여준다**

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

• app.py run: 서버에 있는 index.html을 요청해서 열기
  vs.
• index.html run: 컴퓨터에 있는 index.html라는 파일 그냥 열기

4-5.

• API도 규칙이 있고 해당하는 주소가 있다
  • GET
    • Data 조회 (read) 요청
  • POST
    • Data 생성, 변경, 삭제
• API 만들고, 클라이언트에서 ajax로 콜한다.
• GET example

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

-Client (Ajax)
    $.ajax({
        type: "GET",
        url: "/test?title_give=봄날은간다",
        data: {},
        success: function(response){
           console.log(response)
        }
      })

• POST example

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

-Client (Ajax)
    $.ajax({
        type: "POST",
        url: "/test",
        data: { title_give:'봄날은간다' },
        success: function(response){
           console.log(response)
        }
      })

4-8.

• API 만들고 사용하기
  1. Client & Server Check
  2. Code Server
  3. Code Client
  4. Ping Pong Check

• Bookreview Post Code

-API Server (app.py)
    @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': '저장 완료!!'})

-Client (index.html)
    function makeReview() {
        let title = $('#title').val() -> .val() 은 input type = "text" 를 가져온다.
        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();
                        }
                    })
                }

4-9.

• Bookreview Get Code

-API Server (app.py)
    	@app.route('/review', methods=['GET'])
    	def read_reviews():
        reviews = list(db.bookreview.find({}, {'_id': False})) -> 'reviews'는 잠시 data를 담는 변수 
        return jsonify({'all_reviews': reviews})
    
-Client (index.html)
	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-11.

• 가장 첫 번째로 할 것: API 설계하기
• Alonememo API 설계
  • 기능
    1. url & comment를 서버로 보내서 데이터 (이미지, 제목, 링크, 설명, 코멘트) 를 저장
    2. card (data)를 보여주는 것
  • 카드 생성
    1. 요청 정보
       • 요청 url: /memo, 요청 방식: POST
       • 요청 Data: url(url_give), comment (comment_give)
    2. 서버가 제공할 기능
       • url의 meta tag info 바탕으로 제목, 설명, 이미지 url 스크래핑
       • (제목, 설명, url, 이미지url, 코멘트) 정보를 모두 db에 저장
    3. 응답 데이터
       • API 정상 작동하는지 클라이언트에게 메시지로 알려주기
       • JSON 형식 'result' = 'success'
  • 카드 보여주기
    1. 요청 정보
       • 요청 url: /memo, 요청 방식: GET
       • 요청 Data: 없음
    2. 서버가 제공할 기능
       • DB에 저장되어 있는 모든 Data 가져오기
    3. 응답 데이터
       • 기사들의 정보 카드로 만들어서 붙이기
       • JSON 형식 'article': 아티클 정보