Week3_02. API 사용(토스트 그리드 사용.!)

* reduce 함수 사용

: 2개의 데이터를 불러 온 뒤 일치하는 데이터를 찾아서 데이터 내용 합치고 불러오기

-> 아직 실제로 사용해 보지는 못함...

구현 계획 ) 

목표 ) 따릉이 대여소 정보와 실시간 대여정보를 가져와서 원하는 대여소의 실시간 정보를 보여줌.

1. 마스터 데이터로 사용할 따릉이 대여소 정보를 로컬레지스토리에 저장.

2. 로컬레지스토리에 있는 데이터를 기반으로 1차 정보를 그리드에 보여줌.

3. "최신정보 업데이트"를 눌렀을때 api를 새로 받아서 정보 업데이트 되게끔 데이터 관리.

4. 검색하면 -> 로컬레지스토리 데이터를 기반으로 키워드 검색.

5. 특정 주소 클릭 -> 데이터를 비교해서 실시간 따릉이 정보 보여주기.

 

1) TOAST UI Grid란?

간단한 HTML과 CSS를 사용하여 만들어져 있으며

자바스크립트를 이용하여 데이터를 편하게 보여주기 위한 라이브러리 중 하나로

테이블 형식의 데이터를 웹에서 쉽게 다룰 수 있게 해주는 도구라고 할 수 있다.

 

2)  사용방법

https://nhn.github.io/tui.grid/latest/tutorial-example01-basic

https://nhn.github.io/tui.grid/latest/tutorial-example01-basic/

 

위 페이지로 들어가면, 토스트 그리드를 사용할 수 있는 샘플 코드들을 확인 할 수 있다.

 

각 페이지에 들어가서 탭을 확인해 보면 결과값과, 각 코드들을 볼 수 있다.

1. 토스트 그리드를 사용하기 위한 css, js 코드 html 주입.

 

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

 

2. 데이터 소스 코드 .js

데이터를 담을 기본 툴을 만들어 준다. (지정할 컬럼명과 데이터를 변경해서 구현)

 

const grid = new tui.Grid({
      el: document.getElementById('grid'),
      data: {
        api: {
          readData: { url: '/api/readData', method: 'GET' }
        }
      },
      scrollX: false,
      scrollY: false,
      minBodyHeight: 30,
      rowHeaders: ['rowNum'],
      pageOptions: {
        perPage: 5
      },
      columns: [
        {
          header: '지정할 컬럼명',
          name: '데이터명'
        },
        {
          header: 'Artist',
          name: 'artist'
        },
        {
          header: 'Type',
          name: 'type'
        },
        {
          header: 'Release',
          name: 'release'
        },
        {
          header: 'Genre',
          name: 'genre'
        }
      ]
    });

 

기본 그리드 툴 생성.!

3. 페이지 표시도 필요하기때문에

토스트 ui에서 제공하는 페이지네이션 기능을 넣어보자.!

[ CSS와 JS는 아래 링크에서 참고! ] 

깃허브에는 js만 있고 css는 import형식으로 되어있어서 찾는데 시간이 좀 걸렸다...

페이지네이션 관련 코드는 

 

<link rel="stylesheet" href="https://uicdn.toast.com/tui.pagination/latest/tui-pagination.css" />

<script src="https://uicdn.toast.com/tui.pagination/latest/tui-pagination.js"></script>

html 코드

<div id="tui-pagination-container" class="tui-pagination"></div>

 

 

https://nhn.github.io/tui.pagination/latest/

https://nhn.github.io/tui.pagination/latest/

페이지네이션의 상세 설명은 아래에서 참고하였다.

https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/ko/pagination.md

tui.grid/packages/toast-ui.grid/docs/ko/pagination.md at master · nhn/tui.grid

 

기본그리드 툴 생성하기 완료!

 

다음은 그리드에 api데이터를 넣어서 화면에 데이터를 보여주는 것 까지 구현보겠다