[JavaScript] es-toolkit: 유틸리티 라이브러리

JavaScript 개발에서 자주 사용되는 함수들을 모아 간편하게 제공하는 유틸리티 라이브러리는 생산성을 높이고 코드 품질을 개선하는 데 큰 도움이 된다. es-toolkit은 JavaScript API를 활용해 높은 성능과 작은 번들 사이즈를 제공하는 유틸리티 라이브러리이다.

 

💡es-toolkit란?

---

es-toolkit은 토스에서 개발한 유틸리티 라이브러리로, 자바스크립트 개발에서 자주 사용되는 다양한 유틸리티 함수를 보완하고 확장하였다.

 

이 라이브러리는 lodash와 같은 기존의 유틸리티 라이브러리와 비슷한 기능을 제공하지만, 최신 JavaScript API를 활용하여 최대 97% 더 작은 번들 사이즈와 2~3배 빠른 속도를 보유하고 있다. 특히 TypeScript 타입을 내장하고 있어, 타입 안전성을 중요시하는 프로젝트에서 더욱 유용하게 사용된다.

 

es-toolkit의 장점

개발자는 보통 많은 반복적인 작업을 수행하게 되는데, 이러한 작업을 es-toolkit이 간편하게 해결할 수 있도록 도와준다. 예를 들어, 데이터 필터링, 객체 병합, 배열 변환 등의 자주 사용되는 기능에 es-toolkit을 활용하면 코드가 간결해지고 가독성이 높아지므로 유지보수에 용이하다.

 

es-toolkit이 많은 개발자에게 인기를 얻은 이유는 복잡한 로직을 줄이고, 함수와 메서드 이름이 직관적이라는 점도 있지만, 프로젝트에 부담을 주지 않고, 웹 애플리케이션 로딩 속도를 개선할 수 있다는 점도 크다. 또한, 최신 JavaScript API를 활용해 대부분의 함수가 다른 라이브러리보다 빠르게 동작하며, 이외에도 내장된 타입 정의 덕분에 TypeScript 프로젝트에서 타입 검사를 자동으로 수행할 수 있다.

 

https://github.com/toss/es-toolkit

GitHub - toss/es-toolkit: A modern JavaScript utility library that's 2-3 times faster and up to 97% smaller—a major upgrade to

 

https://es-toolkit.slash.page/ko/intro.html

es-toolkit 소개 | es-toolkit

es-toolkit에 대한 자세한 내용은 GitHub와 공식 문서를 참고한다.

 

💡es-toolkit 설치하기

---

Node.js 환경 설치

es-toolkit을 사용하기 위해 먼저 프로젝트에 설치하도록 하자.

Node.js 버전 18 이상을 지원하며, 아래 명령어를 통해 설치할 수 있다.

# npm
npm install es-toolkit

# yarn
yarn add es-toolkit

# pnpm
pnpm add es-toolkit

import { sum } from 'es-toolkit';
console.log(sum([1, 2, 3])); // 6

 

Deno 환경 설치

Deno에서도 사용할 수 있으며, 설치할 때 추가적인 Scope가 필요하다.

deno add @es-toolkit/es-toolkit

import { sum } from '@es-toolkit/es-toolkit';
console.log(sum([1, 2, 3])); // 6

 

브라우저 환경 사용

브라우저에서는 CDN을 통해 가져올 수 있다.

jsdelivr 또는 unpkg와 같은 CDN을 사용하면, ES-Toolkit의 모든 함수를 글로벌 변수로 접근할 수 있다.

<script src="https://cdn.jsdelivr.net/npm/es-toolkit"></script>
<script>
  var arr = _.chunk([1, 2, 3, 4, 5, 6], 3);
</script>

 

ESM을 지원하는 브라우저에서는 esm.sh를 통해 importmap으로도 가져올 수 있다.

<script type="importmap">
  {
    "imports": {
      "es-toolkit": "https://esm.sh/es-toolkit"
    }
  }
</script>
<script type="module">
  import { chunk } from 'es-toolkit';
  console.log(chunk([1, 2, 3, 4, 5, 6], 3)); // [[1, 2, 3], [4, 5, 6]]
</script>

 

💡es-toolkit의 사용

---

es-toolkit의 배열, 함수, 숫자, 객체, 문자열 등 데이터 구조와 작업을 효율적으로 처리할 수 있는 기능을 알아보도록 하자.

 

배열 관련 유틸리티

es-toolkit에는 배열 내 중복 요소를 제거하거나, 배열 간의 차집합을 구할 수 있는 유틸리티 함수가 포함되어 있다. 이는 목록에서 중복된 ID를 제거하거나, 특정 조건에 맞지 않는 데이터를 필터링할 때 유용하게 사용할 수 있다.

 

uniq

uniq는 배열의 중복 요소를 제거하여 유일한 값만 남긴 배열을 반환한다.

