Tap UI에 생명 불어넣기

• 들어가기 전에

Tab이 실제로 동작하는 데 필요한 JavaScript 코드는 어떤 것일까? 지금까지 배운 내용을 가지고 간단하게 실습을 한번 해보자.

• 학습 목표

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

• 핵심 개념

- Tab UI Component

• Tab UI에 필요한 기능

- Tab 메뉴를 누르면 Ajax를 통해 데이터를 가져온 후, 그 내용이 화면에 노출

- 다른 Tab 메뉴를 누르면 역시 동일하게 Ajax를 통해서 데이터를 가져온 후, 그 내용이 화면에 노출

- 화면에 노출하기 위해서는 HTML 코드를 가져오고, 서버에서 받은 HTML Templating 작업을 해야한다.

- 화면에 추가하기 위해서 DOM API를 사용한다.

• 실습 코드

- https://gist.github.com/nigayo/291c5555b63a0afa41960e09d0173e06