1. 학습한 내용

• 개발자 코드에 함수가 나와있는 부분이 있어서 멘토님에게 처음 코딩을 할 때 너무 막막할 때 클론코딩을 하면서 도움을 받는 부분도 도움이 된다는 이야기를 들었다
• 함수를 개별적으로 만들려고 하다보니 너무 어려웠던 부분이 있었는데 확실히 가이드라인이 있으니 코드 자체를 이해하는데 도움도 되고 응용할 수 있는 부분도 있는 것 같다

// 1217px 아이콘 8개
if (window.matchMedia("screen and (max-width: 1217px)").matches) {
    $(function () {
        $(".cu-list").hide();
        var array = [];
        var list = document.getElementsByClassName('cu-list');

        for (var i = 0; i < list.length; i++) {
            array.push(list[i]);
        }
        var visiArray = [];
        visiArray = array.slice(0, 8);
        visiArray = visiArray.concat(array.slice(8, 16).reverse());
        visiArray = visiArray.concat(array.slice(16, 24));

        var second = 0;
        for (var i = 0; i < visiArray.length; i++) {
            second = second + 0.1;
            visiArray[i].setAttribute('data-wow-delay', second + 's')
            visiArray[i].style.display = 'block';
        }

        var load = document.getElementsByClassName('h-btn')[0];
        //숨겨진 아이콘
        load.addEventListener('click', function (e) {
            e.preventDefault();
            var hiddenArray = [];
            hiddenArray = array.slice(24, 27);

        var hSecond = 0;
        for (var i = 0; i < hiddenArray.length; i++) {
            hSecond = hSecond + 0.1;
            hiddenArray[i].setAttribute('data-wow-delay', hSecond + 's');
            hiddenArray[i].style.display = 'block';
        }
        load.style.display="none";
    
        window.scrollTo(0, window.pageYOffset + 1);
        window.scrollTo(0, window.pageYOffset - 1);
        });
    });
}


// 940px 아이콘 4개
if (window.matchMedia("screen and (max-width: 940px)").matches) {
    $(function () {
        $(".cu-list").hide(); // class=columns를 숨겨라
        var list = document.getElementsByClassName('cu-list'); // list에 class=columns 배열화
        var hiddenArray = []; // hiddenArray 빈 배열 생성
        var openArray = []; // openArray 빈 배열 생성
        $(".cu-list").slice(0, 12).show(); // class=columns에서 0에서 11번째(12번째 미포함)까지(총 12개)
        // slice (시작, 끝) 끝은 미포함, 에 대한 복사본을 새로운 배열 객체로 반환
        for (var i = 0; i < list.length; i++) { //  for 반복문을 통해 각 배열에 적용
            if (list[i].style.display == "none") { // list에 배열화 시킨 요소들이 hide되어있을때
                hiddenArray.push(list[i]); // 히든배열에 넣고(1~12를 제외한 나머지)
                // push => 마지막에 새로운 요소를 추가하고 변경된 배열의 길이를 반환
            } else {
                openArray.push(list[i]); // 아니면 오픈배열에 넣어라(1~12까지)
            }
        }
        // 보여진 아이콘
        var second = 0 // var second는 뭘 의미하는 걸까?
        for (var i = 0; i < openArray.length; i++) {
            second = second + 0.1 // a값이 0일때 for x~y까지 값을 넣으면 a=a+0.1이다
            openArray[i].setAttribute('data-wow-delay', second + 's'); // ??s는 초를 의미? 딜레이를 주기위한 second?
        }    // setAttribute('속성 이름', '속성값') => 엘레멘트에 속성 추가
        //숨겨진 아이콘
        var hSecond = 0;
        $(".h-btn").click(function (e) {
            e.preventDefault();
            for (var i = 0; i < hiddenArray.length; i++) {
                hSecond = hSecond + 0.1;
                hiddenArray[i].setAttribute('data-wow-delay', hSecond + 's');
                hiddenArray[i].style.display = 'block';
                if ($(".cu-list:hidden").length == 0) {
                    $(".h-btn").hide(); // 
                }
            };
        });
        window.scrollTo(0, window.pageYOffset + 1);
        window.scrollTo(0, window.pageYOffset - 1);
    })
}

function preventClick(e){
    e.preventDefault()
}

• 아이콘 부분 함수 코드를 클론코딩하면서 해석해 볼 수 있었다
• 코드가 2가지 방식으로 구성되는걸 알 수 있었는데
• 조금 바꿔서 사용할 수 있었다
• 원래는 아이콘 4개가 나타나는 방식으로 코드를 구성해서 만드는게 코드적으로 구성이 좋을 것 같은 느낌이라서 아이콘 8개가 나타나는 부분을 같은 방식으로 만들어 봤었다

