[스파르타]웹개발 종합반 - 4주차(#GET/POST 요청)

※ 실제 수강시 다른 곳에 작성했던 원고를 다시 포스팅한 것으로 포스팅 일자와 실제 개발일지 작성 일자는 다릅니다.

4주차 목표-!

1) Flask 프레임워크를 활용해서 API를 만들 수 있다.
2) '모두의책리뷰' API를 만들고 클라이언트에 연결한다.
3) '나홀로 메모장' API를 만들고 클라이언트와 연결한다.​

3주차에 이어 본격적인 백엔드의 세계로 진입한 4주차다.

​배운 점

파이썬의 Flask 프레임워크를 이용하여 로컬 개발 환경에서 서버를 구축하고 클라이언트와 통신하는 법을 배웠다.

- static 폴더(이미지, CSS, js), templates 폴더(HTML), app.py 파이썬 파일 : 통상적으로 폴더 셋팅

GET 요청 API 코드 / 요청 확인 Ajax 코드

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

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

POST 요청 API 코드 / 요청 확인 Ajax 코드

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

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

​

결과물

이름, 수량, 주소, 전화번호를 입력하고 주문하기를 누르면, "주문을 완료했습니다!"라는 alert이 뜨고

​

mongoDB에 데이터가 저장된 것을 Robo 3T로 확인할 수 있다.

​그리고 화면에는 서버에서 받아온 이름, 수량, 주소, 전화번호 데이터가 출력된다.

​마무리 멘트

서버쪽과 클라이언트쪽을 왔다갔다하며 요청 종류에 따라 처리하는 과정이 조금 헷갈리고, 아직까지는 손에 익지않아서 계속 강의자료를 확인하며 하게된다. 또 어떤게 POST 요청이고 어떤데 GET 요청인지도 아직 개념이 확 잡히지 않은 것 같아서 계속 연습을 해봐야 될 것 같다.

# Run.app하고 수정하면서 localhost:5000 리로딩시 오류가 뜨면 파이참의 터미널창에서 오류를 확인하자!