Lodash 대안인 es-toolkit

작성: Rishi Purwar✏️

한동안 JavaScript 애플리케이션을 구축해 왔다면 아마도 Lodash와 같은 유틸리티 라이브러리를 사용해 보았을 것입니다. 이러한 라이브러리에는 JavaScript 코딩을 더욱 쉽고 효율적으로 만들어주는 유용한 기능이 포함되어 있습니다. 그러나 프로젝트가 성장하고 더 많은 유틸리티 기능을 사용하기 시작하면 번들 크기도 증가하기 시작한다는 것을 알 수 있습니다.

Lodash와 같은 무거운 라이브러리에 의존할 때 특히 그렇습니다. 이로 인해 더 나은 대안이 있는지 궁금해집니다.

여기서 es-toolkit이 등장합니다. 가볍고 견고한 TypeScript 지원 기능을 갖춘 최신 고성능 JavaScript 유틸리티 라이브러리로, Lodash와 같은 인기 라이브러리에 대한 훌륭한 대안이 됩니다.

es-toolkit과 Lodash의 주요 비교는 다음과 같습니다.

• es-toolkit은 함수, 배열, 객체, 문자열, 수학, 조건자 및 약속과 같은 영역을 다루는 Lodash와 유사한 주요 유틸리티 기능을 제공합니다
• es-toolkit의 기능은 구현에 최신 JavaScript API를 사용하고 유형 검사에 TypeScript를 사용하여 추가 방어 코드의 필요성을 줄이므로 Lodash의 기능보다 빠른 경우가 많습니다.
• 성능 벤치마크에 따르면 es-toolkit 기능은 Lodash의 동급 기능을 능가하며 때로는 상당한 차이를 보이는 것으로 나타났습니다
• es-toolkit의 기능은 Lodash의 동급 기능에 비해 번들 크기가 훨씬 작아서 로드 시간이 더 빠르고 성능이 더 좋습니다
• es-toolkit은 최신 JavaScript 기능을 활용하고 Lodash에서 발견되는 상호 종속성을 피함으로써 성능 및 번들 크기 문제를 해결합니다
• es-toolkit 기능은 대부분 독립형이므로 유틸리티 기능이 상호 의존적인 경우가 많은 Lodash와 달리 불필요한 코드가 의도치 않게 포함되는 것을 방지합니다

이러한 차이점에 대해 자세히 알아보고 JavaScript 프로젝트에서 es-toolkit을 어떻게 사용할 수 있는지 살펴보겠습니다.

es-툴킷의 주요 기능

es-toolkit이 어떤 기능을 제공하는지 간단히 살펴보겠습니다.

• 함수 결과를 캐시하는 메모이제이션과 함수 호출 빈도를 제한하는 디바운스를 포함한 함수
• uniq와 같은 배열은 중복과 차이점을 필터링하여 배열 간의 차이점을 찾습니다.
• 심층 복제를 위한 cloneDeep 및 중첩된 객체를 평면 구조로 변환하는 flattenObject와 같은 JavaScript 객체 처리 도구
• 문자열을 케밥 케이스로 변환하는 kebabCase를 포함한 문자열 조작 도구
• 수학 도우미는 난수를 생성하고 반올림하기 위해 무작위를 선호합니다
• isNil과 같은 보호 함수를 입력하여 null 또는 정의되지 않은 값을 쉽게 확인할 수 있습니다
• 실행을 잠시 일시 중지하는 지연과 같은 비동기 코드 작업을 위한 유틸리티

성능 및 번들 크기 비교

es-toolkit의 장점을 제대로 이해하기 위해 Lodash의 성능과 번들 크기를 비교해 보겠습니다.

성능

es-toolkit의 기능은 구현에 최신 JavaScript API를 사용하기 때문에 Lodash의 기능보다 빠른 경우가 많습니다. 예를 들어 es-toolkit의 생략 기능은 lodash의 생략 기능보다 약 11.8배 빠릅니다.

다음은 다양한 기능에 대한 es-toolkit과 lodash-es의 성능을 비교하는 표입니다.

