[javascript] 1. Toast UI Grid 기초(+API 사용법)

Toast UI를 많이 사용하는데, 기본적인 구현 방법에 대해 설명한다.

 

해당 포스트는 Grid 방식을 설명한다.

---

 

1. 가장 기본이 되는 사용법

먼저 Toast UI Grid를 띄워보자.  data는 임의의 배열을 지정하여 Toast UI Grid를 띄워본다.

 

먼저 include 해야 할 것은 Toast UI Grid의 javascript와 css이다.

<link rel="stylesheet" href="https://uicdn.toast.com/grid/latest/tui-grid.css" />
<script src="https://uicdn.toast.com/grid/latest/tui-grid.js"></script>

 

이후 임의의 Data Array를 초기화하여 Grid Table을 구현해 본다.

 

See the Pen Untitled by Sangyoung Park (@Sangyoung-Park) on CodePen.

2. API를 사용하는 방법

먼저 API는 무료로 공유하는 https://koreanjson.com/users를 사용한다. 그중 몇 개의 데이터만 뽑아서 뿌려줘 보자.

 

1번과는 다르게 API를 요청한 뒤 response가 발생하면 Data를 뿌려주는 방식이다.

 

 

See the Pen Untitled by Sangyoung Park (@Sangyoung-Park) on CodePen.

 

 

아래와 같이 API의 데이터를 받아 뿌려주는 것을 볼 수 있다.