[로드 투 정글] 2. 입학 시험(4) - 서버(Flask)

사용자의 요청을 처리해주는 Flask

처음 전체적인 큰 그림에서 서버를 소개할 때 식당 직원이라고 말씀드린 적이 있는데요. 사용자의 요청에 따라 전담 직원이 이를 응대해줍니다. 만약 손님이 '이 메뉴 주세요!' 하면 A직원이 포스기에 주문 등록을 하고 요리를 만들어서 손님에게 갖다 줍니다. 또 손님이 '계산해주세요!' 하면 B직원이 포스기에 등록된 주문에 따라 손님에게 돈을 받습니다.

 

서버를 구축하는 것은 위의 전담 직원을 배치하는 것과 똑같습니다. 각 직원이 어떤 요청을 받았을 때 어떻게 처리를 할 지를 미리 정해 놓는 것이죠. 그리고 Flask는 바로 이러한 서버를 쉽게 구축할 수 있게 도와주는 웹 프레임워크입니다. 프레임워크는 '어떤 목적을 달성하기 위한 복잡한 문제를 해결하기 위한 구조적인 틀'인데요. 일종의 밀키트라고 생각하시면 편합니다. 요리도 아무것도 없이 맨땅에서 시작하려면 쉽지 않듯이 서버를 맨땅에서 갑자기 만들라고 하면 굉장히 막막합니다. 이때 밀키트 봉지를 뜯어서 요리만 손쉽게 하면 되는 것처럼 Flask를 이용해서 서버를 손쉽게 구축할 수 있습니다.

 

또한 입학 시험의 경우, 메인 웹페이지 전달과 CRUD 요청을 받아 처리하는 간단한 로직을 구현하는 것을 요구하기 때문에 이 글을 보신 다음 주어진 학습 자료를 통해 배우고 익힌다면 충분히 해내실 수 있을 거라고 생각합니다. Flask에서 정해진 규칙에 따라 전담 직원의 역할을 하는 함수를 배치하고, 만들어진 서버 파일을 Python으로 실행하면 서버가 구동되기 시작하는데요. 그러면 이제부터 이 서버를 통해 사용자의 요청을 받아 처리할 수 있게 됩니다.

 

 

AJAX의 GET, POST 요청에 대한 Flask 템플릿

먼저 AJAX에서 GET 또는 POST로 Flask에 사용자 요청을 전달합니다. 이때 사용자 쪽인 AJAX와 서버 쪽인 Flask는 모종의 약속을 맺어 놓았는데요. 서버의 이 주소로 요청을 하면 해당 주소의 전담 함수가 사용자 요청을 처리해 준다는 약속입니다. 이 주소를 url이라고 합니다. AJAX의 url 란에 전용 주소를 적어 사용자 요청을 보내면 Flask의 해당 url에 대응되는 함수가 이를 처리하게 됩니다.

 

또 요청을 보낼 때 선택적으로 추가적인 정보를 보낼 수도 있는데요. 만약 블로그 글 작성 요청을 보내면 사용자가 쓴 글 등이 추가적인 정보로 들어가야겠죠. 이때 GET방식은 추가적인 정보를 url란의 url 뒤에 키-값 쌍을 붙여 전달하고, POST방식은 AJAX의 data란에 키-값 쌍을 붙여 전달합니다.

 

그런데 url의 경우 요청을 보내면서 주소창에 노출되기 때문에 GET 방식으로 사용자 정보를 담아 보내는 건 보안상 그리 좋지 않습니다. 그래도 조회할 게시글 번호 같은 건 담아 보내도 되겠죠. 그래서 보통 Read를 GET 방식으로 처리하고 Create, Update, Delete는 POST 방식으로 많이 처리합니다.

 

로컬 서버 Flask 시작 코드 템플릿

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

@app.route('/')
def home():
	return render_template('기본웹페이지문서.html')

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

 

GET 요청 코드 템플릿

클라이언트(AJAX) 코드 템플릿

$.ajax({
	type: "GET",
	url: "/주소명",
	data : {}
}).done(function(response){
	console.log(response)
});

• 추가 사용자 정보를 보내고 싶다면 주소명 뒤 ?키이름=값 형태로 전달하고, 여러 개를 전달하려면 키이름=값 사이를 &로 연결합니다.
  • /주소명?키이름=값
  • /주소명?키이름1=값1&키이름2=값2

서버(Flask) 코드 템플릿

@app.route('/주소명', methods=['GET'])
def 함수명():
	# receive = request.args['키이름']
	# print(receive)
	return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

• 전달된 추가 사용자 정보를 조회 및 활용하고 싶다면 request.args['키이름']을 사용해 가져올 수 있습니다.

 

POST 요청 코드 템플릿

클라이언트(AJAX) 코드 템플릿

$.ajax({
	type: "POST",
	url: "/주소명",
	data: {
    	// 키이름: 값
    	}
}).done(function(response){
	console.log(response)
});

• 추가 사용자 정보를 보내고 싶다면 data란 안에 키이름: 값 형태로 전달하고, 여러 개를 전달하려면 ,(쉼표)로 구분합니다.

서버(Flask) 코드 템플릿

@app.route('/주소명', methods=['POST'])
def 함수명():
	# receive = request.form['키이름']
	# print(receive)
	return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

• 전달된 추가 사용자 정보를 조회 및 활용하고 싶다면 request.form['키이름']을 사용해 가져올 수 있습니다.

 

마치면서

이제 클라이언트와 서버의 연결이 완료되었습니다. 이제 남은 건 PyMongo로 서버와 DB를 연결하는 일인데요. DB 연결까지 끝나게 되면 그럴듯한 웹 서비스가 완성됩니다. 점점 하나의 웹 서비스를 개발할 수 있는 개발자가 되어 가는 자신을 보고 자랑스러운 느낌이 드셨으면 좋겠습니다. 그러면 다음 글에서 뵙겠습니다. 감사합니다!