Server와 Client의 관계 (API & Ajax)

오늘 서버와 클라이언트의 관계에 더 깊숙히 배웠다. 진짜 이해하기 어려워서 4-5강의를 계속 돌려보고 했다. 그렇게 몇십분동안 방황하다가 조금씩 이해가기 시작했다. 물론, 완벽하지 않지만 많이 따라간 것 같다.

• API는 서버가 클라이언트 요청을 받기 위해서 만들어놓은 창구
• Framework는 남이 짜둔 규칙이나 틀 속에서 자유럽게 코딩 할 수 있고 library는 내가 스스로 코딩하는 중에, 남이 만든 프로그램을 자유롭게 가져다 쓸 수 있다.

1. Flask Package

Flask framework: 서버를 구동시켜주는 편한 코드 모음. 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있다.

flash 시작 코드

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 서버를 만들 때, 항상,

프로젝트 폴더 안에,
ㄴstatic 폴더 (이미지, css파일을 넣어둡니다)
ㄴtemplates 폴더 (html파일을 넣어둡니다)
ㄴapp.py 파일

2. GET 요청에서 클라이언트의 데이터를 받는 방법

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({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
  })

app.py 줄대로 코드 해석 (내가 이해한 바로는):

1) url /test를 주고 get 방식이라고 알린다
2) method 시작
3) request.args.get(‘title_give’) 코드로 title_give로 갖고온 거 값을 ('봄날은간다') title_receive로 저장한다
4) title_receive 값을 찍는다 (찍히는 것: 봄날은간다)
5) return으로 (client 쪽) response에게 값을 내려준다

Ajax 줄대로 코드 해석 (내가 이해한 바로는):

1) 클라이언트에서 Ajax로 콜을 한다
2) get 방식으로 요청한다
3) url은 /test (서버 첫째줄)을 쓰고 ‘?’로 get 요청이라 알리고 ‘title_give’라는 이름으로 ‘봄날은간다’라는 값을 서버로 가져온다 (API)
4) data는 비워둔다 get 방식이니까 (POST 할 때 씀)
5) response에다가 API(서버 쪽)에서 내려준 값을 받는다 (return한 줄 값을 response로 저장하는 것)

3. POST 요청에서 클라이언트의 데이터를 받는 방법

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({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
    success: function(response){
       console.log(response)
    }
  })

app.py 줄대로 코드 해석 (내가 이해한 바로는):

1) url /test를 주고 post 방식이라고 알린다
2) method 시작
3) request.args.get(‘title_give’) 코드로 title_give로 갖고온 거 값을 ('봄날은간다') title_receive로 저장한다
4) title_receive 값을 찍는다 (찍히는 것: 봄날은간다)
5) return으로 (client 쪽) response에게 값을 내려준다

Ajax 줄대로 코드 해석 (내가 이해한 바로는):

1) 클라이언트에서 Ajax로 콜을 한다
2) post 방식으로 요청한다
3) url은 /test (서버 첫째줄)을 쓴다
4) data는 ‘title_give’라는 이름으로 ‘봄날은간다’라는 값을 서버로 가져온다 (API)
5) response에다가 API(서버 쪽)에서 내려준 값을 받는다 (return한 줄 값을 response로 저장하는 것)