[트러블슈팅] 타임리프에서 소수점 반올림 하는 방법

# 이슈 상황

• 캡스톤 프로젝트를 진행하면서 사용자(시니어)가 식단을 등록하면 연계된 보호자에게 식단에 관한 내용을 메일링하는 서비스를 구현했다.
• 배포 후 QA를 진행하던 중 double로 작성했던 값이 엄청 끝자리의 소수점까지 보여지는 경우가 생겼다. 아래 총 섭취 칼로리를 보게 되면 굳이 필요없는 부분까지 보여지게 된다.

• 소수점 둘째자리까지 보여야 하기 때문에 이를 위한 트러블 슈팅이 필요했다.

# 해결

• 두가지 부분을 수정하는 방법으로 해결했다. 

## 첫번째 방법

• totalKcal을 계산하는 비즈니스 로직에서, 메일 템플릿(타임리프)에 뿌려줄때 이 값을 반올림 처리해서 보내줬다.

// double을 소수점 두째자리에서 반올림하게 하는 함수
  private double roundDouble(double num){
	return Math.round(num*100) / 100.0;
  }

비즈니스 로직 상에서 둘째자리까지 반올림하는 함수를 작성 후

context.setVariable("totalKcal", roundDouble(totalkcal));

위와 같이 반올림된 값 자체를 넘겨 줬다.

 

## 두번째 방법

• 타임리프 상에서 소수점 둘째자리까지 표현하고 그 이하는 절개하는 방법을 사용했다.
• 토탈칼로리는 어차피 서비스상에서 모든 값 들을 더해서 계산해주는 과정이 필요하기 때문에 로직으로 해결했지만, 끼니에서 들어오는 요소별 데이터는 DB에 있는 서비스단에서는 그냥 메일 템플릿에 넘겨주기만 하기 때문에 여기 별도의 코스트를 발생시키고 싶지 않았다.

<tr th:each=" foodinfo: ${meals}">
	<td align="center" th:text="${foodinfo.getName()}"><p style="font-size: 14px; line-height: 140%;"><strong>돈까쓰</strong></p></td>
	<td align="center" th:text="${foodinfo.getCarbohyborateTotal()}"><p style="font-size: 14px; line-height: 140%;"><strong>10</strong> g</p></td>
	<td align="center" th:text="${foodinfo.getFatTotal()}"><p style="font-size: 14px; line-height: 140%;"><strong>10</strong> g</p></td>
	<td align="center" th:text="${foodinfo.getProtein()}"><p style="font-size: 14px; line-height: 140%;"><strong>10</strong> g</p></td>
	<td align="center" th:text="${foodinfo.getCalorie()}"><p style="font-size: 14px; line-height: 140%;"><strong>100</strong> kcal</p></td>
</tr>

• 위와 같은 기존 코드에서 아래와 같이 numbers.formatDecimal을 사용했다. 

<tr th:each=" foodinfo: ${meals}">
	<td align="center" th:text="${#numbers.formatDecimal(foodinfo.getCarbohyborateTotal(),1,2)}"><p style="font-size: 14px; line-height: 140%;"><strong>10</strong> g</p></td>
	<td align="center" th:text="${#numbers.formatDecimal(foodinfo.getFatTotal(),1,2)}"><p style="font-size: 14px; line-height: 140%;"><strong>10</strong> g</p></td>
	<td align="center" th:text="${#numbers.formatDecimal(foodinfo.getProtein(),1,2)}"><p style="font-size: 14px; line-height: 140%;"><strong>10</strong> g</p></td>
	<td align="center" th:text="${#numbers.formatDecimal(foodinfo.getCalorie(),1,2)}"><p style="font-size: 14px; line-height: 140%;"><strong>100</strong> kcal</p></td>
</tr>

• 타임리프의 numbers.formatDecimal에는 위와 같은 경우 3가지 인자를 넣을 수 있다.
• numbers.formatDecimal( 사용할 숫자, 정수부분을 최소 몇자리까지 표기할지, 소수분을 몇자리까지 표기할지 )  이다.
• 나의 경우는 정수 부분은 0.12와 같이 최소 1자리는 표기되게 하고, 소수부분은 둘째자리까지 표기하고 싶기 때문에 위와같이 1과 2의 값을 넣어 주었다.