관리 메뉴

Just Do it

[개인 프로젝트] SJBoard (댓글 및 파일 업로드 게시판) 19일차 개발 일지 본문

개인프로젝트/[스프링] SJBoard 개발일지

[개인 프로젝트] SJBoard (댓글 및 파일 업로드 게시판) 19일차 개발 일지

Seojoo21 2022. 3. 30. 22:54

2022.03.30.수요일 19일차

 

오늘은 관리자 페이지 구현의 마지막으로 기간별 현황 자료를 구글 차트로 볼 수 있는 기능을 구현하였다.

어제 만든 주간 현황 차트와의 가장 큰 차이점은 바로 관리자가 직접 조회 기간을 설정할 수 있다는 것이다.

 

어제 구현한 주간 현황 차트의 경우 접속 일자를 기준으로 이번주와 지난주의 자료를 일방적으로 보여주는 반면, 오늘 만든 기간별 현황 차트는 아래 이미지와 같이 관리자가 직접 조회하고 싶은 기간을 설정하여 해당 기간의 데이터를 차트로 확인할 수 있다. 

이를 위해 스프링에서 DB에 있는 데이터를 JSON으로 파싱하는 방법을 공부했고 jQuery의 datepicker 위젯을 활용하여 쉽게 날짜 선택 기능을 추가할 수 있다는 것을 알게 되었다.

 

1. 제작 과정 

- 구글 차트를 이용하여 기간별 현황 조회 화면 구현 (스프링으로 DB 데이터를 JSON으로 파싱)

https://seojoo21.tistory.com/171

 

[SJBoard 프로젝트] 관리자 페이지 3: 구글 차트를 이용하여 기간별 현황 조회 화면 구현하기 (스프

구글 차트는 JSON 형식으로 데이터를 받기 때문에 DB의 데이터를 구글 차트에 전달하려면 DB 데이터를 JSON 타입으로 바꿔줘야한다. 하지만 어제 나는 주간 현황을 보여주는 구글 차트를 구현하면

seojoo21.tistory.com

 

2. 발생 에러 및 해결 방법

기간별 현황 데이터 구글 차트 출력 구현 시 부적합한 열 에러 해결

https://seojoo21.tistory.com/170

 

[스프링/STS] 기간별 현황 데이터 구글 차트 출력 구현 시 부적합한 열 에러 해결

스프링 프로젝트에 구글 차트를 이용하여 기간별 현황 자료를 볼 수 있는 기능을 넣던 중 골머리를 썩게 만들었던 문제. 해결 후 코드는 매우 간단하지만 아직 실력이 많이 부족한 탓에

seojoo21.tistory.com

 

3. 오늘 프로젝트 진행하면서 추가로 배운 내용

1) 관리자 페이지에 구글 차트를 적용하면서 오픈 소스 API를 활용하는 것과 공식 홈페이지의 documentation을 참고하는 것에 더 익숙해졌다. 이전에 게시판에 SummerNote 에디터를 적용할 때만 하더라도 공식 홈페이지의 documentation을 참고하여 오픈 소스 API를 활용하는 것이 다소 어려웠는데, 이번 구글 차트의 경우에는 SummerNote에서의 경험이 쌓인 덕분인지 비교적 수월하게 구글 차트를 프로젝트에 적용할 수 있었다. 

 

2) 하지만 API 활용을 위해서는 현재 내가 가진 데이터를 필요에 맞게 가공할 줄 알아야하고 그러려면 정확하고 효율적인 SQL문을 작성하는 것이 중요하다는 사실을 깨달았다. 처음 오라클 쿼리문을 배울 때만 하더라도 생각보다 쉽다고 느꼈는데 실제로 프로젝트에 적용을 하려고 보니 어떤 함수를 어떻게 써야하는지, 두 테이블을 연결할 때는 조인 방식을 어떻게 써야 하는지 등에 대한 로직을 떠올리는 것이 결코 쉽지 않았다. 지금 내 수준에서는 일단 SQL 문법에 익숙해지는 것이 더 중요하지만 결국에는 쿼리문 작성 로직을 떠올리는 것이 훨씬 중요해지겠다는 생각이 들었다.

 

3) MyBatis로 작성한 xml 파일을 통해 가져온 DB 데이터를 JSON으로 파싱하는 방법을 배우면서 JSON Object와 JSON Array를 알게 되었다. 그리고 List 와 Map과 같은 자바 컬렉션 프레임워크를 사용하는데 좀 더 익숙해졌다. 처음 자바를 공부할 때만 하더라도 컬렉션 프레임워크가 어떻게 많이 쓰이는 것인지 감이 안왔는데, 이번 SJBoard 프로젝트에서 꽤나 자주 List와 Map을 사용하면서 컬렉션 프레임워크가 프로젝트에서 데이터를 다루는데 얼마나 유용하고 필요한 존재인지 알게 되었다.