EFFECT | SEARCH | sort( ), reverse( )를 이용하여 정렬하기

searchEffect | sort(), reverse()를 이용하여 정렬하기

오늘의 목표
💡 여러 정렬 구현하기(오름차순, 내림차순, 알파벳순, ...)
💡 랜덤 정렬하기 💡 카테고리별 정렬하기

---

1. 사이트 구조 살펴보기

HTML 살펴보기

속성 목록은 자바스크립트로 표현해주기 위해 비워두었습니다.

<main id="main">
    <div class="search__wrap">
        <span>sort(), reverse()를 이용하여 정렬하기</span>
        <h1>CSS 속성 정렬하기</h1>

        <div class="search__click">
            <ul>
                <li><a href="#" class="btn1">반대로 정렬하기</a></li>
                <li><a href="#" class="btn2">오름차순 정렬하기</a></li>
                <li><a href="#" class="btn3">내림차순 정렬하기</a></li>
                <li><a href="#" class="btn4">알파벳순(a~z)</a></li>
                <li><a href="#" class="btn5">알파벳순(z~a)</a></li>
                <li><a href="#" class="btn6">랜덤 정렬하기</a></li>
                <li><a href="#" class="btn7">카테고리별 정렬하기</a></li>
            </ul>
            <ul class="btnCate">
                <li data-cate="animation"><a href="#">animation</a></li>
                <li data-cate="background"><a href="#">background</a></li>
                <li data-cate="border"><a href="#">border</a></li>
                <li data-cate="column"><a href="#">column</a></li>
                <li data-cate="flex"><a href="#">flex</a></li>
                <li data-cate="font"><a href="#">font</a></li>
                <li data-cate="grid"><a href="#">grid</a></li>
                <li data-cate="inset"><a href="#">inset</a></li>
                <li data-cate="line"><a href="#">line</a></li>
                <li data-cate="list"><a href="#">list</a></li>
                <li data-cate="margin"><a href="#">margin</a></li>
                <li data-cate="mask"><a href="#">mask</a></li>
                <li data-cate="max"><a href="#">max</a></li>
                <li data-cate="min"><a href="#">min</a></li>
                <li data-cate="offset"><a href="#">offset</a></li>
                <li data-cate="outline"><a href="#">outline</a></li>
                <li data-cate="overflow"><a href="#">overflow</a></li>
                <li data-cate="overscroll"><a href="#">overscroll</a></li>
                <li data-cate="padding"><a href="#">padding</a></li>
                <li data-cate="scroll"><a href="#">scroll</a></li>
                <li data-cate="text"><a href="#">text</a></li>
                <li data-cate="transform"><a href="#">transform</a></li>
                <li data-cate="transition"><a href="#">transition</a></li>
                <li data-cate="etc"><a href="#">etc</a></li>
            </ul>
        </div>
        
        <div class="search__info">
            <div>
                CSS 속성 갯수 : <span class="num">382</span>
            </div>
        </div>

        <div class="search__list">
            <ul class="line"></ul>
        </div>
    </div>
</main>

2. script 살펴보기

📌 sort( ) 활용하여 정렬하기

sort( )를 이용하여 속성을 내림차순/오름차순/알파벳순/카테고리별로 정렬해주었습니다. 자세한 코드는 아래를 확인해주세요 !

📌 random( ) 활용하여 정렬하기

random( )을 이용하여 중복없이 무작위로 숫자가 나오도록 설정하여 index값에 대입해 랜덤 정렬을 설정해주었습니다.

