프론트 기본적인 화면구성잡는방식

 

1.HTML 마크업

2.style잡기(기본틀)

3.js

 

1. HTML 마크업

<link rel="stylesheet" href="index.css" />

<script src="index.js" ></script>

 

- 화면을 모듈화하여 분리하는 단계 

 태그생성, 태그 class 설정

※ HTML에는 UI적인 요소만 기능적인 부분은 js파일에서 하는게 좋다. (영역 분리)

예 )

        로고

---------------

         메뉴

---------------

  화면 컨테이너

 

 

2. style잡기(기본틀)

기본설정 목록

display, vh, 

자주 쓰이는 속성 변수 선언

:root{
    
    /* annimation */
    --animation-duration: 300ms;
}

height: 100vh - 부모 태그와 상관없이 화면 전체 1~100 에서 얼마만큼을 보여줄지 정하는 설정이다. body에 설정해두는 편이다.

body {
    height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

display - flex 

display: flex;
flex-direction: column;
align-items: center;

flex - 태그들을 원하는 포지션으로 커스텀가능한 상태가된다.

flex-direction  - 로우식, 컬럼식으로 설정가능하고 default는 row이므로 column으로 사용하려면 이렇게 설정변경해준다. reverse로도 셋팅이 가능하다.

 

align-items: 높이를 정렬할수있다.

 

3. js

 3-1 fetch로 데이터 불러오기

const getData=()=>{
    return fetch(`data/data.json`)
        .then(data=>data.json())
        .then(data => data.item)
}

getData()
    .then((data)=>{
        //데이터를 불러오고난후 화면에 뿌려줄 html을 그려줄 함수에 data를 넘겨줌
        load(data)
        //그려진 html에 event들을 넣어주는 함수에 data를 넘겨줌
        addEvent(data)
    })
    .catch(e=>console.error(e));

 

3-2 원하는 html 생성

=> 

 방법은 2가지가있다

 - node를 생성해서 태그에 append하는 방법 

예)

 let div = document.createElement('div');
 div.classList.add('items')
 let table = document.createElement('table');
 table.createTBody().classList.add('table-body');
 table.classList.add('table')

 div.appendChild(table);

 - backtick을 활용해서 직접 태그를 만들어 태그에 innerHTML로 넣어주는방식

예)

const itemLoad=(item)=>{
    for(let i =0; i < item.length; i++){
        document.querySelector('.items').innerHTML += `<li><img class="itemImg" src=${item[i].img} /><span>${item[i].name}</span></li>`
    }
}

아래는 좀 더 가독성이 좋게 바꾼 방법

for문을 사용하지않고 map을 활용하는 방식 비슷한거같은데 복잡한 화면이 될수록 아래 엘리님 방식이 훨씬 가독성이 좋을거같다..

const itemLoad=(items)=>{
    document.querySelector('.items').innerHTML = items.map(item=>createHTMLString(item)).join('');
}

const createHTMLString=(item)=>{
return`
    <li>
        <img class="itemImg" src=${item.img} />
        <span>${item.name}</span>
     </li>`;
}

 

이벤트를 추가하는 함수

변경 전은 빠르게 함수를 선언할때 좋지만, js가 복잡해질거같다면 요소를 변수로 선언해서 사용하는게 좋을거같다는 생각이든다.

const addEvent=(item)=>{
// 변경 전 내 코드
    // document.querySelector('.logo').addEventListener('click',event => itemLoad(item));
    // document.querySelector('.buttons').addEventListener('click',event => filterEvent(event,item));

//    가독성 좋게 변경후
    const logo = document.querySelector('.logo');
    const buttons = document.querySelector('.buttons');

    logo.addEventListener('click',event => itemLoad(item));
    buttons.addEventListener('click',event => filterEvent(event,item));
}

 

이렇게 데이터를 불러오고 HTML을 그려주고 이벤트를 생성해줄수있다.