스파르타코딩 왕초보 시작반 4주차 내용(4-1 ~ 4-16) with javascript

HTTP request를 javascript의 fetch로 해결!

이전 글과 같은 내용을 하였으나, jquery의 ajax 기능 대신 javascript의 fetch기능을 사용해 보았고 어떤 부분이 어떤 역할을 하는지 바뀐 부분만 비교해 보고자 한다.

fetch('/order', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    name_give: name,
                    count_give: count,
                    address_give: address,
                    phone_give: phone
                })
            })//여기서 백엔드로 정보 전달
                .then(response => response.json())//성공하면
                .then(data => {
                    alert(data['msg']);
                    window.location.reload();
                });
        }

	$.ajax({
                type: "POST",
                url: "/order",
                data: {name_give: name, 
                       count_give: count, 
                       address_give: address, 
                       phone_give: phone},//여기서 백엔드로 정보전달
                success: function (response) { // 성공하면
                    alert(response["msg"]);
                    window.location.reload();

                }

데이터를 json 형태로 백엔드로 전달하면, then 과 success에서 결과를 받아 진행한다. 여기에서 전달받은 값(response)을 fetch에서는 json으로 한번 바꿔주는 과정을 거쳐야 하지만, jquery는 자동으로 해주는 것 같다.

fetch에서 JSON.stringify()는 오브젝트를 JSON화 시켜주는 메소드이다. jquery에서는 자동으로 해주는 것 같다. JSON은 통신 규격이기 때문에 바꿔준 것으로 보이며, JSON과 object의 차이는 앞의 key 값이 JSON에서는 따옴표 처리가 된다는 것이다.

    name_receive = request.json['name_give']
    count_receive = request.json['count_give']
    address_receive = request.json['address_give']
    phone_receive = request.json['phone_give']

그리고 백엔드에서 POST한 정보를 읽어오는 과정에도 오류가 있었다. jquery는 request.form으로 읽어와도 문제가 없었지만, fetch로 읽을 땐 keyError가 나서 왜 그런지 찾아봤더니, request를 사용할 땐 정보가 json 형태로 주고 받기 때문에 request.json으로 찾아야 찾아진다는 것을 알 수 있었다.

느낀 점: javascript로만 풀면 '알아서 해줄게' 하는 부분이 적어지는 것은 맞는 것 같다. 그러나 해결하면서 원리를 더 잘 이해하게 된 것 같아 오히려 좋아

짤 출처: https://www.youtube.com/watch?v=MMSvdoXqiMs