190114 TIL tabUI 만들기 - async && await

Jan 14, 2019 » 1막, TIL (Today I Learned)

tabUI 만들기

오늘 강의에서 아래와 같은 tabUI 만드는 실습을 했다.

비센스, 카카와 함께 팀으로 진행했다.

1. 주어진 HTML 코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>tabUI</title>
    <link rel="stylesheet" href="tabui.css">
</head>

<body>
    <div id="wrapper">
        <div class="mainView" >
            <header class="mainHeader" ><img src="https://avatars1.githubusercontent.com/u/1456761?v=3&s=140" alt="logo" width="80" >
                <div class="userId" ><span > </span><span >nigayo</span><span > </span>
                </div>
                <div class="userMessage" ><span > </span><span >안녕하세요 nigayo입니다.</span><span > </span>
                </div>
                <ul class="userSNSInfo" >
                    <li ><span >review : </span><span class="count" >10</span><span > | </span>
                    </li>
                    <li ><span >follower : </span><span class="count" ><span >12</span><span > </span></span><span > | </span>
                    </li>
                    <li ><span >following : </span><span class="count" ><span >30</span><span > </span></span><span > </span>
                    </li>
                </ul>
            </header>
            <nav >
                <div class="tab selectedTab" data-id="position" ><span > </span><span >내 장소</span><span > </span>
                </div>
                <div class="tab" data-id="friend" ><span > </span><span >친구</span><span > </span>
                </div>
                <div class="tab" data-id="theme" ><span > </span><span >나의 테마</span><span > </span>
                </div>
                <div class="tab" data-id="news" ><span > </span><span >나의 소식</span><span > </span>
                </div>
            </nav>
            <section id="my_position" class="eleDisplayShow" >
                <h2>내가 즐겨가는 장소~</h2>
                <ul>
                    <li> 판교 유스페이스</li> 
                    <li>IT인들이 주로 먹는 밥집</li>
                </ul>
            </section>
        </div>
    </div>
    <script src="./script.js"></script>
    </body>
</html>

2. 클릭된 tab에 색 변화주기

const tabs = document.querySelectorAll('.tab');

tabs.forEach(el => {
    el.addEventListener('click', event => {
        init(); 
        const target = (event.target.nodeName === 'SPAN') ? event.target.parentNode : event.target;
        target.classList.add("selectedTab");
        addcontent(target);    
    })
})

function init() {
    tabs.forEach(el => {
        el.classList.remove("selectedTab");
    })
}

3. 클릭된 tab에 따라 contents 내용 바꿔주기

let data;

fetch('./data.json').then(response => {
    try {
        return response.json();
    } catch (e) {
        throw e;
    }
}).then(res => {
    data = res;
}, err => {
    console.error(err)
});

async function templating(target) {
    const contentObj = await data[0][target];
    return `
    <section id="my_${target}" class="eleDisplayShow" >
        <h2>${contentObj['heading-2']}</h2>
        <ul>
            <li>${contentObj.area}</li> 
            <li>${contentObj.info}</li>
        </ul>
    </section>`;
}

async function addcontent(target) {
    const content = document.querySelector('.eleDisplayShow');
    content.outerHTML = await templating(target.dataset.id);
}

처음으로 async & await 쓰는 법을 배웠다 !