JS. 데이터를 뿌려보자

데이터 타입

아래와 같은 데이터가 있다고 생각해보자.

    const cssProperty = [
        {view: "10", name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
        {view: "20", name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
        {view: "30", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
        {view: "40", name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
        {view: "50", name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
        {view: "11", name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
        {view: "13", name: "animation-iteration-count", desc: "animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다."},
        {view: "15", name: "animation-name", desc: "animation-name 속성은 애니메이션 키프레임 이름을 설정합니다."},
        {view: "17", name: "animation-play-state", desc: "animation-play-state 속성은 애니메이션의 진행상태를 설정합니다."},
        {view: "21", name: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다."},
        {view: "49", name: "backface-visibility", desc: "backface-visibility 속성은 요소 뒷면을 보여줄지 설정합니다."},
        {view: "22", name: "caption-side", desc: "caption-side 속성은 테이블 캡션의 위치를 설정합니다."},
        {view: "31", name: "direction", desc: "direction 속성은 문장의 방향을 설정합니다."},
        {view: "41", name: "empty-cells", desc: "empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다."},
        {view: "41", name: "filter", desc: "filter 속성은 그래픽 효과를 설정합니다."},
        {view: "19", name: "flex", desc: "flex 속성은 콘텐츠의 성질을 flex로 정의합니다."},
        {view: "10", name: "grid-template-column", desc: "grid-template-column 속성은 가로 컬럼의 크기와 위치를 설정합니다."}
    ];

 

함수로 데이터를 불러보자

1. 함수명은 updateList이다

    function updateList(){}

 

2. list를 일단 빈 것으로 선언한다(나중에 채울 것이다)

    function updateList(){
        let list = "";
    }

 

3. for문으로 데이터를 불러오자, 이 때 중요한 것은 += 으로 데이터를 추가하는 것이다

(정규식으로 썼다)

    function updateList(){
        let list = "";

        for(let data of cssProperty){
            list += `<li>${data.name}: ${data.desc} <span>${data.view}</span></li>`
        }
    }

 

4. cssList에 list를 추가해준다

const cssList = document.querySelector(".list ul");

    function updateList(){
        let list = "";

        for(let data of cssProperty){
            list += `<li>${data.name}: ${data.desc} <span>${data.view}</span></li>`
        }

        cssList.innerHTML = list;
    }

 

5. 함수를 실행시켜준다

    function updateList(){
        let list = "";

        for(let data of cssProperty){
            list += `<li>${data.name}: ${data.desc} <span>${data.view}</span></li>`
        }

        cssList.innerHTML = list;
    }
    updateList()