[SJBoard 프로젝트] 관리자 페이지 3: 구글 차트를 이용하여 기간별 현황 조회 화면 구현하기 (스프링으로 DB 데이터를 JSON으로 파싱하기)

신입 개발자가 되기 위해 공부했던 독학 자료들/SJBoard 프로젝트를 통한 스프링 공부

[SJBoard 프로젝트] 관리자 페이지 3: 구글 차트를 이용하여 기간별 현황 조회 화면 구현하기 (스프링으로 DB 데이터를 JSON으로 파싱하기)

Seojoo21 2022. 3. 30. 21:00

구글 차트는 JSON 형식으로 데이터를 받기 때문에 DB의 데이터를 구글 차트에 전달하려면 DB 데이터를 JSON 타입으로 바꿔줘야한다. 하지만 어제 나는 주간 현황을 보여주는 구글 차트를 구현하면서 따로 DB 데이터를 JSON 타입으로 만들어 뷰 페이지에 전달하지 않고, 뷰 페이지 내에서 자바스크립트로 모든 작업을 처리할 수 있게 만들었다. 그렇게 작업했던 이유는 이미 구글 차트 밑에 표를 만들어 컨트롤러를 통해 주간 일별 현황 값을 뷰로 전달하고 있었기 때문이다. (관련 글 : https://seojoo21.tistory.com/168)

그러나 오늘 구현하는 기간별 현황을 보여주는 기능의 경우에는 화면에서 입력받은 시작 날짜, 마지막 날짜를 기준으로 DB에서 기간 내 데이터를 가져와야 하기 때문에 DB의 데이터를 JSON 타입으로 만들어 컨트롤러를 통해 뷰 페이지에 있는 구글 차트로 데이터를 전달해야만 한다.

이를 위해 나는 아래와 같이 계층별로 구글 차트 처리를 담당하는 별도의 파일들을 만들어 기간별 현황 조회 화면을 구현하였다. 그리고 가장 중요한 DB 데이터 JSON 파싱 작업은 ChartServiceImpl에서 구현했다.

1. 영속 계층

- ChartMapper 인터페이스

- ChartMapper.xml

2. 비즈니스 계층

- ChartService 인터페이스

- ChartServiceImpl

3. 프레젠테이션 계층

- ChartController

- 뷰 페이지 jsp

그럼 시작!

도움 받은 글:

https://developers.google.com/chart/interactive/docs/php_example

https://aljjabaegi.tistory.com/101

https://aljjabaegi.tistory.com/40

https://dlgkstjq623.tistory.com/265

https://velog.io/@gksmf6699/Spring-구글-차트-데이터베이스-자료이용

https://mypsj12-16.tistory.com/45

https://lnsideout.tistory.com/entry/jQuery-제이쿼리-위젯-datepicker-간단사용법

=======================================START!===========================================

1. 영속 계층 (ChartMapper / ChartMapper.xml / ChartMapperTests)

먼저 ChartMapper 인터페이스에 아래와 같이 메서드를 선언한다.

기간별 자료 조회의 경우 시작 날짜와 마지막 날짜가 필요하기 때문에 파라미터로 fromDate, toDate를 넣어준다.

반환 타입을 List<Map<String,Object>>로 잡은 이유는 아래와 같은 형식으로 기간별 데이터가 출력되기 때문이다. 먼저 Map에 REGDATE와 CNT를 key로 하여 각각의 결과값을 value로 저장하고, 이렇게 생성된 각각의 Map을 List에 넣어줘야한다.

ChartMapper.xml에는 아래와 같이 쿼리문을 작성한다. 데이터가 없는 날짜도 모두 포함하여 결과값이 0으로 나오도록 한다. 그리고 <select>의 resultType은 map으로 한다.

그 다음 아래와 같이 ChartMapperTests에서 ChartMapper.xml에서 작성한 쿼리문이 제대로 동작하는지 확인해보면 콘솔창에 아래와 같이 쿼리문이 잘 동작하는 것을 볼 수 있다.

2. 비즈니스 계층 (ChartService / ChartServiceImpl.xml / ChartServiceTests)

그 다음 비즈니스 계층에서는 영속 계층을 통해 얻어낸 DB에서의 데이터 결과를 구글 차트에서 이용할 수 있는 JSON 타입으로 파싱하는 작업을 할 수 있도록 코드를 작성해준다.

비즈니스 계층을 구현하기에 앞서 먼저 DB 데이터를 JSON 타입으로 만들기 위해서는 pom.xml에 아래와 같이 두 개의 라이브러리를 추가해야 한다.

<!-- https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple -->
<dependency>
	<groupId>com.googlecode.json-simple</groupId>
	<artifactId>json-simple</artifactId>
	<version>1.1.1</version>
</dependency>

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.13.1</version>
</dependency>

위의 두 라이브러리를 pom.xml에 추가한 후 프로젝트 Maven 업데이트를 해준다.

그 다음 ChartService 인터페이스를 생성 후 아래와 같이 메서드를 선언한다.

그리고 ChartServiceImpl 에서 실제 데이터를 JSON 타입으로 파싱하기 위한 코드를 작성한다. 그 전에 먼저 아래 구글 차트 공식 홈페이지를 보면 어떤 형식으로 JSON 파싱을 해야하는지 알 수 있다.

https://developers.google.com/chart/interactive/docs/php_example

Populating Data Using Server-Side Code | Charts | Google Developers

You can use server-side code to acquire data to populate your chart. Your server-side code can load a local file, query a database, or get the data in some other way. The following PHP example demonstrates reading chart data from a local text file when a p

developers.google.com

구글에서는 아래와 같이 데이터를 json으로 파싱하면 된다고 하는데,

cols은 columns 즉, 각 열에 해당하고 rows는 말그대로 rows 즉, 각 행에 해당한다.

나는 아래와 같이 출력되는 데이터를 JSON으로 파싱할 것이기 때문에

구글 차트에서 요구하는 JSON 파싱 형태는 아래와 같아야만 한다.

위의 형태를 바탕으로 JSON 파싱 코드를 작성하면 아래와 같다.

그리고 ChartServiceImpl에서 작성한 코드대로 JSON 파싱이 제대로 되었는지 확인하기 위해 ChartServiceTests에서 아래와 같이 코드 작성 후 테스트를 해보면,

아래와 같이 콘솔 창에 JSON 파싱 결과가 나온다.

INFO : com.seojoo21.service.ChartServiceTests - {"rows":[{"c":[{"v":"2022-03-20"},{"v":0}]},{"c":[{"v":"2022-03-21"},{"v":0}]},{"c":[{"v":"2022-03-22"},{"v":0}]},{"c":[{"v":"2022-03-23"},{"v":4}]},{"c":[{"v":"2022-03-24"},{"v":0}]},{"c":[{"v":"2022-03-25"},{"v":3}]},{"c":[{"v":"2022-03-26"},{"v":6}]},{"c":[{"v":"2022-03-27"},{"v":0}]}],"cols":[{"label":"등록일","type":"string"},{"label":"개수","type":"number"}]}

그런데 이 결과는 한 줄로 쭉 이어져 나와 보기 불편하므로 https://jsonlint.com 에 가서 결과를 복붙한 다음 'Validate JSON'을 클릭해 결과를 다시 확인해 보면,