round option | 한국어

필요성

Axes는 (기본적으로) 계산된 좌표값을 반올림 하지 않고 반환합니다.

그러나 Axes 2.6 이후부터 round 옵션이 추가되었습니다. round 옵션은 사용자가 원하는 단위로 값이 변경될 수 있도록 해줍니다.

round 옵션 지정하면 다음과 같은 기대효과를 같습니다.

10 진수에서 10 / 3 = 3.33333.... 을 완전히 나누어 떨어지는 10진수 숫자로 표현하지 못하는 것처럼 2진수를 사용하는 컴퓨터에서도 2진수 값이 완전히 나누어 떨어지지 못하는 상황이 발생할 수 있습니다. 이 경우 2진수의 반올림이 발생하게 됩니다.

그래서 0.1 + 0.2 !== 0.3 인 상황이 발생합니다.

참고자료

[IEEE 754] 0.1 + 0.2 = 0.30000000000000004? 0.1 + 0.2 ≠ 0.3?

https://floating-point-gui.de/basic/

이런 문제는 주로 큰 소수점자리 발생하기 때문에 일정 자리수에서 반올림을 하여 회피할 수 있습니다. 예를 들어 view360 코드에서는 다음과 같은 코드를 포함하여 부동소수점 이슈를 회피합니다.

const fovRange = this.options.fovRange.map(v => +v.toFixed(5));

하지만 Axes 자체에서 round 옵션을 제공함으로써 부동 소수점 이슈를 사전에 대응할 수 있습니다.

위와 같은 부동 소수점 문제를 회피하기 위해 서비스 코드 곳곳에서 Axes에서 전달된 값을 반올림 처리해주어야 합니다. 이로 인해 코드의 관리 비용이 증가할 뿐만 아니라 최적화되지 않은 솔루션 적용(예, toFixed)으로 성능이 저하될 수 있습니다.

더불어 사용자가 원하는 단위로 값을 전달 받을 수 있습니다.

Axes 는 기본적으로 9.92939177071014 와 같이 반올림되지 않은 값을 전달합니다. 그러나 round 옵션을 지정하면 round 옵션에 지정된 값을 단위로 값을 전달 받을 수 있습니다.

가령 Axes 값의 범위가 [0, 10] 인 경우,

기본(round: null) 동작은 [0.123456...., 1.2334344, ....., 9.999999, 10] 과 같이 반환합니다. 그러나 round 값을 지정한 경우 다음과 같이 반환 합니다.

Axes 의 인터페이스는 다음과 같습니다.

Axes(axis: Object, options: AxesOption, startPos: <string, number>)

round 옵션을 사용하기 위해서는 options 에 round 값을 지정합니다.

주의: 첫번째 파라미터인 axis 아니라 두번째 파라미터인 options 에 round 옵션을 지정함을 유의합니다.

const axes = new eg.Axes({
  x: {
    range: [0, 100]
	},
  y: {
    range: [0, 100]
  }
}, {
 round: 1 /* 1의 단위로 반올림한다. */
});

다음의 Codepen 예제에서 round 옵션을 변경해 가면서 그 차이를 확인해 보세요. https://codepen.io/egjs/pen/xxKBVEL