화면단과 서버단 sort (스파르타 클라우드 엔지니어 캠프 Day+3)

** 서버부하를 고려하면 서버단에서 처리하도록 코드를 작성하면 그만큼 서버가 열일 해야함.

** 서버단 보단 사용자 처리가 낫다 

 

 

데이터 sort를 화면단에서 할지 서버단에서 할지 고민하다 실시간 데이터 처리할게 아니니

화면단에서 처리하기로 하고 작업을 시작했다.

 

화면단에서 ajax로 json데이터를 받아와 저장해놓고

저장해 놓은 데이터를 금액으로 sort하려 했는데 json 데이터의 데이터 타입이 String으로 받아와져서

해당 데이터를 숫자 데이터로 형식으로 해야 했다

 

정규표현식으로 숫자만 골라내고 .replace를 사용하여 " , "를 제거하였더니 sort가 되었다 

하지만 뿌려진 데이터에 " , " 가 사라졌기에 원하는 데이터 형식이 아니게 되었고 

sort한 후에 다시 금액의 단위에 맞추어 " , "를 넣어줘야 하는 상황이 되었다

 

차라리 서버단에서 sort 하는게 편하겠다 생각하여 다시 코드 고치는중

 

화면단에서 sort해서 처리하는 더 좋은 방법이 있을텐데 서버단과 먼저 친해지기로 했다

slice? replace? 정규식?

 

코드 작성의 방법이 너무 다양해서 어떤식으로 짜는게 좋은지 아직은 모르지만 

계속 뜯어보다보면 점점 눈에 보일거라 믿는다

 

화면단 sort 처리 코드 
let list = null
        let regex = /[^0-9]/g;
        function getAllList() {
            $('.box').empty();
            $.ajax({
                type: "GET",
                url: "/allList",
                data: {},
                success: function (response) {
                    list = response['all_list']
                    console.log(list[0]['price'])
                    for (let i = 0; i < list.length; i++){
                        let title = list[i]['title']
                        let image = list[i]['image']
                        let price = list[i]['price']
                        // console.log(list[i]['price'])
                        list[i]['price'] = list[i]['price'].replace(regex,"")
                        // console.log(list[i]['price'])


                        let temp_html = `<p>${title}, ${price}</p>`
                        $('.box').append(temp_html)
                    }
                }
            })

 

 function getListByHightPirce() {
            $('.box').empty();
            // console.log(list[0])
            let getListByHightPirce = list.sort(function (a, b) {
                return b.price - a.price; // (내림차순)
            });
            console.log(getListByHightPirce);
            for (let i = 0; i < getListByHightPirce.length; i++) {
                let title = getListByHightPirce[i]['title']
                let image = getListByHightPirce[i]['image']
                let price = getListByHightPirce[i]['price']
                // let test = (Number)price

                let temp_html = `<p>${title}, ${price}</p>`
                $('.box').append(temp_html)
            }
        }
        
        
        **return a.price - b.price; (오름차순)

 

-- 22.04.21 추가

위의 생각으로 서버단으로 코드를 다 수정했다

-> " , "가 들어간 상태로 크롤링된 데이터를 db에 넣어놓은거라 서버단에서 sort를 진행해도 

화면단에서 처리해줄 때랑 같은 작업을 해줘야한다는걸 발견했다 

삽질했다..

 

-- 22.04.21 추가

for문을 이용할 생각을 하고 있었는데 다른 해결방법을 찾게되었다

 let price = getListByHightPirce[i]['price'].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
 정규식을 사용하여 한 줄 수정한걸로 완성되었다...!

 

 참고 블로그 
 : https://mizzo-dev.tistory.com/entry/JavaScript%EC%A0%95%EA%B7%9C%EC%8B%9D-%EC%88%AB%EC%9E%90%EC%97%90-1000%EB%8B%A8%EC%9C%84%EB%A1%9C-%EC%BD%A4%EB%A7%88%EC%89%BC%ED%91%9C-%EA%B5%AC%EB%B6%84%EC%9E%90-%EB%84%A3%EA%B8%B0