import { uniq } from 'es-toolkit';

const numbers = [1, 2, 2, 3, 4, 4];
console.log(uniq(numbers)); // [1, 2, 3, 4]

 

difference

difference는 두 배열 간의 차집합을 구하여 첫 번째 배열에만 존재하는 요소들을 반환한다.

import { difference } from 'es-toolkit';

const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];
console.log(difference(arr1, arr2)); // [1]

 

함수 관련 유틸리티

빈번하게 발생하는 함수 호출을 제어하거나 제한하는 유틸리티 함수는 이벤트 핸들링이나 입력 필드와 같은 사용자 인터페이스 요소의 성능을 개선하는 데 유용하게 사용할 수 있다.

 

debounce

debounce는 짧은 시간 내에 여러 번 호출되는 함수 중 마지막 호출만 실행되도록 제어한다.
일정 시간 동안 추가 호출이 없을 때만 실행되기 때문에 입력 필드나 검색 필터 등에 적합하며, 검색 창에 입력할 때 불필요한 API 호출을 방지할 수 있다.

import { debounce } from 'es-toolkit';

const log = () => console.log('Called!');
const debouncedLog = debounce(log, 1000);

window.addEventListener('resize', debouncedLog); // 창 크기 조절 시 마지막 호출만 실행

 

throttle

throttle은 지정된 시간 동안 함수를 한 번만 실행되도록 제한한다.
스크롤 이벤트나 마우스 이동 이벤트와 같은 고빈도 이벤트에 유용하며, 애니메이션의 성능을 최적화할 수 있다.

import { throttle } from 'es-toolkit';

const log = () => console.log('Called!');
const throttledLog = throttle(log, 1000);

window.addEventListener('scroll', throttledLog); // 스크롤 시 1초에 한 번만 호출

 

숫자 관련 유틸리티

수치 계산에 필요한 다양한 유틸리티 함수는 코드의 가독성을 높이고 간결하게 만들어준다.

 

sum

sum은 배열의 모든 숫자를 더한 값을 반환한다.

import { sum } from 'es-toolkit';

console.log(sum([1, 2, 3])); // 6

 

round

round는 숫자를 지정한 소수점 자릿수로 반올림하여 반환한다.

import { round } from 'es-toolkit';

console.log(round(1.2345, 2)); // 1.23

 

객체 관련 유틸리티

객체에서 특정 키만 포함하거나 제외하는 작업은 데이터를 선택적으로 다룰 때 유용하다.

pick과 omit을 사용하면 사용자 정보에서 개인정보를 제외하거나 필수 데이터만 선택적으로 전송할 수 있다.

 

pick

객체에서 특정 키만 포함한 새로운 객체를 반환한다.

import { pick } from 'es-toolkit';

const obj = { a: 1, b: 2, c: 3 };
console.log(pick(obj, ['a', 'c'])); // { a: 1, c: 3 }

 

omit

객체에서 특정 키를 제외한 새로운 객체를 반환한다.

import { omit } from 'es-toolkit';

const obj = { a: 1, b: 2, c: 3 };
console.log(omit(obj, ['b'])); // { a: 1, c: 3 }

 

타입 가드

타입 가드를 사용하면 특정 값이 null이나 undefined가 아닌지 확인하고 오류를 방지하여 코드 안정성을 높일 수 있다.

 

isNotNil

isNotNil은 값이 null이나 undefined가 아닌지 확인하는 함수이다.

import { isNotNil } from 'es-toolkit';

const value = "Hello";
console.log(isNotNil(value)); // true

 

Promise 유틸리티

비동기 작업의 흐름을 관리하기 위해 Promise 유틸리티를 활용할 수 있다.

 

delay

delay는 지정된 시간만큼 대기한 후에 Promise를 반환하여 비동기 흐름을 지연시키는 함수이다.

API 호출 전에 로딩 시간을 연출하거나, 사용자의 인터랙션을 일정 시간 지연시킬 때 사용할 수 있다.

import { delay } from 'es-toolkit';

async function fetchData() {
  await delay(2000);
  console.log("2초 후 실행됨");
}

fetchData();

 

문자열 유틸리티

문자열을 특정 형식으로 변환할 수 있는 유틸리티는 데이터 표준화 및 포맷에 유용하다.

 

snakeCase

snakeCase는 문자열을 스네이크 케이스 형식으로 변환한다.

데이터베이스 필드나 파일명에 일관된 네이밍 규칙을 적용할 때 유용하게 사용할 수 있다.

import { snakeCase } from 'es-toolkit';

console.log(snakeCase("Hello World")); // "hello_world"

 

참고 자료

es-toolkit 소개, es-toolkit, 2024.11.03.

JavaScript 개발자를 위한 웹 기술, MDN contributors, 2023.10.25.