Function	es-toolkit@0.0.1	lodash-es@4.17.21	Difference
omit	4,767,360 times	403,624 times	11.8×
pick	9,121,839 times	2,663,072 times	3.43×
differenceWith	9,291,897 times	4,275,222 times	2.17×
difference	10,436,101 times	5,155,631 times	2.02×
intersectionWith	8,074,722 times	3,814,479 times	2.12×
intersection	9,999,571 times	4,630,316 times	2.15×
unionBy	6,435,983 times	3,794,899 times	1.69×
union	5,059,209 times	4,771,400 times	1.06×
dropRightWhile	7,529,559 times	5,606,439 times	1.34×
groupBy	5,000,235 times	5,206,286 times	0.96×

번들 크기

번들 크기에 있어서는 es-toolkit이 정말 빛을 발합니다. 번들 크기가 작을수록 특히 느린 네트워크에서 웹 애플리케이션이 더 빠르게 로드되고 성능이 향상됩니다.

다음은 es-toolkit과 lodash-es의 일부 공통 기능에 대한 번들 크기를 비교한 것입니다.

Function	es-toolkit@0.0.1	lodash-es@4.17.21	Difference
sample	88 bytes	2,000 bytes	-95.6 percent
difference	91 bytes	3,190 bytes	-97.2 percent
sum	152 bytes	413 bytes	-63.2 percent
debounce	144 bytes	1,400 bytes	-89.7 percent
throttle	110 bytes	1,460 bytes	-92.5 percent
pick	657 bytes	3,860 bytes	-83.0 percent
zip	797 bytes	1,790 bytes	-55.5 percent

es-toolkit의 기능은 Lodash에 비해 훨씬 작습니다. 예를 들어, es-toolkit의 샘플 함수는 88바이트에 불과한 반면 Lodash의 동일한 함수는 2,000바이트로 거의 96% 더 작습니다!

JavaScript 앱에서 es-toolkit 사용

JavaScript 애플리케이션에서 es-toolkit을 사용하는 것이 얼마나 쉬운지 몇 가지 예를 살펴보겠습니다. 이 섹션에서는 es-toolkit이 디바운싱, 제한, 객체에서 특정 속성 선택, 배열에서 중복 항목 제거와 같은 일반적인 작업을 처리하는 방법을 살펴보겠습니다.

그러면 어떨까요? 작업을 더욱 쉽게 하기 위해 복제하고 즉시 실험을 시작할 수 있는 시작 코드 저장소를 GitHub에 정리했습니다. 시작하는 데 필요한 모든 것과 함께 우리가 다룰 모든 예제에 대한 HTML 및 CSS 코드를 찾을 수 있습니다. 여기에서 저장소를 확인하고 따라해보세요.

디바운스 예시

사용자가 다양한 주제에 대한 정보를 검색할 수 있는 웹사이트용 검색 기능을 구축한다고 가정해 보겠습니다.

사용자가 입력할 때마다 데이터를 가져오되 키 입력마다 요청을 보내지 않고 싶습니다. 그렇지 않으면 API 호출이 너무 많아질 수 있습니다. es-toolkit의 디바운스 기능이 유용한 곳이 바로 여기입니다.

작동 방식은 다음과 같습니다.

import { debounce } from "es-toolkit";

// a function that simulates an API call
function fetchData(query) {
  console.log(`Fetching data for: ${query}`);
}

// Using es-toolkit debounce function
const debouncedFetchData = debounce(fetchData, 1000);

document.getElementById("search-input").addEventListener("input", (event) => {
    const query = event.target.value;
    debouncedSearch(query);
});

아래 데모에서는 다섯 글자를 입력했지만 1초 동안 입력을 멈춘 후에만 fetchData 함수가 호출됩니다.

이렇게 하면 디바운스 기능을 사용하여 키를 누를 때마다 불필요한 API 요청을 방지할 수 있습니다.
 

스로틀 예시

