스파르타 코딩클럽 [ 웹개발 종합반 ] - 4주차

배운 것

파이썬 프레임워크 'Flask'

Flask를 이용해 간단한 프로그램 만들기

서버-클라이언트 통신

 

내용 정리

 

Flask 프레임워크

    - 서버를 구동시켜주는 편한 코드 모음

    - 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있음

 

👉 프레임워크를 쓰지 않으면 태양초를 빻아서 고추장을 만드는 격! 프레임워크는 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)

 

 

ㅇ 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)

 

 

ㅇ GET, POST 요청에서 클라이언트의 데이터를 받는 방법

    - 예를 들어, 클라이언트에서 서버에 title_give란 키 값으로 데이터를 들고왔다고 가정

 

ㅇ 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!'})

클라이언트에서 넘어오는 'title_give'데이터를 받고, 메세지를 반환

 

GET 요청 시엔, request.args.get('')형식으로 넘어온 데이터를 받는다

 

 

클라이언트 코드 )

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

서버에 'title_give'데이터를 넘겨줌

GET 요청 시엔, url뒤에 데이터를 붙여서 서버에 전송

 

 

 

ㅇ POST 요청

 

서버 코드 )

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

클라이언트에서 넘어오는 'title_give'데이터를 받고, 메세지를 반환

POST 요청 시엔, request.form['']형식으로 넘어온 데이터를 받는다

 

 

클라이언트 코드 )

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

서버에 'title_give'데이터를 넘겨줌

POST 요청 시엔, data안에 데이터를 넣어서 서버에 전송

 

 

 

프로젝트 진행 순서

 

개발을 진행할 때에는,

우선 API를 만든다. (어떤 기능이 필요한지, 그 기능은 어떠한 순서로 구현을 할건지 등) 

 

※ API 정보

  a. 요청 정보

    - 요청 URL

    - 요청 방식 (GET, POST ...)

    - 요청 데이터 ( 서버 요청 시, 줘야 할 데이터, 매개변수 ) 

 

  b. 서버가 제공할 기능

    - 서버가 수행할 동작

 

  c. 응답 데이터

    - 클라이언트에게 반환할 정보

 

 

API 설계 후, 구현을 시작한다.

1. 클라이언트와 서버 확인 (연결되었는지)

2. 서버 만들기

3. 클라이언트 만들기

4. 핑퐁하면서 완성하기

 

 

느낀 점 / 보완할 점

헷갈리는 점이 많았다.

클라이언트와 서버간 통신되는 과정등 여러 개념들이 머리에서 빙글빙글 도는 느낌

 

흐름을 잘 이해하는 것이 중요하다고 생각 됨!