티스토리 뷰

부스트코스 웹 프로그래밍/3. 웹 앱 개발: 예약서비스 1

6. Tab UI 실습 - FE (2)

haaak 2019. 8. 3. 12:19

2) Tab UI에 생명 불어넣기

  • 간단하게 이벤트로 해서 Ajax를 가져온 다음에 화면에 넣는 사이클을 해보겠습니다. Ajax를 이용하려면 간단하게 로컬 서버를 띄어주는 게 좋습니다. 만약에 NPM이라는 노드 패키지가 설치되어 있으면 live-server와 같은 것들을 찾아가지고 npm install 할 수가 있고요. 파이썬이 만약에 설치되어 있는 경우도 서버를 띄울 수가 있습니다.
  • 중간에 매번 누를 때마다 데이터를 매번 가져오는 조금 미련한 방법을 하고 있는데 이거는 캐시를 하면 됩니다. 메모리에 보관을 하면 돼요. 메모리에 보관한다는 거는 결과를 배열이나 오브젝트에 넣어놓으시라는 얘기입니다. 있으면 그거를 재사용하는 것이겠죠.
  • type="my-template"가 기술적으로 문제를 일으키지는 않습니다.
    하지만 script 태그의 type은 MIME 타입으로 지정되도록 규정되어 있습니다. 따라서 "text/x-my-template" 등의 올바른 MIME Type 포맷으로 써주시는 게 좋습니다.
    [    참고] script tag: https://developer.mozilla.org/ko/docs/Web/HTML/Element/script

기능 정의

  • Tab UI에 필요한 기능을 정리해보겠습니다.
    실제로 개발할 때는 모든 요구사항이 포함된 기획서(또는 UX상세설계서)가 있고 이를 보면서 구현해내야 합니다.
    지금은 간단한 요구사항 리스트만 나열해보겠습니다.
    1. Tab 메뉴를 누르면 Ajax를 통해서 데이터를 가져온 후, 그 내용이 화면에 노출됩니다.
    2. 다른 Tab 메뉴를 누르면 역시 동일하게 Ajax를 통해서 데이터를 가져온 후 그 내용이 화면에 노출됩니다.
    3. 화면에 노출하기 위해서는 HTML 코드를 가져오고, 서버에서 받은 데이터를 HTML Templating 작업을 해야 합니다.
    4. 화면에 추가하기 위해서 DOM API를 사용합니다.

실습 코드

tabui.html

<html>

<header>

    <link rel="stylesheet" href="tabui.css">

    <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>

</header>

 

<body>

    <h2> TAB UI TEST</h2>

 

    <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) {  //HTML을 가져옴.

            var html = document.getElementById("tabcontent").innerHTML;

            var resultHTML = "";

            for (var i = 0, len=data.length; i < len; i++) { //조건식 length보다 성능이 나음.

                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);              //서버에 json.txt를 만들고 진행하였음.

        });

    </script>

 

    <script id="tabcontent" type="my-template">               //템플릿

            <h4>hello {name}</h4>

            <p>{favorites}</p>

       </script>

</body>

</html>

코드 바로가기

 

json.txt

[
  {
    "name" : "crong",
    "favorites" : ["golf", "facebook"]
  },
  {
    "name" : "jk",
    "favorites" : ["soccer", "apple"]
  },
  {
    "name" : "honux",
    "favorites" : ["game", "orange"]
  },
  {
    "name" : "pobi",
    "favorites" : ["book", "youtube"]
  }
]

 

결과화면

생각해보기

  • 같은 Tab 메뉴를 다시 누를 때 또 Ajax 통신을 해야 할까요?
  • 이미 가져온 데이터를 보관하고 재사용하는 건 어떨까요? 

 

'부스트코스 웹 프로그래밍 > 3. 웹 앱 개발: 예약서비스 1' 카테고리의 다른 글

7. Spring Core - BE (2)  (0) 2019.08.03
7. Spring Core - BE (1)  (0) 2019.08.03
6. Tab UI 실습 - FE (1)  (0) 2019.08.03
5. WEB UI - FE (5)  (0) 2019.08.03
5. WEB UI - FE (4)  (0) 2019.08.03
공유하기 링크
Comments
Related Articles more