클릭하면 더 많은 게시물을 로드하는 버튼이 웹페이지에 있다고 가정해 보겠습니다. 버튼을 너무 빨리 클릭하는 경우 여러 API 호출을 방지하려면 es-toolkit의 조절 기능을 사용할 수 있습니다. 버튼을 여러 번 클릭하더라도 설정된 간격으로만 API 호출이 발생하도록 보장합니다.

사용 방법은 다음과 같습니다.

// Throttle Example
import { throttle } from "es-toolkit";

// Function to fetch posts from an API
async function fetchPosts() {
  console.log("Fetching new posts...");
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();
  console.log("Posts fetched:", posts);
}
// Create a throttled version of fetchPosts
const throttledFetchPosts = throttle(fetchPosts, 2000);

// Set up an event listener on the button
document.getElementById("fetch-more-posts").addEventListener("click", () => {
  console.log("button clicked");
  throttledFetchPosts();
});

이 예에서는 사용자가 "Fetch More Posts" 버튼을 빠르게 클릭하더라도 아래 데모와 같이 fetchPosts 기능이 2초에 한 번만 실행됩니다.
 

예시 선택

자세한 사용자 프로필 데이터가 있지만 사용자 요약 구성 요소에 사용자 이름, 이메일, 연령과 같은 특정 속성만 표시하고 싶다고 가정해 보겠습니다. 선택 기능을 사용하면 이러한 속성을 쉽게 추출할 수 있습니다.

작동 방식을 보여주는 데모는 다음과 같습니다.

// Pick Example
import { pick } from "es-toolkit";

// dummy user data
const user = {
  id: 1,
  username: "johndoe",
  firstName: "John",
  lastName: "Doe",
  email: "john.doe@example.com",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    country: "USA",
  },
  phoneNumber: "1234-5678",
};

// Use pick to select specific properties
const pickedUser = pick(user, ["username", "email", "age"]);

console.log("pickedUser", pickedUser)

이 예에서 pick 함수는 사용자 개체에서 사용자 이름, 이메일, 연령 속성을 추출합니다. 콘솔 로그는 다음을 출력합니다:

import { debounce } from "es-toolkit";

// a function that simulates an API call
function fetchData(query) {
  console.log(`Fetching data for: ${query}`);
}

// Using es-toolkit debounce function
const debouncedFetchData = debounce(fetchData, 1000);

document.getElementById("search-input").addEventListener("input", (event) => {
    const query = event.target.value;
    debouncedSearch(query);
});

독특한 예

사용자가 태그를 추가하여 게시물을 분류할 수 있는 블로그를 운영하고 있다고 상상해 보세요. 각 태그가 한 번만 나타나도록 하고 싶습니다. 여기서 es-toolkit의 uniq 기능이 매우 유용합니다. 이는 배열에서 중복 항목을 필터링하고 고유 태그 목록을 얻는 데 도움이 됩니다.

실제 예는 다음과 같습니다.

// Throttle Example
import { throttle } from "es-toolkit";

// Function to fetch posts from an API
async function fetchPosts() {
  console.log("Fetching new posts...");
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();
  console.log("Posts fetched:", posts);
}
// Create a throttled version of fetchPosts
const throttledFetchPosts = throttle(fetchPosts, 2000);

// Set up an event listener on the button
document.getElementById("fetch-more-posts").addEventListener("click", () => {
  console.log("button clicked");
  throttledFetchPosts();
});

위 예에서 uniq 함수는 태그 배열에서 중복 항목을 제거합니다. 콘솔 로그는 다음을 출력합니다:

// Pick Example
import { pick } from "es-toolkit";

// dummy user data
const user = {
  id: 1,
  username: "johndoe",
  firstName: "John",
  lastName: "Doe",
  email: "john.doe@example.com",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    country: "USA",
  },
  phoneNumber: "1234-5678",
};

// Use pick to select specific properties
const pickedUser = pick(user, ["username", "email", "age"]);

console.log("pickedUser", pickedUser)

es-toolkit이 성능 및 번들 크기 문제를 해결하는 방법

