Indexing, 숫자 대신 문자열 사용해보기

최근 프로젝트에서 항목들을 그룹화/그룹 해제하고 순서를 변경하는 기능을 구현하면서 Fractional Indexing에 대해서 알게됐다.

1. 정수 Indexing

단순하고 직관적이다.
그러나 중간에 새로운 아이템을 삽입하거나, 순서를 변경하는 경우에 뒤에 있는 모든 아이템의 index를 다시 계산해야한다.

그룹화가 추가되면 복잡성이 증가하고, 성능 이슈가 발생할 수도 있다.

Fractional Indexing

1-1 [원리]: “두 값 사이의 값을 만들어내기”

두 값 사이에 새로운 항목이 들어갈 때, 그 사이의 중간값을 인덱스로 부여하는 방식이다.

• 1, 2 사이 -> 1.5
• 1, 1.5 사이 -> 1.25

이렇게 하면 어떤 위치에 삽입하더라도 기존의 아이템들의 index를 조정할 필요가 사라진다.

1-2 구현

실제로 구현 시 소수점은 부동소수점 정밀도 (floating point precision) 권장하지 않는다. 그래서 보통 문자열을 사용하는데, 원리는 알고 있기 때문에 fractional-indexing 라이브러리를 사용하자.

https://www.npmjs.com/package/fractional-indexing

import { generateKeyBetween } from 'fractional-indexing';

const first = generateKeyBetween(null, null); // "a0"

// Insert after 1st
const second = generateKeyBetween(first, null); // "a1"

// Insert after 2nd
const third = generateKeyBetween(second, null); // "a2"

// Insert before 1st
const zeroth = generateKeyBetween(null, first); // "Zz"

// Insert in between 2nd and 3rd (midpoint)
const secondAndHalf = generateKeyBetween(second, third); // "a1V"