본문 바로가기
제니의 개발일지/개발일지

제니_항해99 스파르타코딩클럽 4주차 개발일지

by 제니운 2022. 6. 28.
728x90

이번 4주차 강의는 2회독을 하려고 하지 않아도, 코딩 오류로 계속해서 3~4회독을 강제로 했던 회차이다. 뭔가 많이 써본 내용들인데 직접 해보려면 왜 이렇게 어려운지 ㅠㅠ 숙제를 스스로 마무리 해야 하는데, 하다가 중간에 계속 해설 영상을 돌려볼 수 밖에 없었다. 빠르게 5회차를 끝내고 다시 회독해야 할 것 같은 느낌!!

 

영상을 보고 따라하는 것도 중요하지만, 어떻게 이해를 해야 하는지 모를 땐 순서를 익혀보려고 하는 것도 좋을 것 같다.

 

1. 클라이언트와 서버 연결 확인하기 

[서버 코드 - app.py]

@app.route("/mars", methods=["POST"])
def mars_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 연결 완료!'})

 

[클라이언트 코드 - index.html] 

function save_order() {
    $.ajax({
        type: 'POST',
        url: '/mars',
        data: { sample_give:'데이터전송' },
        success: function (response) {
            alert(response['msg'])
        }
    });
}

<button onclick="save_order()" type="button" class="btn btn-warning mybtn">주문하기</button>

 

2. 서버부터 만들기

@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']

    doc = {
        'name': name_receive,
        'address': address_receive,
        'size': size_receive
    }

    db.orders.insert_one(doc)

    return jsonify({'msg': '주문 완료!'})

 

3. 클라이언트 만들기

function save_order() {
    let name = $('#name').val()
    let address = $('#address').val()
    let size = $('#size').val()

    $.ajax({
        type: 'POST',
        url: '/mars',
        data: { name_give:name, address_give:address, size_give:size },
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    });
}

 

4. 완성 확인하기 - 몽고DB에 잘 들어가 있는지

 

잊지 말자 순서,,,!!

 

'클라이언트와 서버 연결하기' -> '서버부터 만들기' -> '클라이언트 만들기' -> '완성 확인하기'

 

아 그리고!!

 

들여쓰기!!!!!!! 1~3주차에서 크게 느끼지 못했던 문제점이 3주차 말, 4주차에서 완전하게 드러난다.

들여쓰기를 제대로 하지 않으면, 인식자체를 못 한다..!

CTRL + ALT + L 항상 먼저 하기!

그리고 certifi 다운 안하면 오류 나는 경우도 있다. 영상에 해당 내용은 없는데, 오류나면 다운하는 것 잊지말기

728x90