20.11.14 (MyPick-31) TIL

(문제①) 자바스크립트를 실행했는데, console.log() 했던 코드들이 순서대로 나오는 것이 아니라, 뒤죽박죽 섞여서 출력된다. 특히, ajax 송신 부분에서 문제점이 발생해서 선언한 변수 data 를 선언하지 않았다는 오류가 발생.

비동기 송신이기 때문에, 모든 <script></script> 코드가 다 실행된 이후에, ajax 송신을 하기 시작한다.

zorba91.tistory.com/23

ajax를 동기식처리 하는 방법(코드의 순서 또는 절차적으로 동작하게 만들기)

그렇기 때문에 ajax를 동기식으로 처리하기 위해서

$.ajax({
        type: "POST",
        url: "<c:url value='/practice/getHolidayFlag.do'/>",
        dataType: 'json',
        async: false,
        data: params,
        success: function(result){
            if(result != null){
            // do something
            
            }else{
                checkFlag = false;
            }
        }
 

async : false 와 같은 코드를 추가해야 ajax를 동기식으로 사용할 수 있다.

 

★ 동기와 비동기의 차이 ★

빨래와 설거지와 청소를 순서대로 해야한다고 가정해보고 '동기적'으로 일처리를 하는 것과 '비동기'적으로 일처리를 하는 것을 알아보자.

여기에서 '동기적'으로 일을 처리하는 것은, 빨래를 하고, 다하면 설거지를 하고, 설거지를 다하면 청소를 하는 것이 동기적인 일처리 과정이다.

만약 여기에서, '비동기적'으로 일을 처리하는 것은, 빨래를 담당하는 업체에 빨래를 해달라고 말해놓고, 설거지를 담당하는 업체에 설거지를 해달라고 말해놓고, 청소를 담당하는 업체에 청소를 해달라고 말해놓는 것을 말한다.

 

(문제②) ajax 를 통해서 데이터를 보내려고 한다. 근데, 보내려는 데이터가 Array(배열) 타입이라서, 보내는 방식에서 문제가 발생했다.

 

yangyag.tistory.com/141

ajax로 data 전송시 배열(Array) 형태의 값 넘기기

ajax를 보내기 전에,  jQuery.ajaxSettings.traditional = true; 을 통해서 설정을 바꿔주고,

jQuery.ajaxSettings.traditional = true; // ajax로 배열 보낼때..

            $.ajax({
                type: "POST",
                url: "/bring_signature_ice_cream",
                data: {ice_cream: [JSON.stringify({bring_ice_cream: bring_ice_cream})]},
                success: function (response) {
                    // 필터링한 아이스크림을 리스팅할 때
                    if (response['result'] == 'success_2') {
                        datas = response['data']
                        console.log('여기들어가자~')
                        for (let i = 0; i < datas.length; i++) {
                            signature_listing_card(i, datas[i]['id'], datas[i]['name'], datas[i]['name_eng'], datas[i]['base'], datas[i]['topping'], datas[i]['syrup'])
                        }
                    }
                    // 모든 아이스크림 리스팅할 때
                    else if (response['result'] == 'success_1') {
                        datas = response['data']
                        console.log('여기말고~')
                        for (let i = 0; i < datas.length; i++) {
                            signature_listing_card(i, datas[i]['id'], datas[i]['name'], datas[i]['name_eng'], datas[i]['base'], datas[i]['topping'], datas[i]['syrup'])
                        }
                    }
                }
            })
        }

data를 보내기 위해서는 json 형태로 보내야하기 때문에,  Json.stringify 를 이용해서 데이터를 보낸다.

steemit.com/kr-dev/@cheonmr/json-stringify

JSON.stringify( )란 무엇인가? — Steemit

이를 python 에서 받을 때는,

@app.route('/bring_signature_ice_cream', methods=['POST'])
def bring_signature_ice_cream():
    receive_ice_cream = json.loads(request.form['ice_cream'])
    ice_cream = list(receive_ice_cream.values())
    final_ice_cream = ice_cream[0]
    ...

json.loads 를 활용해서 받아야한다.

 

또한, 받은 receive_ice_cream 딕셔너리 배열 형태에서 value 값을 뽑아야하기 때문에

list(receive_ice_cream.values()) 를 사용한다.

 

zetawiki.com/wiki/%ED%8C%8C%EC%9D%B4%EC%8D%AC_%EB%94%95%EC%85%94%EB%84%88%EB%A6%AC_%EA%B0%92_%EC%B6%94%EC%B6%9C%ED%95%98%EC%97%AC_%EB%A6%AC%EC%8A%A4%ED%8A%B8%EB%A1%9C_%EB%A7%8C%EB%93%A4%EA%B8%B0

파이썬 딕셔너리 값 추출하여 리스트로 만들기 - 제타위키

 

(문제③) list 의 중복된 값들이 들어가서 정확한 데이터를 가지고 올 수 없게 되었다.

bluese05.tistory.com/13

python list 값 중복 제거하기

list 를 set으로 바꾸고, 다시 list 화 시키면 중복된 값들이 제거된다.

pure_signature_final_flavor = list(set(signature_final_flavor))

set 을 이용해서 중복을 제거하는 방법이다.