// 아이콘 8개
if(matchMedia("screen and (max-width: 1217px)").match) { // 미디어쿼리 1217px일때 
    $(function () { // jQuery = $
        $(".columns").hide(); // class=colimns 를 숨겨라
        var list = document.getElementsByClassName('columns'); // list라는 배열 = class cilumns를 가져온다
        var hiddenArray = []; // 빈 배열 hidenArray
        var openArray = []; // 빈 배열 openArray
        $(".columns").slice(0,25).show(); // 0~24까지의 배열을 show 해주는 함수
        for (var i = 0; i < list.length; i++) { // for 반복문을 통해 각 배열에 적용
            if (list[i].style.display == "none") { // 만약 list에 들어간 배열이 none일때
                hiddenArray.push(list[i]); // hiddenArray에 집어넣어라 25~27
            } else {
                openArray.push(list[i]); // openArray에 집어넣어라 1~24
            }
        }

• 하지만 이렇게하면 'ㄹ'자 방향으로 딜레이 주는 방식을 적용할 수가 없는 것 같았다
• 그래서 아이콘 4개가 나타나는 부분도 'ㄹ'자 방향으로 딜레이를 주는 방식을 같이 적용해서 만들어 보았다

// 1217px 아이콘 8개
if (window.matchMedia("screen and (max-width: 1217px)").matches) {
    $(function () {
        $(".cu-list").hide();
        var array = [];
        var list = document.getElementsByClassName('cu-list');

        for (var i = 0; i < list.length; i++) {
            array.push(list[i]);
        }
        var visiArray = [];
        visiArray = array.slice(0, 8);
        visiArray = visiArray.concat(array.slice(8, 16).reverse());
        visiArray = visiArray.concat(array.slice(16, 24));

        var second = 0;
        for (var i = 0; i < visiArray.length; i++) {
            second = second + 0.1;
            visiArray[i].setAttribute('data-wow-delay', second + 's')
            visiArray[i].style.display = 'block';
        }

        var load = document.getElementsByClassName('h-btn')[0];
        //숨겨진 아이콘
        load.addEventListener('click', function (e) {
            e.preventDefault();
            var hiddenArray = [];
            hiddenArray = array.slice(24, 27);

        var hSecond = 0;
        for (var i = 0; i < hiddenArray.length; i++) {
            hSecond = hSecond + 0.1;
            hiddenArray[i].setAttribute('data-wow-delay', hSecond + 's');
            hiddenArray[i].style.display = 'block';
        }
        load.style.display="none";
    
        window.scrollTo(0, window.pageYOffset + 1);
        window.scrollTo(0, window.pageYOffset - 1);
        });
    });
}


// 940px 아이콘 4개
if (window.matchMedia("screen and (max-width: 940px)").matches) {
    $(function(){
        $(".cu-list").hide();
        var array = [];
        var list = document.getElementsByClassName('cu-list');
        for (var i=0; i<list.length; i++){
            array.push(list[i]);
        }
        var viziArray = [];
        viziArray = array.slice(0, 4);
        viziArray = viziArray.concat(array.slice(4, 8).reverse());
        viziArray = viziArray.concat(array.slice(8, 12));
        
        var third = 0;
        for(var i=0; i<viziArray.length; i++){
            third = third + 0.1;
            viziArray[i].setAttribute('data-wow-delay', third + 's')
            viziArray[i].style.display = 'block';
        }

        var load2 = document.getElementsByClassName('h-btn')[0];
        load2.addEventListener('click', function (e){
            e.preventDefault();
            var hiddenArray2 = [];
            hiddenArray2 = array.slice(12, 27);

            var hthird = 0;
            for(var i=0; i<hiddenArray2.length; i++){
                hthird = hthird + 0.1;
                hiddenArray2[i].setAttribute('data-wow-delay', hthird + 's')
                hiddenArray2[i].style.display = 'block';
            }
            load2.style.display = 'none';

            window.scrollTo(0, window.pageYOffset + 1);
            window.scrollTo(0, window.pageYOffset - 1);
        });
    });
}
function preventClick(e){
    e.preventDefault()
}

2. 학습한 내용 중 어려웠던 점

• x

3. 해결방법

• 처음 아무것도 없이 함수를 만들어야 할 때는 막막하기 그지 없었고 아직 기초도 부족해서 일주일은 거의 자료만 찾아보는 식이었다
• 그래도 자료만 찾아보다가 만들어진 함수를 확인하니 이해하는데 너무나도 도움이 된 것 같다
• 멘토님께서도 현업에서 일하다보면 일주일동안 코드 한줄도 못 만들고 막힐 때가 있다고 하셔서 뭔가 위로가 된 것 같다
• jQuery를 활용하고 함수 이벤트를 사용한 부분을 이해 할 수 있어서 좋았다
• 아무것도 없는 상태에서 똑같은 함수를 짜는 연습을 해보라고 멘토님께서 조언해주신 부분이 있어서 여러 가지 방식으로 응용도 해보고 만들어보면서 연습해야겠다

4. 학습소감

• 막막하고 깜깜했던 부분이 뚫리는 너무나도 시원하고 편해진 것 같다
• 아직은 혼자서 만들 수 없지만 이런 부분을 연습하다보면 나아갈 수 있을 것 같다는 확신이 들었다
• 아직 해봐야 초급 개발자에 불과하지만 내 실력을 의심하기보다 내가 노력한 부분에 어디가 부족했는지 어떻게 해야 나아갈 수 있는지를 생각하면서 쌓아나가야겠다 싶은 생각이 들었다