작성: Rishi Purwar✏️
한동안 JavaScript 애플리케이션을 구축해 왔다면 아마도 Lodash와 같은 유틸리티 라이브러리를 사용해 보았을 것입니다. 이러한 라이브러리에는 JavaScript 코딩을 더욱 쉽고 효율적으로 만들어주는 유용한 기능이 포함되어 있습니다. 그러나 프로젝트가 성장하고 더 많은 유틸리티 기능을 사용하기 시작하면 번들 크기도 증가하기 시작한다는 것을 알 수 있습니다.
Lodash와 같은 무거운 라이브러리에 의존할 때 특히 그렇습니다. 이로 인해 더 나은 대안이 있는지 궁금해집니다.
여기서 es-toolkit이 등장합니다. 가볍고 견고한 TypeScript 지원 기능을 갖춘 최신 고성능 JavaScript 유틸리티 라이브러리로, Lodash와 같은 인기 라이브러리에 대한 훌륭한 대안이 됩니다.
es-toolkit과 Lodash의 주요 비교는 다음과 같습니다.
이러한 차이점에 대해 자세히 알아보고 JavaScript 프로젝트에서 es-toolkit을 어떻게 사용할 수 있는지 살펴보겠습니다.
es-toolkit이 어떤 기능을 제공하는지 간단히 살펴보겠습니다.
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을 사용하는 것이 얼마나 쉬운지 몇 가지 예를 살펴보겠습니다. 이 섹션에서는 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은 최신 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을 사용해 보시고 아래 의견을 통해 귀하의 경험을 공유해 주시기 바랍니다. 즐거운 코딩하세요!
프런트엔드가 점점 더 복잡해지고 있다는 것은 의심의 여지가 없습니다. 새로운 JavaScript 라이브러리와 기타 종속성을 앱에 추가하면 사용자가 알 수 없는 문제에 직면하지 않도록 더 많은 가시성을 확보해야 합니다.
LogRocket은 JavaScript 오류가 마치 자신의 브라우저에서 발생한 것처럼 재생하여 버그에 더욱 효과적으로 대응할 수 있게 해주는 프런트엔드 애플리케이션 모니터링 솔루션입니다.
LogRocket은 프레임워크에 관계없이 모든 앱에서 완벽하게 작동하며 Redux, Vuex 및 @ngrx/store에서 추가 컨텍스트를 기록하는 플러그인이 있습니다. 문제가 발생한 이유를 추측하는 대신 문제가 발생했을 때 애플리케이션의 상태를 집계하고 보고할 수 있습니다. LogRocket은 또한 앱 성능을 모니터링하여 클라이언트 CPU 로드, 클라이언트 메모리 사용량 등과 같은 측정항목을 보고합니다.
자신있게 구축하세요. 무료로 모니터링을 시작해 보세요.
위 내용은 Lodash 대안인 es-toolkit의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
