lodash와 lodash-es 차이점과 번들사이즈, 자주쓰이는 문법

Lodash란?

Lodash는 자바스크립트의 유틸리티 라이브러리 중 하나로, 다양한 기능을 제공하여 코드를 간결하고 효율적으로 작성할 수 있도록 도와줍니다. 주로 배열, 객체, 함수와 관련된 다양한 작업을 수행하는데 사용됩니다.

Lodash는 2012년에 John-David Dalton에 의해 처음 만들어졌으며, 그 이후 계속해서 업데이트 및 확장되어 왔습니다.

lodash 와 lodash-es 차이

• Lodash: 기본적인 Lodash 라이브러리는 브라우저 환경이나 Node.js와 같은 환경에서 사용하기 위한 스탠다드 빌드입니다.
• Lodash-es: Lodash-es는 ECMAScript 모듈(ESM) 형식으로 제공되는 버전으로, 모듈 시스템을 활용하여 필요한 함수만 선택적으로 사용할 수 있게 해줍니다. 이는 트리 쉐이킹(Tree Shaking)과 함께 사용될 때 불필요한 코드를 제거하여 번들 크기를 최적화하는 데 도움이 됩니다.

lodash와 lodash-es의 번들 크기 차이는 모듈 시스템과 트리 쉐이킹(Tree Shaking)을 통한 최적화 여부에 따라 달라집니다. 여기서 간단하게 두 라이브러리의 차이점을 설명하고, 번들 크기 차이에 대한 일반적인 설명을 제공하겠습니다.

lodash vs. lodash-es

• lodash: CommonJS 형식의 모듈 시스템을 사용하며, 전체 라이브러리를 가져와 사용합니다. Tree Shaking을 지원하지 않기 때문에 프로젝트에서 사용하는 함수 중 실제로 필요한 것들만 사용해도 불필요한 코드까지 번들에 포함됩니다.
• lodash-es: ECMAScript 모듈(ESM) 형식으로 제공되어, 필요한 함수만 선택적으로 가져와 사용할 수 있습니다. 이는 Tree Shaking과 함께 사용될 때, 불필요한 코드를 제거하여 번들 크기를 최적화하는 데 도움이 됩니다.

번들 크기 차이

• lodash: 전체 라이브러리를 가져오기 때문에, 프로젝트에서 실제로 사용하는 함수만큼의 크기로 번들이 형성됩니다. 모든 기능을 사용하는 경우에는 번들 크기가 상대적으로 크게 나올 수 있습니다.
• lodash-es: 필요한 함수만 선택적으로 가져오기 때문에, 프로젝트에서 사용되지 않는 함수는 번들에서 제외됩니다. 이는 불필요한 코드가 번들에 포함되지 않아 번들 크기를 줄일 수 있습니다.

주의사항

• 모듈 시스템 지원: 프로젝트의 모듈 시스템에 따라 lodash 또는 lodash-es를 선택해야 합니다. 예를 들어, Node.js에서는 require('lodash')를 사용할 수 있습니다.
• 트리 쉐이킹 설정: lodash-es를 사용할 경우, 프로젝트의 빌드 도구에서 트리 쉐이킹을 올바르게 설정해야 합니다. 이를 통해 불필요한 코드를 제거하고 번들 크기를 최적화할 수 있습니다.

번들 크기는 프로젝트의 특정 상황과 사용 패턴에 따라 다르기 때문에, 실제로 사용하는 환경에서 측정하는 것이 가장 정확한 정보를 제공할 것입니다.

 

 

Lodash 특징

• 효율적인 함수 작성: Lodash는 성능에 중점을 두며 최적화된 함수를 제공하여 빠른 실행을 지원합니다.
• 다양한 기능: 배열, 객체 조작, 함수형 프로그래밍 지원, 유용한 유틸리티 함수 등 다양한 기능을 제공합니다.
• 크로스 브라우징 지원: 브라우저 간 호환성을 고려하여 구현되어 있어, 다양한 환경에서 사용이 가능합니다.
• 모듈화: Lodash는 모듈화가 잘 되어 있어 필요한 기능만 선택적으로 사용할 수 있습니다.

 

자주 쓰는 Lodash-es 문법과 예시

Lodash-es를 사용하면 필요한 함수를 편리하게 가져와 사용할 수 있으며, 자바스크립트 코드를 더욱 간결하게 작성할 수 있습니다.

• 모듈 가져오기: import _ from 'lodash-es';

아래는 유용하게 쓰일 수 있는 Lodash-es의 예시 코드 10개입니다.

1. 배열에서 중복 제거:

import _ from 'lodash-es';

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

2. 객체 배열에서 고유한 값 추출:

import _ from 'lodash-es';

const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'John' },
];

const uniqueNames = _.uniqBy(users, 'name');
console.log(uniqueNames); // [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }]

3. 배열 합치기:

import _ from 'lodash-es';

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const mergedArray = _.concat(array1, array2);
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

4. 배열 요소 정렬:

import _ from 'lodash-es';

const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3];

const sortedNumbers = _.sortBy(numbers);
console.log(sortedNumbers); // [1, 1, 2, 3, 3, 4, 5, 5, 6, 9]

5. 배열에서 특정 개수만큼 요소 추출:

import _ from 'lodash-es';

const numbers = [1, 2, 3, 4, 5];

const slicedNumbers = _.take(numbers, 3);
console.log(slicedNumbers); // [1, 2, 3]

6. 객체 속성으로 그룹화:

import _ from 'lodash-es';

const users = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  { id: 3, name: 'Bob', age: 25 },
];

const groupedByAge = _.groupBy(users, 'age');
console.log(groupedByAge);
// { '25': [{ id: 1, name: 'John', age: 25 }, { id: 3, name: 'Bob', age: 25 }],
//   '30': [{ id: 2, name: 'Jane', age: 30 }] }

7. 배열 요소 거르기:

import _ from 'lodash-es';

const numbers = [1, 2, 3, 4, 5];

const filteredNumbers = _.filter(numbers, (num) => num % 2 === 0);
console.log(filteredNumbers); // [2, 4]

8. 객체 배열에서 최댓값 찾기:

import _ from 'lodash-es';

const users = [
  { id: 1, name: 'John', score: 80 },
  { id: 2, name: 'Jane', score: 95 },
  { id: 3, name: 'Bob', score: 88 },
];

const maxScoreUser = _.maxBy(users, 'score');
console.log(maxScoreUser); // { id: 2, name: 'Jane', score: 95 }

9. 배열 요소 무작위 섞기:

import _ from 'lodash-es';

const numbers = [1, 2, 3, 4, 5];

const shuffledNumbers = _.shuffle(numbers);
console.log(shuffledNumbers); // 무작위로 섞인 배열

10. 객체 배열에서 속성 추출:

import _ from 'lodash-es';

const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' },
];

const userIds = _.map(users, 'id');
console.log(userIds); // [1, 2, 3]

이러한 Lodash-es 함수들은 코드를 더 간결하게 작성하고, 유용한 기능들을 쉽게 활용할 수 있도록 도와줍니다.