Flask로 GET, POST 요청 보내기 (1)
이번 시간에는 클라이언트에서 서버로 정보를 어떻게 보내는지에 대해서 알아보도록 하겠습니다.
클라이언트에서 서버로 정보를 전송하는 예제에서 쓸 모듈이 몇 개가 있습니다.
render_template모듈과 request 모듈입니다.
Flask 프로젝트 파일 구성을 보시면 templates라는 파일이 보이실텐데요, 뒤에서 이 파일 안에 html 파일을 저장하도록 하겠습니다.
html을 templates 폴더 안에 저장시켜 놓으면 render_template 모듈을 이용해서 html파일을 불러올 수 있습니다.
request 모듈은 클라이언트에서 서버로 어떤 요청(GET, POST 등)을 보낼지 정해줍니다.
여기서 ‘GET이 뭘까? POST는 뭐지?’라는 의문이 들 수 있는데 둘다 서버로
요청하는 방식이지만 쉽게 말해서
GET은 모든 파라미터를 url로 보내는 것(눈에 보임)
POST는 전달하려는 정보가 HTTP body에 포함되어 전달되는 것(눈에 보이지 않음)
으로 생각하시면 됩니다. (쉽지가 않네요…)
혹시 이해가 덜 되시는 분들이 있을 것같아서 구글링을 통해서 나온 그림을 가져와 보았습니다.
위에 GET 그림을 볼게요. Client 에서 Server로 GET을 보내는데 아래에 이상한 주소가 적혀있네요. http://example.com?date=20140410 이라는 주소에 GET 이라는 메소드를 보낸다는 것입니다. 결과는 해당 주소에 대한 웹페이지가 보여지겠네요.
POST쪽으로 내려와보겠습니다. 이번에는 http://example.com 이라는 주소에 POST 메소드와 함께 Payload라는 것을 함께 보내고 있습니다.
여기서 Payload아래에 (Form Data, JSON Strings, Query Parameters, View States, etc)가 있네요. 괄호 안에 쓰여져 있는 것들은 당장 이해 안하셔도 됩니다. 그저 내가 서버로 어떠한 정보를 보내는데 POST 메소드를 쓰는구나 이해하시면 되요.
한 번 더 정리하자면 작은 양의 데이터(url 파라미터)를 보낼 때, 혹은 기본으로는 GET요청, 전송하는 데이터 양이 많을 때는 POST요청을 쓴다고 보시면 되요…(저도 헷갈립니다…)
아직도 이해가 안되실 수도 있어요. 그럼 이제부터는 직접 만들어보며 이해하도록 하겠습니다.
플라스크 소스 코드를 작성하기에 앞서 저희는 서버로 정보를 보내야 하기 때문에 정보를 담아 전송할 수 있는 html 파일을 먼저 만들도록 할게요.
templates 폴더 안에 post.html 이라는 파일을 만들겠습니다.
html 파일은 이렇게 작성해놓을게요.
이 html 파일이 어떻게 작동할지 아시는 분도 있고 모르시는 분도 있겠지만 저는 다 모른다는 가정하에 설명을 하도록 하겠습니다.(아시는 분은 아래로 내려가셔도 되요!)
body 부분의 form부터 설명드릴께요. form은 그냥 Client에서 Server로 보낼 정보를 담을 가방으로 생각하시면 되요. 옆에 action과 method가 적혀 있는데 action이란 form의 정보들이 도착하는 목적지라고 생각하시면 편합니다. 제가 만든 action의 주소를 따라가면 127.0.0.1:5000/post로 보내지겠네요.
form 태그 안에 input 이라는 태그가 있는데 여기서 type을 text로 정해줬습니다. 그러면 웹페이지 상에서는 이 태그 안에 입력을 하는 것입니다.
type 뒤에 name=“test”라고 지정 해두었는데요, 입력받는 폼에는 name을 무조건 지정해두어야 합니다. 왜냐하면 서버에서 이 name을 이용해서 정보를 전달 받기 때문입니다. (꼭 기억해주세요!!)
마지막으로 type이 submit 이라는 input이 나오는데요, submit이란 제출을 뜻합니다. submit은 ‘form안에서 작성한 내용들을 통째로 서버로 보내주겠다’라는 것을 해주는 것입니다.(submit을 안 누르면 정보가 이상하게 전송되겠죠?)
value라는 것은 버튼에 들어갈 텍스트를 지정해주는 것입니다. 별로 중요하는 않습니다. (value를 지정해주지 않으면 자동으로 ‘제출’이 들어가게 됩니다.)
이렇게 html 파일을 작성했고요, 이제는 서버 소스를 작성해야겠죠?
app.py 소스 코드를 이렇게 작성하도록 하겠습니다.
어떻게 돌아갈지 위에서부터 차근차근 보도록 할게요.
여기서 잠깐!
설명을 하면서 전에 설명했던 부분은 안 할 예정입니다. 설명 안하는 부분에 대해 궁금한 점이 있으시면 전 포스팅을 참고하시기 바랍니다!
from flask import render_template, request 를 통해 render_template과 request 모듈을 import 하게됩니다.
다음으로는 라우팅을 해야겠죠?
@app.route(‘/test’), @app.route(‘/post’) 를 통해 라우팅을 해줄게요.
그 다음으로 test 함수를 보도록 하겠습니다.
return render_template(‘post.html’) 이라는 문장이 있네요.
이 문장은 쉽습니다. render_template을 이용해서 templates 폴더 안에 있는 ‘post.html’을 불러와 리턴시키는 것이죠.
웹페이지에 들어가보면 이렇게 나옵니다.
저희가 만들었던 html이 나오는군요.
다음 문장을 보기 전에 실행부터 해보도록 하겠습니다.
텍스트 상자에 ‘medium reddit!!’이라는 문구를 쓰고 ‘정보 넘기기’ 버튼을 눌러보도록 하겠습니다.
저희가 텍스트 상자에 입력했던 문구 그대로 나왔네요.
그러면 왜 이런 결과가 나오게 되었는지 소스 코드를 해석해볼까요?
@app.route(‘/post’, methods=[‘POST’]) 부분을 먼저 보도록 할게요.
위에 ‘test’ url을 라우팅했을 때와 달리 methods=[‘POST’]라는 것이 있네요.
앞의 설명을 잘 이해하신 분들은 이게 무엇을 뜻하는지 대충 감이 오실거예요.
메소드를 ‘POST’ 형식으로 선언해주는 문구입니다.
이 문구를 적어주지 않는다면 플라스크에서 메소드 형식을 알지 못해서 아무리 Client에서 form으로 정보를 보내도 서버 쪽에서 받지 못합니다.
이제 post함수 안쪽을 볼까요?
value = request.form[‘test’]에 대해서 먼저 알아보도록 하겠습니다.
html 파일 안에서 form통해서 정보를 보냈었죠? 그 form의 정보를 받아오는 구문입니다. [‘test’]는 input의 name을 받아오는건데 전에 name을 test로 지정해두었기 때문에 request.form[‘test’]로 정보를 받아오면 됩니다.
그렇게 결론적으로 value라는 변수에 input받은 정보가 담겨지게 됩니다.
그리고 value를 리턴하였기 때문에 웹페이지 상에는 입력한 내용이 그대로 출력되게 됩니다.
오늘은 request 패키지를 이용해서 웹페이지 상에서 정보를 입력하는 예제를 다뤄봤고요, 다음 포스팅에는 이 소스코드를 더 간략하게 정리하는 것으로 찾아오겠습니다.
- Flask로 GET, POST 요청 보내기 (1)
- Flask로 GET, POST 요청 보내기 (2) — HTML파일 리턴