Tab UI에 생명 불어넣기

2020-06-28

해당 Post는 Tab UI에 생명 불어넣기에 대해서 정리한 파일입니다.

Tab가 실제로 동작하는 데 필요한 JavaScript코드는 어떤 것일까요?

Tab UI 구조를 우리가 잡았다고 가정을 하고 Tab UI에 해당하는 동적인 부분의 코드를 간단하게 한 사이클만 해보려고 합니다.

간단하게 이벤트로 해서 Ajax를 가져온 다음에 화면에 넣는다.

그 사이클을 한번 해보면 좋을 것 같고

지난번 포스트의 코드를 예시로 진행해 봅니다!

##

<html>
<header>
    <style>
        h2{ 
            text-align: center;
        }
        h2, h4 {
            margin: 0px;
        }
        .tab{
            width: 500px;
            margin: 0px auto;
        }
        .tab-menu{
            background-color: #888888;
        }
        .tab-menu > div{
            display: inline-block;
            width: 120px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }
        .content{
            padding: 5%;
            background-color: antiquewhite;
        }
    </style>
</header>

<body>
    <h2>TAB UI TEST</h2>

    <div class="tab">
        <div class="tab-menu">
            <div>Menu1</div>
            <div>Menu2</div>
            <div>Menu3</div>
            <div>Menu4</div>
        </div>
        <section class="content">
            <h4>Hello Sir</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quibusdam, ipsum.</p>
        </section>
    </div>
</body>

</html>

코드를 실행시켰을 때 상단의 메뉴를 클릭했을 때 Ajax를 가져와서 어떤 템플릿과 조합해서 이 내용을 바꿔주는 거라고 할 수 있습니다.

델리게이션을 쓰려면 어떻게 해야 될까요?

<html>
<header>
    <link rel="stylesheet" href="tabui.css">
    <style>
        h2{ 
            text-align: center;
        }
        h2, h4 {
            margin: 0px;
        }
        .tab{
            width: 500px;
            margin: 0px auto;
        }
        .tab-menu{
            background-color: #888888;
        }
        .tab-menu > div{
            display: inline-block;
            width: 120px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }
        .content{
            padding: 5%;
            background-color: antiquewhite;
        }
</style>
</header>

<body>
    <h2>TAB UI TEST</h2>

    <div class="tab">
        <div class="tab-menu">
            <div>Menu1</div>
            <div>Menu2</div>
            <div>Menu3</div>
            <div>Menu4</div>
        </div>
        <section class="content">
            <h4>hello Menu1</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>
</body>

</html>

html 코드는 이렇게 두고, css는 본인이 원하시는 대로 작성하시면 됩니다.

이후 json.txt 파일은 아래와 같습니다.

{
  {
  "name" : "Menu1",
  "favorites" : ["golf", "facebook"]
  },
  
  {
  "name" : "Menu2",
  "favorites" : ["game", "banana"]
  },
  
  {
  "name" : "Menu3",
  "favorites" : ["movie", "action"]
  },
  
  {
  "name" : "Menu4",
  "favorites" : ["LoL", "baseball"]
  }
  }
}

기능 정의

Tab UI에 필요한 기능을 정리해보겠습니다.

실제로 개발할 때는 모든 요구사항이 포함된 기획서(또는 UX상세설계서)가 있고 이를 보면서 구현해내야 합니다.

지금은 간단한 요구사항 리스트만 나열해보겠습니다.

  • Tab 메뉴를 누르면 Ajax를 통해서 데이터를 가져온 후, 그 내용이 화면에 노출됩니다.
  • 다른 Tab 메뉴를 누르면 역시 동일하게 Ajax를 통해서 데이터를 가져온 후 그 내용이 화면에 노출됩니다.
  • 화면에 노출하기 위해서는 HTML 코드를 가져오고, 서버에서 받은 데이터를 HTML Templating 작업을 해야 합니다.
  • 화면에 추가하기 위해서 DOM API를 사용합니다.

생각해보기

  1. 같은 Tab 메뉴를 다시 누를 때 또 Ajax 통신을 해야 할까요?

만약, 서버에서 제공하는 데이터에 변동이 생겼다면 다시 Ajax통신을 통해 새롭게 반영된 부분을 갱신해줘야할 필요성이 있지만 그렇지않다면,

굳이 또 Ajax통신을 할 필요가없고 2를 수행하는것이 비용적인측면에서 효율적이라 봅니다.

  1. 이미 가져온 데이터를 보관하고 재사용하는 건 어떨까요?

이미 가져온 데이터를 보관하고 재사용하는 코드 구현한 것을 찾아 보았습니다.

메뉴 클릭할 때마다 AJAX가 실행되는 코드와 다른 점은,

1) 서버에서 받아올 데이터를 저장할 변수인 data 추가

2) 메뉴 click 이벤트 리스너에 data의 true/false에 따른 조건문 추가

  • data가 false (서버로부터 받은 데이터가 없음): ajax 함수 실행

  • data가 true (서버로부터 받은 데이터가 있음): 받아져 있는 data의 값들로 템플릿을 만들고, content 섹션의 innerHTML 변경

3) ajax함수 내 서버로부터 전달받은 JSON을 data 변수에 저장하는 코드 추가