만들어야 할 기능 파악하기

1. 만들어야 할 기능을 파악하기

• 포스팅API

      → (1) 클라이언트에서 줄 데이터: 제목, 코멘트

      → (2) 서버에서 할 일: 제목, 코멘트를 DB에 저장

      → (3) 서버에서 줄 것: 잘 저장됐다는 메시지

• 리스팅API

      → (1) 클라이언트에서 줄 데이터: 없음

      → (2) 서버에서 할 일: 제목, 코멘트를 DB에서 모두 추출

      → (3) 서버에서 줄 것: 제목, 코멘트 꾸러미(리스트 형태)

2. 서버-클라이언트 연결 코드 만들기

💡 리마인드 - API는 은행 창구와 같은 것!

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것, 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, '타입'이 존재합니다.

▶ GET → 통상적으로! 데이터 조회(Read)를 요청할 때
             예) 영화 목록 조회

▶ POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
               예) 회원가입, 회원탈퇴, 비밀번호 수정

 

[코드스니펫] - 기본 flask 코드

from flask import Flask, render_template, jsonify, request
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)

 

3. GET 요청

• [코드스니펫] - Javascript 로딩 후 실행

$(document).ready(function () {
      alert('안녕!')
})

• [코드스니펫] - GET 요청 Ajax코드

$.ajax({
      type: "GET",
      url: "/diary?sample_give=샘플데이터",
      data: {},
      success: function(response){
          alert(response['msg'])
     }
})

• [코드스니펫] - GET 요청 API코드

@app.route('/diary', methods=['GET'])
def show_diary():
      sample_receive = request.args.get('sample_give')
      print(sample_receive)
      return jsonify({'msg': 'GET 연결 완료!'})

 

4. POST 요청

• [코드스니펫] - POST 요청 Ajax코드

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

• [코드스니펫] - POST 요청 API코드

@app.route('/diary', methods=['POST'])
def save_diary():
     sample_receive = request.form['sample_give']
     print(sample_receive)
     return jsonify({'msg': 'POST 요청 완료!'})

 

파이참에서 새 프로젝트 시작할 때 설정창

 

5. 만들어갈 순서

1. 생김새 먼저 만들기 - HTML+CSS
2. 만들어야 할 기능 파악하기 (포스팅 API, 리스팅 API 두 개!)
3. 서버-클라이언트 연결 코드 만들기
4. 포스팅 API 만들기 (꿀팁! 보통 저장하는 것을 먼저 만들 때가 더 편해요!)
5. 리스팅 API 만들기