Skip to content

round option | 한국어

Jump to bottom
Jongmoon Yoon edited this page Sep 27, 2019 · 1 revision

필요성

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

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

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

1. 부동소수점 이슈를 최대한 회피할 수 있습니다.

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 옵션을 제공함으로써 부동 소수점 이슈를 사전에 대응할 수 있습니다.

2. 반올림된 값을 필요로 하는 위치마다 개별적으로 반올림 처리할 필요가 없습니다.

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

3. 일정 숫자 단위로 값을 전달 받을 수 있습니다.

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

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

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

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

  1. round 값이 0.1 인 경우, [0, 0.1, 0.2, ...., 9.8, 9.9, 10]
  2. round 값이 1 인 경우, [0, 1, 2, 3, 4, .... 9, 10]
  3. round 값이 5 인 경우, [0, 5, 10]
  4. round 값이 10 인 경우, [0, 10]

사용방법

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

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

참고: Axes API

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

Clone this wiki locally