[스파르타코딩클럽 4주차]웹개발 종합반 Week I Learned

날짜 : 2023년 1월 25일 수요일

📌 PLAN (~2/5)

• 웹개발 종합반 강의 2회독 완료 → Velog 기술 블로그 정리까지 (4주차/총 5주차) (~1월/25일)
• GIT & GITHUB 이해 및 사용법 숙달(2회 완료/총 5회)
• 코딩테스트 맛보기 (Aft)
• 토이프로젝트 맛보기 (Aft)

📌 WHAT TODAY?

Flask를 이용한 서버에 배포 & 미니프로젝트 공부 회고시작(2주차)
Front-DAY 4 : Flask를 이용한 서버 연결및 조작법, GET/POST 프로젝트 적용법 숙달
강좌 : https://spartacodingclub.kr/online/web 웹개발 종합반_스파르타코딩클럽

1. Flask?

• 간단한 웹 사이트, 혹은 간단한 API 서버를 구동하는 데에 특화 되어있는 Python Web Framework. → 통상적으로 flask 서버를 돌리는 파일은 app.py라고 함.

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 파일

• render_template()함수의 첫 번째 아규먼트로 렌더링 할 html파일에 전달할 변수를 넘겨준다.

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

## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.

@app.route('/')
def home():
   return render_template('index.html') <- html 파일을 불러준다.

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

2. 서버에서 데이터를 요청하고 받아오는 과정

GET 요청확인 Ajax (index.html)

 function hey(){ 
 //onclick으로 Hey함수를 부른다.
	$.ajax({
      type: "GET",
  //GET요청방식으로 데이터를 조회할께.
      url: "/test?title_give=봄날은간다",
  //test라는 창구에 가서, title_give(주민번호)라는 이름으로, 봄날은 간다(123456-..)라는 데이터를 갖고 갈께
      data: {},
      success: function(response){ //잘된다면, 너가 주는 데이터를 콘솔에 찍어볼께
         console.log(response)
      }
    })
 }  

GET 요청 API (app.py)

@app.route('/test', methods=['GET'])
#test라는 창구에 GET이라는 메서드 이용할께
def test_get():
   title_receive = request.args.get('title_give')
#title_give라는 이름으로 뭔가를 받아와서, 그걸 title_receive라는 변수에 집어넣어줬어.
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})
#그래서 나는 이런 값을 다시 return해줄꺼야

3. 미니프로젝트로 더 이해해보기 (1) POST 요청 방식

@app.route("/mars", methods=["POST"])
def mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']
#창구이름이 /mars 라는 곳에서 약속한대로 name_give...라는 데이터들을 받아다가
    doc = {
        'name': name_receive,
        'address': address_receive,
        'size': size_receive
    }
#DB에 저장할 양식을 맞춰준다음
    db.orders.insert_one(doc)
#DB에 저장
    return jsonify({'msg': '주문 완료!'})

function save_order() {
  	let name = $('#name').val()
    let address = $('#address').val()
    let size = $('#size').val()
//Jquery로 각 값의 데이터를 가져와서 변수에 저장한다.
    
    $.ajax({
        type: 'POST',
        url: '/mars',
        data: { name_give:name, address_give:address, size_give:size},
//데이터를 실어보낸다. 각 값의 양식에 약속한대로 맞춰서
        success: function (response) {
            alert(response['msg'])
//index에서 보낸 return값만 받아서 보여주고,
          	window.location.reload()
//새로고침한다.
        }
    });
}

<button onclick="save_order()" type="button" class="btn btn-warning mybtn">주문하기</button>
//주문하기라는 버튼을 누르면서 function_save_order()이 시작됨

4. 미니프로젝트로 더 이해해보기 (2) GET 요청 방식

@app.route("/mars", methods=["GET"])
def mars_get():
    orders_list = list(db.orders.find({},{'_id':False}))
#DB에서 여러 데이터를 찾아 긁어오는 명령어/
    return jsonify({'orders':orders_list})
#orders라는 key로 orders_list를 받아가기로 함.

$(document).ready(function () {
    show_order();
});
function show_order() {
    $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (response) {
            let rows = response['orders']
//orders를 rows로 받아와서
            for (let i =0; i < rows.length; i++){
//한줄씩 반복문으로 돌려
              let name = rows[i]['name']
              let address = rows[i]['address']
              let size = rows[i]['size']
//각 요소별로 값을 각각 받아와 저장
              
              let temp_html = `<tr>
									<td>${name}</td>
									<td>${address}</td>
									<td>${}</td>
								</tr>`
//형식에 맞게 각 값을 해당하는 란에 넣는다
              $('#order-box').append(temp_html)
//형식에 맞게 붙여준다.
        }
    });
}