es-toolkit이 이러한 과제를 어떻게 해결하는지 궁금하실 것입니다. 내부적으로 es-toolkit은 최신 JavaScript API를 활용하여 더 빠른 성능과 훨씬 더 작은 번들 크기를 제공합니다.

게다가 es-toolkit은 TypeScript를 사용하므로 일반적으로 런타임에 인수 유형을 확인하는 추가 방어 코드를 많이 제거하는 데 도움이 됩니다. 이렇게 하면 코드가 더 효율적으로 실행될 뿐만 아니라 작업 속도를 저하시킬 수 있는 불필요한 오버헤드도 최소화됩니다.

또 다른 주요 차이점은 Lodash 유틸리티 함수가 종종 상호 의존적이라는 것입니다. 즉, 하나의 함수를 가져오면 다른 함수도 함께 끌어올 수 있다는 의미입니다. 대조적으로, es-toolkit 기능은 대부분 독립형이므로 번들을 가볍게 유지하는 데 도움이 됩니다.

차이점을 실제로 확인하려면 webpack-bundle-analyzer를 사용하여 번들 크기를 시각화할 수 있습니다. 내가 모든 것을 설정했으므로 여러분이 해야 할 일은 메인 브랜치로 체크아웃하고 복제된 저장소의 루트에서 npm i && npm run build를 실행하는 것뿐입니다. 그러면 번들에 대한 모든 세부 정보가 포함된 페이지가 열립니다.

아래 이미지는 es-toolkit 사용 시 번들 크기를 보여줍니다. 대부분의 es-toolkit 기능은 독립형이므로 번들 크기가 더 작아지는 것을 볼 수 있습니다.

 

이제 위 예시의 import 문에서 es-toolkit을 lodash-es로 바꾸고 npm run build를 다시 실행하여 lodash-es 번들 크기를 확인해 보겠습니다.

아래 이미지는 Lodash 기능이 대부분 상호 의존적이며 하나만 가져올 때 다른 많은 유틸리티를 가져오는 것을 보여줍니다.

 

결론

es-toolkit은 특히 성능과 번들 크기가 주요 고려 사항일 때 Lodash와 같은 유틸리티 라이브러리에 대한 훌륭한 대안이 될 수 있습니다. 작은 번들 크기, 최신 JavaScript 기능 사용 및 견고한 TypeScript 지원으로 인해 개발자에게 탁월한 선택이 됩니다.

이 es-toolkit 탐색이 JavaScript 프로젝트에 도움이 되기를 바랍니다. 하지만 여기서 멈추지 마세요! 귀하의 애플리케이션에서 es-toolkit을 사용해 보시고 아래 의견을 통해 귀하의 경험을 공유해 주시기 바랍니다. 즐거운 코딩하세요!

---

성능을 향상하거나 새로운 기능을 구축하기 위해 새로운 JS 라이브러리를 추가하고 있습니까? 만약 그들이 반대로 행동한다면?

프런트엔드가 점점 더 복잡해지고 있다는 것은 의심의 여지가 없습니다. 새로운 JavaScript 라이브러리와 기타 종속성을 앱에 추가하면 사용자가 알 수 없는 문제에 직면하지 않도록 더 많은 가시성을 확보해야 합니다.

LogRocket은 JavaScript 오류가 마치 자신의 브라우저에서 발생한 것처럼 재생하여 버그에 더욱 효과적으로 대응할 수 있게 해주는 프런트엔드 애플리케이션 모니터링 솔루션입니다.

LogRocket은 프레임워크에 관계없이 모든 앱에서 완벽하게 작동하며 Redux, Vuex 및 @ngrx/store에서 추가 컨텍스트를 기록하는 플러그인이 있습니다. 문제가 발생한 이유를 추측하는 대신 문제가 발생했을 때 애플리케이션의 상태를 집계하고 보고할 수 있습니다. LogRocket은 또한 앱 성능을 모니터링하여 클라이언트 CPU 로드, 클라이언트 메모리 사용량 등과 같은 측정항목을 보고합니다.

자신있게 구축하세요. 무료로 모니터링을 시작해 보세요.

위 내용은 Lodash 대안인 es-toolkit의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!