GET/POST

혼자 공부하며 블로그 비공개로 끄적거리다 네이버는 정말 나만의 작은 일기장으로 남겨두고 싶어서 코딩은 여기로 가지고왔다.

이미 사전 과제는 4주차까지 완강한 상태라 5주차부터 정리하고 다시 2회독 하면서 한 번 더 정리할 예정..

그래도 완전 새롭진 않겠지? 희희,,

GET/POST 요청 타입

• GET → 통상적으로! 데이터 조회(Read)를 요청할 때
  예) 영화 목록 조회
  → 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
  → 예: google.com?q=북극곰

• POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
  예) 회원가입, 회원탈퇴, 비밀번호 수정
  → 데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달

📌API 만들고 사용하기
1. 클라이언트와 서버 연결 확인
2. 서버부터 만들기
3. 클라이언트 만들기
4. 완성 확인하기

🚨 잠깐! 여기서 고칠점 > 제발..서버부터 만들고 클라이언트로 하나를 만들어놓고 이동하자..! 하다보면 자꾸 확인하고싶은 마음에 파일을 옮겨다니다보며 헷갈려서 순서가 엉망진창이 되는 것 같다.

POST 요청

🍋 app.py
def save_order():
    name_receive = request.form['name_give']
    cnt_receive = request.form['cnt_give']
    addrs_receive = request.form['addrs_give']
    phone_receive = request.form['phone_give']

    doc = {
        'name':name_receive,
        'cnt':cnt_receive,
        'addrs':addrs_receive,
        'phone':phone_receive
    }
    db.order.insert_one(doc)


    return jsonify({'msg': '주문이 완료되었습니다!'})

🍋 index.html
function order() {
            let name = $('#ordername1').val()
            let cnt = $('#ordercnt').val()
            let addrs = $('#orderaddrs').val()
            let phone = $('#orderphone').val()

            $.ajax({
                type: "POST",
                url: "/order",
                data: {name_give: name, cnt_give: cnt, addrs_give: addrs, phone_give: phone},
                success: function (response) { // 성공하면
                    alert(response["msg"]);
                    window.location.reload();
                }
            })
        }

근데 헷갈렸던 점!

위 코드에서는 db에 저장 전으로 해당 코드를 입력했다.
그럼, 크롤링 등으로 이미 db를 생성한 상태이며 특정 값을 이용한 기능을 구현해야할 땐? 어떻게 입력해야할까?

🍋 app.py
def like_star():
    name_receive = request.form['name_give']

    target_star = db.mystar.find_one({'name': name_receive})
    current_like=target_star['like']

    new_like=current_like + 1

    db.mystar.update_one({'name': name_receive}, {'$set': {'like': new_like}})


    return jsonify({'msg': '좋아요 완료!'})

🍋 index.html
function likeStar(name) {
            $.ajax({
                type: 'POST',
                url: '/api/like',
                data: {name_give:name},
                success: function (response) {
                    alert(response['msg']);
                    window.location.reload()
                }
            });
        }

GET 요청

🍋 app.py
def view_orders():
    orders = list(db.order.find({}, {'_id': False}))
    return jsonify({'all_orders': orders})

🍋 index.html
function orderlist() {
      $.ajax({
         type: "GET",
         url: "/order",
         data: {},
         success: function (response) {
            let order=response['all_orders']
            for(let i=0;i<order.length;i++){
               let name=order[i]['name']
               let cnt=order[i]['cnt']
               let addrs=order[i]['addrs']
               let phone=order[i]['phone']

            let temp_html=`
                 <tr>
                     <th scope="row">${name}</th>
                         <td>${cnt}</td>
                         <td>${addrs}</td>
                          <td>${phone}</td>
                 </tr>`
       $('#list').append(temp_html)
                    }
                }
            })

        }

➕ list 정렬(sort)

#sort("name", 1) #내림차순
#sort("name", -1) #오름차순
db.mystar.find({}, {'_id': False}).sort('like',-1)

🥲 아쉬운 점
: 하나의 과제를 반복해서 여러번 따라해보고 스스로하다보니 내가 코드를 파해쳐서 이 기능을 이해해서 사용하는 것이 아닌 어느새 순서를 외워 그냥 생각없이 따라하고 있다는 느낌이 들었다.
그래서 응용 과제가 나와서 순서가 바뀌었을 때는 당황했다.
내가 하던 순서는 이게 아니었으니까. 완전 순서 자체를 잘못 잡고있었다.

지금 내가 입력하는 이 코드가 어떤 기능을 구현하는지부터 이해하고 그럼 어떤 값이 필요하고 어떤 코드를 이어서 써야하는지 먼저 생각을 하고 코드를 쓰자.
깊은 생각이 아닌 대략적인 흐름이나 틀이라도 먼저 생각해보자.
생각을 좀 하자.