<script>
    const cssProperty = [...]
    const cssList = document.querySelector(".search__list .line");
    const cssCategory = document.querySelectorAll(".btnCate li a");
    
    // 데이터 출력하기
    const updateList = () => {
        let listCSS = "";
        
        cssProperty.forEach((data, index) => {
            listCSS += `
${data.num}. ${data.name} : ${data.desc} ${data.category}
`;
        });
        
        cssList.innerHTML = listCSS;
        // console.log(listCSS)

    }
    updateList();

    // 반대로 정렬
    function sortReverse(){
        cssProperty.reverse();
        updateList();
    }

    // 내림차순 정렬
    function sortDescending(){
        cssProperty.sort((a,b) => {
            return b.num - a.num;
        })
        updateList();
    }

    // 오름차순 정렬
    function sortAscending(){
        cssProperty.sort((a,b) => {
            return a.num - b.num;
        })
        updateList();
    }

    // a~z (미션)
    function sortAlphabet(){
        cssProperty.sort((a, b) => {
            let x = a.name;
            let y = b.name;
            return x.localeCompare(y);
        });
        updateList();
    }

    // z~a (미션)
    function sortAlphabetZ(){
        cssProperty.sort((a, b) => {
            let x = a.name;
            let y = b.name;
            return y.localeCompare(x);
        });
        updateList();
    }

    // 랜덤 정렬
    function shuffle(){
        for( let i = cssProperty.length-1; i >= 0; i--){
            const randomIndex = Math.floor(Math.random() * (i + 1));
            // console.log(randomIndex);
            // 중복없이 무작위로 숫자 나오게 설정
            [cssProperty[i], cssProperty[randomIndex]] = [cssProperty[randomIndex], cssProperty[i]];
            cssProperty.innerHTML += cssProperty[i];
        }
        updateList();
    }

    // 카테고리별 정렬
    function sortCate(){
        cssProperty.sort((a, b) => {
            let x = a.category;
            let y = b.name;
            console.log(y)
            return x.localeCompare(y);
        });
        updateList();
    }

    // 반대로 정렬 클릭
    document.querySelector(".btn1").addEventListener("click", ()=>{
        sortReverse();
    });

    // 내림차순 정렬 클릭
    document.querySelector(".btn3").addEventListener("click", ()=>{
        sortDescending();
    });

    // 오름차순 정렬 클릭
    document.querySelector(".btn2").addEventListener("click", ()=>{
        sortAscending();
    });

    // a~z 정렬 클릭
    document.querySelector(".btn4").addEventListener("click", (e) => {
        e.preventDefault();
        sortAlphabet();
    });

    // z~a 정렬 클릭
    document.querySelector(".btn5").addEventListener("click", (e) => {
        e.preventDefault();
        sortAlphabetZ();
    });

    // 랜덤 정렬 클릭
    // return Math.random() - cssProperty.length/2
    document.querySelector(".btn6").addEventListener("click", (e)=>{
        e.preventDefault();
        shuffle(cssProperty);
    });

    // 카테고리 정렬 클릭
    document.querySelector(".btn7").addEventListener("click", (e) => {
        e.preventDefault();
        sortCate();
    });

    // 카테고리 단어별
    function updateList2(list){
        listCSS = '';

        for(const data of list){

            switch(data.category){
                case "animation":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} animation
`;
                break;
                case "background":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} background
`;
                break;
                case "border":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} border
`;
                break;
                case "column":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} column
`;
                break;
                case "flex":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} flex
`;
                break;
                case "break":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} break
`;
                break;
                case "font":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} font
`;
                break;
                case "grid":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} grid
`;
                break;
                case "inset":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} inset
`;
                break;
                case "line":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} line
`;
                break;
                case "list":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} list
`;
                break;
                case "margin":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} margin
`;
                break;
                case "mask":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} mask
`;
                break;
                case "max":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} max
`;
                break;
                case "min":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} min
`;
                break;
                case "offset":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} offset
`;
                break;
                case "outline":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} outline
`;
                break;
                case "overflow":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} overflow
`;
                break;
                case "overscroll":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} overscroll
`;
                break;
                case "padding":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} padding
`;
                break;
                case "scroll":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} scroll
`;
                break;
                case "text":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} text
`;
                break;
                case "transform":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} transform
`;
                break;
                case "transition":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} transition
`;
                break;
                case "etc":
                    listCSS += `
${data.num}. ${data.name} : ${data.desc} etc
`;
                break;
                default:
                    listCSS += `
해당하는 카테고리가 없습니다.
`;
                break;
            }
        }

        cssList.innerHTML = listCSS;
        
    }
    updateList2(cssProperty);

    // 카테고리 버튼 클릭
    cssCategory.forEach(cate => {
        cate.addEventListener("click", (e) => {
            e.preventDefault();
            const targetCate = cate.dataset.cate;
            const filterList = cssProperty.filter(data => data.category == targetCate);
            updateList2(filterList);
        });
    });
</script>

원본 소스 보기

실제 사이트 보기