기본적인 Flask를 다뤄보기

2주차 게시물 중 서버 - 클라이언트 통신 이해하기에서 GET, POST 얘기를 잠깐 꺼낸적이 있었는데요

 

혹시 기억이 안나시거나, 처음 들어보시는 분은 밑에 링크를 통해 한번 확인해 주시면 감사하겠습니다.

 

https://iceflower.tistory.com/10

서버-클라이언트 통신 이해하기

 

이번 내용에서는 GET, POST를 Flask를 이용해서 다뤄보려고 합니다. 다시 한번 설명을 드리자면

 

GET은 데이터를 조회(Read)를 요청할때 사용하고 POST는 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 사용됩니다. 코드 형태를 보면서 설명하겠습니다.

 

( jQuery를 이용해야하기 때문에 이전에 사용한 jQuery 코드가 필요합니다. 코드는 밑에 복사하셔서 <title>과 </head>사이에 두시면 됩니다. )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

먼저 GET요청하는 코드를 보겠습니다.

 

GET 요청 Ajax 코드

GET 요청 API 코드

먼저 Ajax 코드를 보시면 현재 hey라는 함수는 임시로 만든 버튼에 들어가있는데 이 버튼을 누르면 url에 있는 title_give라는 이름인 봄날은 간다를 가져가고, 그 가져온 봄날은 간다 즉, title_give를 API 코드로 넘어오면서 title_receive에 넣고 그걸 찍어줍니다. 성공적이면 jsonify라고 적힌 부분을 다시 Ajax 코드로 넘겨줘서 success 부분에서 받아 콘솔에 찍게 됩니다. 순서만 다시 간단히 보자면

 

Ajax 코드 넘길꺼 넘겨주기 -> API 코드 받아서 찍어주기 -> 잘 찍혔으면 jsonify 내용물을 넘겨주기 -> success에서 찍기

 

그럼 이번에는 POST 요청 코드를 보겠습니다.

POST 요청 Ajax 코드

POST 요청 API 코드

똑같이 확인을 해보자면 버튼을 눌렀을때 hey함수가 작동되고 /test 창구에 POST요청을 하게됩니다. 그럼 API 코드로 넘어가서 /test이면서 POST인 곳을 찾게됩니다. 그럼 title_give라는걸 가져왔는지 체크를 합니다. Ajax 코드를 보면 data에 가져온 것을 확인할 수 있죠. 그럼 나 가져왔어하고 그걸 API의 title_receive에 넣고 찍습니다. 그리고 요청 잘 받았다는 의미로 jsonify 값을 보내주고 Ajax 코드에서 그걸 success 부분에 찍게 됩니다. 순서만 다시 보자면

 

Ajax코드 POST 요청 -> API가 원하는 값 확인 -> 확인 후 대입, 출력 -> 요청 잘 받았다고 jonsify넘김 -> success 찍기 

 

현재 GET, POST 둘다 같은 출력을 나타내고 있어서 헷갈리실 수 있습니다.

 

그래서 다음 게시물에서 내용물을 가지고 다시한번 천천히 설명하겠습니다.

 

전체 코드 입니다.

 

GET, POST Ajax 코드

GET, POST 코드

패키지를 설치하고나서는 무조건 import 해줘야한다는거 잊지마세요 위에 저 import 안하면 코드 안돌아갑니다.