Tab UI에 생명 불어넣기 - accidentlywoo/legacyVue GitHub Wiki

Tab UI에 생명 불어넣기

  • 들어가기 전에 Tab가 실제로 동작하는 데 필요한 JavaScript코드는 어떤 것일까요? 지금까지 배운 내용을 가지고 간단하게 실습을 한번 해보세여. 그러고 나서 아래 실습 내용을 참고하는 것도 좋은 학습방법이 될 것입니다.

학습 목표

  1. Tab UI가 동작하도록 JavaScript 코딩을 할 수 있습니다.

핵심 개념

  • Tab UI Component

학습하기

기능 정의

Tab UI에 필요한 기능을 정리해보겠습니다. 실제로 개발할 때는 모든 요구사항이 포함된 기획서(또는 UX상세설계서)가 있고 이를 보면서 구현해냐여 합니다. 지금은 간단한 요구사항 리스트만 나열해보겠습니다.

  • Tab 메뉴를 누르면 Ajax를 통해서 데이터를 가져온 후, 그 내용이 화면에 노출됩니다.
  • 다른 Tab 메뉴를 누르면 역시 동일하게 Ajax를 통해서 데이터를 가져온 후 그 내용이 화면에 노출됩니다.
  • 화면에 노출하기 위해서는 HTML코드를 가져오고, 서버에서 받은 데이터를 HTML Templating 작업을 해야 합니다.
  • 화면에 추가하기 위해서 DOM API를 사용합니다. `
<style> h2 { text-align: center } h2, h4 { margin: 0px; } .tab { width: 600px; margin: 0px auto; } .tabmenu { background-color: bisque; } .tabmenu>div { display: inline-block; width: 146px; height: 50px; line-height: 50px; text-align: center; cursor: pointer; } .content { padding: 5%; background-color: antiquewhite; } </style>

TAB UI TEST

<div class="tab">
    <div class="tabmenu">
        <div>crong</div>
        <div>jk</div>
        <div>pobi</div>
        <div>honux</div>
    </div>
    <section class="content">
        <h4>hello jk</h4>
        <p>golf, facebook</p>
    </section>
</div>
<script>
    function makeTemplate(data, clickedName) {
        var html = document.getElementById("tabcontent").innerHTML;
        var resultHTML = "";
        for (var i = 0; i < data.length; i++) {
            if (data[i].name === clickedName) {
                resultHTML = html.replace("{name}", data[i].name)
                    .replace("{favorites}", data[i].favorites.join(" "));
                break;
            }
        }
        document.querySelector(".content").innerHTML = resultHTML;
    }
    function sendAjax(url, clickedName) {
        var oReq = new XMLHttpRequest();
        oReq.addEventListener("load", function () {
            var data = JSON.parse(oReq.responseText);
            makeTemplate(data, clickedName);
        });
        oReq.open("GET", url);
        oReq.send();
    }
    var tabmenu = document.querySelector(".tabmenu");
    tabmenu.addEventListener("click", function (evt) {
        sendAjax("./json.txt", evt.target.innerText);
    });
</script>

<script id="tabcontent" type="my-template">
        <h4>hello {name}</h4>
        <p>{favorites}</p>
   </script>
`

생각해보기

  1. 같은 Tab 메뉴를 다시 누를 때 또 Ajax 통신을 해야 할까요?
  2. 이미 가져온 데이터를 보관하고 재사용하는 건 어떨까요?
⚠️ **GitHub.com Fallback** ⚠️