9월 회고록

회고록 쓰기 싫다.

아이 씨!! 회고록 쓰는 게 왜 이렇게 싫지!

9월에는 좀 쉬고 싶었다. 계속해서 기술적인 부분을 채우는 것에서 멀어져서 내 마음을 감성적이고, 말랑말랑하게 하고 싶었다. 그런데 웬걸! 회사에서 진행하는 프로젝트 외에 웹 어플리케이션을 만들어야 했다. 사실 할 줄 모른다고 할 수 있는 상황이었지만, 알고 싶었다. 7개월 동안 공부한 HTML, CSS, Javascript 실력을 검증하고 싶었다. 그리고 왠지 할 수 있을 것 같은 기분이 들었다.
매일 연습만 하고 있으니 실제 시합에 뛰고 싶은 마음이 아니었을까?

내가 아는 한도에서 빨리 정하자!

먼저, 제작을 위해 Back-end와 Front-end 기술을 정했다. 그리고 디자인을 확정했다.

• Back-end: Java, Spring boot, Spring Data JPA
• Front-end: Vanilla Javascript, Thymeleaf
• Benchmark Design: Data Table UI Design Example

삽질 한번은 우습지.

내가 원하는 디자인을 그대로 옮길 능력이 없으니 유튜브를 기웃거렸다. Sidebar는 어떻게 구성하고 Custom Select는 어떻게 만드는지 영상을 보며 확인했다. 그리고 VSCode에 한올 한올 옮겨 치며, 분리되어 있는 컴포넌트를 합치면 될 것 같다는 생각을 했다.

근데, 뭔가 이상한 기분이 든다. 전화기를 들고 지인에게 연락을 했다. 만나서, 내가 작업하는 방식을 이야기하니 그 사람은 고개를 절레절레 흔든다.

“10년차 개발자도 그런 식으로 작업 안 해요. Bootstrap을 사용하던가, jQuery를 써요. 왜 그 코드를 다 치고 있어요!”

‘그렇지, 뭔가 이상하더라!’

Table UI 화면은 만들자

충고를 겸허히 받아들이며 Bootstrap Template을 찾았다. 내가 고른 건 SB Admin-2. Spring Boot 프로젝트의 Resource 폴더에 Bootstrap 자원을 넣고 실행시키니 잘 적용된다.

참고: [SpringBoot] BootStrap Templete 적용하기

가장 먼저, Table 형식으로 데이터를 출력하고 Select Box와 Text Input으로 데이터를 검색하는 화면을 만들기로 했다. 검색 Form을 만드는 과정에서 내 실력으로는 기본 Select Box를 변경 할 수 없더라. 디자인이 적용되어 있는 BVSelect를 적용해 최대한 비슷하게 디자인 시안과 맞추었다.

이제 Table을 만들 차례. 내 전략은 Back-end는 전체 데이터를 보내고 Front-end 엔드에서 입맛에 맞게 수정해서 사용하는 것. 근데, 그렇게 했더니 안된다. 결국 jQuery Datatable이 원하는 데이터 형식으로 Back-end를 모두 변경했다. Sorting과 검색 때문에 조금 애를 먹었는데, Datatable에서 보내는 HttpServletRequest 객체에 담긴 값을 Parsing 해서 객체에 담아 놓고 사용하는 것으로 해결했다.

참고 : Simple Guide to Use DataTable with Spring Boot – Example With Source Code

Chart를 그려보자

다음은 Chart.js 를 사용하여 자원의 현황을 한눈에 볼 수 있는 화면을 구성했다. 첫 화면을 만들 때는 Bootstrap의 CSS가 그렇게 어색하더니 이제 조금씩 익숙해진다. 맨 처음 row사용하여 하나의 행을 만들고, col을 사용하여 열을 만든다. 열은 화면의 크기에 따라 반응형으로 만들 수 있고 내가 만든 열에 내용을 채우면 끝! 3시간 정도 걸려 화면을 하나 만들고, 우리 PM의 요구사항인 Datalabel을 달았다. Chart.js 2.x 버전에서는 자동으로 Chartjs-plugin-datalabel Plug-in이 등록되지 않아 조금 고생했다.

Registration
Since version 1.x, this plugin no longer registers itself automatically. It must be manually registered either globally or locally (see #42 for the rationale).

// Register the plugin to all charts:
Chart.plugins.register(ChartDataLabels);
// OR only to specific charts:
var chart = new Chart(ctx, {
  plugins: [ChartDataLabels],
  options: {
    // ...
  }
})

참고: ChartJS and data labels to show percentage value in Pie piece - Javascript Chart.js

고객에게 화면 시현 전까지 대한 수정사항은 계속 나오겠지만, 9월처럼 화면에 메어 살지 않아도 될 것 같다. 10월에는 못 읽었던 책도 좀 읽고. 영화도 좀 보고. 그렇게 조금 여유롭게. 지낼 수 있기를!

PS. 8월27일에 보았던 ADsP 자격 시험은 합격하였다.