들어가기 전에
Tab가 실제로 동작하는 데 필요한 JavaScript코드는 어떤 것일까요?
지금까지 배운 내용을 가지고 간단하게 실습을 한번 해보세요.
그러고 나서 아래 실습 내용을 참고하는 것도 좋은 학습방법이 될 것입니다.
학습 목표
- Tab UI가 동작하도록 JavaScript 코딩을 할 수 있습니다.
핵심 개념
- Tab UI Component
학습하기
2) Tab UI에 생명 불어넣기
- TABUI에 생명 불어넣기
- 영상 우측 하단에 자막 스크립트 ON 설정을 한 후 강의를 시청하시면 학습에 도움이 됩니다.
[영상보강]
8:45분에서 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상세설계서)가 있고 이를 보면서 구현해내야 합니다.
지금은 간단한 요구사항 리스트만 나열해보겠습니다.
- Tab 메뉴를 누르면 Ajax를 통해서 데이터를 가져온 후, 그 내용이 화면에 노출됩니다.
- 다른 Tab 메뉴를 누르면 역시 동일하게 Ajax를 통해서 데이터를 가져온 후 그 내용이 화면에 노출됩니다.
- 화면에 노출하기 위해서는 HTML 코드를 가져오고, 서버에서 받은 데이터를 HTML Templating 작업을 해야 합니다.
- 화면에 추가하기 위해서 DOM API를 사용합니다.
실습 코드
<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) {
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>생각해보기
- 같은 Tab 메뉴를 다시 누를 때 또 Ajax 통신을 해야 할까요?
- 이미 가져온 데이터를 보관하고 재사용하는 건 어떨까요?
comment
visual studio code 에 마켓플레이스에 live server 설치해서 띄우면 쉽게 띄우실 수 있습니다
https://harang011226.tistory.com/entry/html-js-css-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%89%BD%EA%B2%8C-%EB%A1%9C%EC%BB%AC-%EC%84%9C%EB%B2%84-%EB%9D%84%EC%9A%B0%EB%8A%94-%EB%B0%A9%EB%B2%95-Visual-Studio-Code
[
{
"name" : "crong" ,
"favorites" : ["golf", "facebook"]
},
{
"name" : "jk" ,
"favorites" : ["soccer", "apple"]
},
{
"name" : "honux" ,
"favorites" : ["game", "orange"]
},
{
"name" : "pobi" ,
"favorites" : ["book", "youtube"]
}
]
json.txt
mac 쓰시는 분들의 경우 터미널에 npm install -g live-server 입력하셔서 설치하신 뒤, 해당 디렉토리에 가셔서 live-server 입력 하시면 강의 영상하고 똑같이 진행하실 수 있습니다
예제 코드에 문서의 meta 정보를 저장하는 `<head>` 태그가 있어야할 곳에 `<header>` 태그가 있습니다!
이미 가져온 데이터를 보관하고 재사용하는 코드 구현해봤습니다.
메뉴 클릭할 때마다 AJAX가 실행되는 코드와 다른 점은,
1) 서버에서 받아올 데이터를 저장할 변수인 data 추가
2) 메뉴 click 이벤트 리스너에 data의 true/false에 따른 조건문 추가
- data가 false (서버로부터 받은 데이터가 없음): ajax 함수 실행
- data가 true (서버로부터 받은 데이터가 있음): 받아져 있는 data의 값들로 템플릿을 만들고, content 섹션의 innerHTML 변경
3) ajax함수 내 서버로부터 전달받은 JSON을 data 변수에 저장하는 코드 추가
실습 수행하면서 생각난점 끄적여봅니다.
1. 만약, 서버에서 제공하는 데이터에 변동이 생겼다면 다시 Ajax통신을 통해 새롭게 반영된 부분을 갱신해줘야할 필요성이 있지만 그렇지않다면, 굳이 또 Ajax통신을 할 필요가없고 2를 수행하는것이 비용적인측면에서 효율적이라 봅니다.
2. 알고리즘서적에서 동적계획법이라는 표현으로 설명돼있던데, 시간,공간복잡도측면에서 굉장히 효율적으로 모델링할 수 있습니다.
아래는 개인적으로 실습진행한 js코드입니다.
Ajax 캐싱 구현 이렇게 하면 될 것 같아 공유합니다.
저 같은 경우는 template을 서버에서 json으로 쏴주는 방식을 사용해서 기존 코드와 다를 수 있으니 큰 틀만 참고하시면 좋을 것 같습니다.
var response = null;
var data = null;
var template = null;
function sendAjax(name)
{
if(response === null)
{
console.log("Ajax로 서버에 요청했습니다.");
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", () => {
response = JSON.parse(xhr.responseText);
data = response.list;
template = response.template;
bind(data, template, name); // 데이터와 템플릿을 결합
});
xhr.open("GET", "tabs");
xhr.send();
}
else
{
console.log("이미 서버로부터 받아온 데이터가 있어 Ajax로 서버에 요청하지 않았습니다.");
bind(data, template, name); // 데이터와 템플릿을 결합
}
}
생각해보기 "이미 가져온 데이터를 보관하고 재사용" 하는 방법 아래와 같이 하면 맞을까요?
생각해보기 이런식으로 하는게 맞을까요??
click event 조건으로 처리했습니다.
좋은 강의 감사합니다!
감사합니다.
감사합니다