Underscore.js 튜토리얼: JavaScript 배열 및 객체 작업 간소화

1 1. Introduction
- 1.1 Why Underscore.js Stands Out
- 1.2 What You’ll Learn in This Article
2 2. What Is Underscore.js?
3 3. Installation
4 4. 기본 사용법
5 5. 고급 사용법
6 6. 객체 연산
7 7. 함수 연산
8 8. 유틸리티 함수
9 9. 결론
- 9.1 핵심 정리
- 9.2 최종 생각
10 자주 묻는 질문 (FAQ)

1. Introduction

JavaScript는 웹 개발에 필수적인 프로그래밍 언어이지만, 배열과 객체를 다루다 보면 코드가 복잡해지기 쉽습니다. 특히 데이터 필터링·변환과 같은 작업은 더 깔끔하고 효율적인 문법이 필요합니다.

그때 등장하는 것이 JavaScript 라이브러리 Underscore.js입니다. 이 라이브러리를 사용하면 복잡한 데이터 작업도 간단하고 가독성 있게 작성할 수 있습니다.

Why Underscore.js Stands Out

More concise code

일반 JavaScript에서 자주 장황해지는 작업을 Underscore.js만으로 몇 줄만에 표현할 수 있습니다.

A rich set of convenient functions

배열 연산, 객체 처리, 함수 제어 등 다양한 기능을 제공합니다.

Lightweight and flexible

필요한 부분만 골라 사용할 수 있어 성능에 미치는 영향을 최소화할 수 있습니다.

What You’ll Learn in This Article

How to set up Underscore.js
Core functions and practical examples
Real-world use cases that help in development

2. What Is Underscore.js?

Overview of Underscore.js

Underscore.js는 JavaScript에서 데이터 조작을 더 쉽게 해 주는 경량 라이브러리입니다. 배열·객체 작업을 간소화하도록 설계된 다양한 편리한 함수를 제공하며, 흔히 JavaScript 유틸리티 툴킷이라고 불립니다.

JavaScript의 기본 기능은 강력하지만, 코드가 길어지고 가독성이 떨어지기 쉽습니다. Underscore.js를 사용하면 이러한 문제를 해결하고, 더 간단하고 유지보수가 쉬운 코드를 작성할 수 있습니다.

Key Features

A wide variety of utility functions

배열 연산, 객체 연산, 함수 제어 등 다양한 기능을 제공합니다.

Simple, readable code

전통적인 순수 JavaScript 패턴에 비해 보일러플레이트를 줄이고 가독성을 높여 줍니다.

No dependencies

다른 라이브러리에 의존하지 않으므로 다양한 환경에서 유연하게 사용할 수 있습니다.

1Lightweight and fast**

작은 크기와 낮은 오버헤드 덕분에 최신 웹 애플리케이션에서도 잘 어울립니다.

Underscore.js vs. Lodash

자주 비교되는 라이브러리는 Lodash입니다. Lodash는 Underscore.js를 기반으로 기능을 확장했으며, 다음과 같은 차이점이 있습니다.

Aspect	Underscore.js	Lodash
Functionality	Includes many core utility functions	Offers an even broader feature set
Modular usage	Partially supported	Fully modularized
Performance	Fast	Fast and further optimized

어떤 것을 선택할지는 프로젝트 요구사항에 따라 다르지만, 간단하고 가벼운 라이브러리를 원한다면 Underscore.js가 좋은 선택이 될 수 있습니다.

How Can Underscore.js Help?

Underscore.js는 특히 다음과 같은 상황에서 유용합니다.

Array data manipulation

필터링·맵핑과 같은 작업을 간결하게 구현할 수 있습니다.

Object manipulation

키·값을 쉽게 조회하고 요소를 병합하는 등 다양한 객체 작업을 지원합니다.

Function control

“한 번만 실행”이나 지연 실행과 같은 제어 로직을 손쉽게 구현할 수 있습니다.

Leveraging utility helpers

정렬, 무작위 추출, 간단한 템플릿 엔진 등 다양한 유틸리티 기능을 활용할 수 있습니다.

3. Installation

이 섹션에서는 Underscore.js를 프로젝트에 추가하는 구체적인 방법을 단계별로 안내합니다. CDN 방식과 파일을 직접 다운로드하여 로컬에 설치하는 방법을 모두 배웁니다.

1. Using a CDN

CDN(Content Delivery Network)은 인터넷에 호스팅된 파일을 링크만으로 손쉽게 사용할 수 있는 편리한 방법입니다. HTML 파일의 <head> 태그 안이나 <body> 태그 끝에 다음 코드를 추가하면 Underscore.js를 사용할 수 있습니다.

Example: Adding to an HTML File

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Underscore.jsの導入</title>
  <!-- Underscore.jsのCDNリンク -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
</head>
<body>
  <h1>Underscore.jsのテスト</h1>
  <script>
    // 動作確認コード
    const data = [1, 2, 3, 4, 5];
    const evenNumbers = _.filter(data, function(num) {
      return num % 2 === 0;
    });
    console.log(evenNumbers); // [2, 4]
  </script>
</body>
</html>

브라우저에서 이 파일을 열면 개발자 도구 콘솔에 짝수만 표시되는 것을 확인할 수 있습니다.

2. npm 또는 yarn으로 설치하기

npm 또는 yarn을 사용하면 로컬 환경이나 Node.js 프로젝트에서 Underscore.js를 사용할 수 있습니다.

npm으로 설치하기

npm install underscore

yarn으로 설치하기

yarn add underscore

JavaScript 파일에서의 예시 import

import _ from 'underscore';

const data = [10, 20, 30, 40];
const result = _.map(data, (num) => num * 2);
console.log(result); // [20, 40, 60, 80]

3. 파일을 다운로드하여 로컬에서 사용하기

공식 웹사이트(underscorejs.org)에 방문합니다.
“Download” 섹션에서 최신 JavaScript 파일을 다운로드합니다.
다운로드한 파일을 프로젝트 내 적절한 폴더(예: js/)에 넣습니다.
HTML 파일에 script 태그를 사용해 연결합니다.
```
<script src="js/underscore-min.js"></script>
```

4. 모듈 번들러를 사용할 때

Webpack이나 Parcel과 같은 모듈 번들러를 사용한다면 Underscore.js를 쉽게 통합할 수 있습니다.

예시: Webpack 설정

npm으로 설치합니다.
```
npm install underscore
```

JavaScript 파일에서 import합니다.
```
import _ from 'underscore';
```

필요에 따라 번들링하고 프로젝트에서 사용합니다.

문제 해결

1. “Uncaught ReferenceError: _ is not defined” 오류가 나타날 경우

Underscore.js가 올바르게 로드되지 않았을 수 있습니다. CDN 링크나 import 경로를 다시 확인하세요.

2. npm 설치 후 오류가 발생할 경우

Node.js와 npm을 최신 버전으로 업데이트하세요.

4. 기본 사용법

이 섹션에서는 Underscore.js의 핵심 함수들을 실용적인 예시와 함께 소개합니다. 이 함수들은 배열과 객체를 효율적으로 다루는 데 매우 유용합니다.

1. 배열 순회 – `_.each()`

_.each()는 배열이나 객체를 순회하는 데 사용되는 함수입니다.

예시

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

// Output each element to the console
_.each(numbers, function(num) {
  console.log(num);
});

출력:

핵심 포인트:

배열뿐만 아니라 객체에도 사용할 수 있습니다.
콜백은 요소, 인덱스, 전체 컬렉션을 인자로 받습니다.

2. 배열 매핑 – `_.map()`

_.map()은 배열의 각 요소에 함수를 적용하고 새로운 배열을 반환합니다.

예시

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

// Double each element
const doubled = _.map(numbers, function(num) {
  return num * 2;
});

console.log(doubled);

출력:

[2, 4, 6, 8, 10]

3. 첫 번째 일치 요소 찾기 – `_.find()`

_.find()는 주어진 조건에 일치하는 첫 번째 요소를 반환합니다.

예시

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

// Find the first element greater than or equal to 3
const result = _.find(numbers, function(num) {
  return num >= 3;
});

console.log(result);

출력:

4. 모든 일치 요소 필터링 – `_.filter()`

_.filter()는 조건에 일치하는 모든 요소를 추출해 새로운 배열로 반환합니다.

예시

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

// Extract only even numbers
const evens = _.filter(numbers, function(num) {
  return num % 2 === 0;
});

console.log(evens);

출력:

[2, 4]

5. 배열 요소 섞기 – `_.shuffle()`

_.shuffle() 배열의 요소들을 무작위로 재배열합니다.

예시

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

// Randomly shuffle the array
const shuffled = _.shuffle(numbers);

console.log(shuffled);

출력: (예시)

[3, 5, 1, 4, 2]

6. 중복 요소 제거 – `_.uniq()`

_.uniq() 배열에서 중복 값을 제거합니다.

예시

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

// Remove duplicate elements
const uniqueNumbers = _.uniq(numbers);

console.log(uniqueNumbers);

출력:

[1, 2, 3, 4, 5]

요약

지금까지 Underscore.js의 기본 함수들을 실용적인 예제와 함께 다루었습니다.

_.each() 요소를 반복할 때 사용
_.map() 새로운 배열을 만들 때 사용
_.find()와 _.filter() 일치하는 요소를 추출할 때 사용
_.shuffle() 요소를 무작위화할 때 사용
_.uniq() 중복을 제거할 때 사용

5. 고급 사용법

이 섹션에서는 더 고급의 Underscore.js 함수와 실용적인 사용 사례를 살펴봅니다. 이러한 기능은 보다 정교한 데이터 조작 및 분석을 가능하게 합니다.

1. 배열 정렬 – `_.sortBy()`

_.sortBy() 지정된 키 또는 조건에 따라 배열 요소를 정렬합니다.

예시

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 }
];

// Sort by age
const sortedUsers = _.sortBy(users, 'age');

console.log(sortedUsers);

출력:

[
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 25 },
  { name: 'Charlie', age: 30 }
]

2. 배열 그룹화 – `_.groupBy()`

_.groupBy() 지정된 키 또는 조건에 따라 배열 요소를 그룹화합니다.

예시

const numbers = [1.1, 2.3, 2.4, 3.5, 4.7];

// Group by integer part
const grouped = _.groupBy(numbers, function(num) {
  return Math.floor(num);
});

console.log(grouped);

출력:

{
  1: [1.1],
  2: [2.3, 2.4],
  3: [3.5],
  4: [4.7]
}

3. 데이터 집계 – `_.countBy()`

_.countBy() 데이터 집계에 편리한 함수입니다.

예시

const words = ['apple', 'banana', 'apricot', 'blueberry'];

// Count by first letter
const counts = _.countBy(words, function(word) {
  return word[0];
});

console.log(counts);

출력:

{
  a: 2,
  b: 2
}

요약

이 섹션에서는 더 고급 Underscore.js 사용법을 다루었습니다.

_.sortBy() 배열 정렬에 사용
_.groupBy()와 _.countBy() 데이터 분류 및 집계에 사용

6. 객체 연산

이 섹션에서는 Underscore.js에서 객체를 다루는 유용한 함수들을 소개합니다. 이러한 함수들은 객체 속성과 값을 효율적으로 처리하는 데 도움을 줍니다.

1. 객체 키와 값 가져오기

키 가져오기 – `_.keys()`

const person = { name: 'Alice', age: 25, city: 'Tokyo' };

const keys = _.keys(person);
console.log(keys);

출력:

['name', 'age', 'city']

값 가져오기 – `_.values()`

const values = _.values(person);
console.log(values);

출력:

['Alice', 25, 'Tokyo']

2. 객체 복제 – `_.clone()`

_.clone() 객체의 얕은 복사본을 생성합니다.

const original = { name: 'Alice', age: 25 };
const clone = _.clone(original);

clone.age = 30; // Modify the clone
console.log(original.age); // 25
console.log(clone.age);    // 30

요약

이 섹션에서는 Underscore.js를 사용해 객체를 다루는 방법을 설명했습니다.

7. 함수 연산

이 섹션에서는 Underscore.js를 사용해 함수를 효과적으로 다루는 방법을 설명합니다. 이러한 기능은 실행 제어와 성능 향상에 유용합니다.

1. 함수 바인딩 – `_.bind()`

_.bind() 함수가 실행될 때 특정 객체를 this에 바인딩합니다.

예시

const person = {
  name: 'Alice',
  greet: function(greeting) {
    return `${greeting}, my name is ${this.name}`;
  }
};

const boundGreet = _.bind(person.greet, person);

console.log(boundGreet('Hello')); // Hello, my name is Alice

2. 지연 실행 – `_.delay()`

_.delay() 은 지정된 시간만큼 함수를 지연시켜 실행합니다.

예시

_.delay(function(message) {
  console.log(message);
}, 2000, 'Displayed after 2 seconds');

출력: (2초 후)

Displayed after 2 seconds

3. 한 번만 실행 – `_.once()`

_.once() 은 함수가 한 번만 실행되도록 보장합니다. 이후 호출은 무시됩니다.

예시

const initialize = _.once(function() {
  console.log('Initialization complete');
});

initialize(); // Executed
initialize(); // Ignored

4. 메모이제이션 – `_.memoize()`

_.memoize() 은 함수의 결과를 캐시하고, 동일한 인수로 다시 호출될 때 재계산을 건너뜁니다.

예시

const factorial = _.memoize(function(n) {
  return n <= 1 ? 1 : n * factorial(n - 1);
});

console.log(factorial(5)); // Calculated
console.log(factorial(5)); // Retrieved from cache

5. 함수 실행 제한 – `_.throttle()`

_.throttle() 은 함수가 실행될 수 있는 빈도를 제한합니다.

예시

const log = _.throttle(function() {
  console.log('Processing...');
}, 2000);

// Simulate continuous events
setInterval(log, 500); // Executes only once every 2 seconds

요약

이 섹션에서는 Underscore.js의 함수 관련 유틸리티를 살펴보았습니다.

_.bind() – this 컨텍스트 고정
_.delay() – 지연 실행
_.once() – 한 번만 실행
_.memoize() – 결과 캐시
_.throttle() – 실행 빈도 최적화

8. 유틸리티 함수

이 섹션에서는 Underscore.js가 제공하는 편리한 유틸리티 함수를 소개합니다. 이 함수들은 데이터 처리, 무작위 생성, 템플릿 작성 등 다양한 상황에서 유용합니다.

1. 무작위 숫자 생성 – `_.random()`

_.random() 은 지정된 범위 내에서 정수 또는 부동소수점 무작위 숫자를 생성합니다.

예시

console.log(_.random(1, 10)); // Integer
console.log(_.random(1, 10, true)); // Floating-point

2. 빈 값 확인 – `_.isEmpty()`

_.isEmpty() 은 배열, 객체 또는 문자열이 비어 있는지 확인합니다.

예시

console.log(_.isEmpty([]));            // true
console.log(_.isEmpty({}));            // true
console.log(_.isEmpty(''));            // true
console.log(_.isEmpty([1, 2, 3]));     // false

3. 템플릿 만들기 – `_.template()`

_.template() 은 문자열 템플릿을 생성하는 데 사용됩니다.

예시

const template = _.template('Hello, <%= name %>!');
console.log(template({ name: 'Alice' }));

출력:

Hello, Alice!

요약

이 섹션에서는 Underscore.js의 유틸리티 함수를 다루었습니다.

_.random() – 무작위 숫자 생성
_.isEmpty() – 데이터 상태 확인
_.template() – 간단한 템플릿 작성

9. 결론

이 글에서는 Underscore.js를 기본 사용법부터 고급 기술까지 다루었습니다. 이 라이브러리는 JavaScript에서 데이터 조작을 단순화하고 효율적이며 유지보수 가능한 코드를 작성하는 데 매우 유용합니다.

핵심 정리

기본 사용법 – 배열 및 객체 조작을 위한 핵심 함수 학습
고급 사용법 – 그룹화, 정렬, 집계 탐색
함수 유틸리티 – 실행 제어와 메모이제이션 다룸
유틸리티 헬퍼 – 무작위 생성 및 템플릿 소개

최종 생각

Underscore.js는 JavaScript 개발을 보다 효율적이고 접근하기 쉽게 만들어 주는 강력한 도구입니다. 이 글을 참고 자료로 활용하고 직접 프로젝트에 적용해 보세요. 지속적인 실습을 통해 실력을 더욱 향상시킬 수 있습니다.

자주 묻는 질문 (FAQ)

Q1: Underscore.js를 무료로 사용할 수 있나요?

A: 네. Underscore.js는 MIT 라이선스로 배포되며, 상업용 프로젝트를 포함한 모든 용도에 무료로 사용할 수 있습니다.

Q2: Underscore.js와 Lodash의 차이점은 무엇인가요?

A: Underscore.js는 간단하고 가벼운 유틸리티 라이브러리입니다. Lodash는 Underscore.js를 기반으로 추가 기능, 성능 최적화 및 보다 강력한 모듈화를 제공합니다. 프로젝트 요구 사항에 따라 선택하세요.

Q3: 최신 JavaScript(ES6+)에서는 Underscore.js가 불필요하지 않나요?

A: ES6+는 배열 및 객체 작업을 위한 많은 네이티브 기능을 제공하지만, Underscore.js는 특히 레거시 프로젝트에서 브라우저 호환성과 간결한 문법을 위해 여전히 유용합니다.

Q4: 어떤 유형의 프로젝트에 Underscore.js가 적합한가요?

A: 소규모에서 중간 규모 프로젝트 및 코드 단순성이 중요한 애플리케이션에 적합합니다. 무거운 의존성 없이 가벼운 유틸리티가 필요할 때 특히 유용합니다.

Q5: Underscore.js를 어떻게 설치하나요?

A: 다음 방법 중 하나를 사용하여 설치할 수 있습니다.

CDN을 통해 추가:

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>

npm으로 설치:
```
npm install underscore
```

yarn으로 설치:
```
yarn add underscore
```

환경에 가장 적합한 방법을 선택하세요.

Q6: 공식 문서는 어디에서 찾을 수 있나요?

A: 공식 웹사이트에서 확인할 수 있습니다.
Underscore.js 공식 웹사이트

Q7: Underscore.js를 대규모 프로젝트에서 사용할 수 있나요?

A: 네, 사용할 수 있습니다. 다만 대규모 프로젝트에서는 모듈 구조와 추가 최적화가 제공되는 Lodash를 권장하는 경우가 많습니다. Underscore.js는 여전히 가벼운 사용 사례에 적합합니다.

Q8: 함수 실행 제어를 위한 대안이 있나요?

A: 네. 현대 JavaScript에서는 setTimeout(), setInterval(), Promise, async/await와 같은 대안을 제공합니다. 그러나 _.throttle() 및 _.debounce()와 같은 Underscore.js 함수는 더 깔끔하고 간결한 구현을 가능하게 합니다.

Q9: Underscore.js 사용 시 주의할 점이 있나요?

네이티브 JavaScript 기능으로 충분할 경우 불필요한 의존성을 피하세요.
보안 위험을 최소화하기 위해 버전을 최신 상태로 유지하세요.
프로젝트 규모에 따라 Lodash로 마이그레이션을 고려하세요.

Q10: Underscore.js를 템플릿 엔진으로 추천하나요?

A: _.template()은 간단한 사용 사례에 편리하지만, 보다 복잡한 템플릿이 필요할 경우 Handlebars.js나 EJS와 같은 전용 라이브러리를 사용하는 것이 좋습니다.

Underscore.js 튜토리얼: JavaScript 배열 및 객체 작업 간소화

1. Introduction

Why Underscore.js Stands Out

What You’ll Learn in This Article

2. What Is Underscore.js?

Overview of Underscore.js

Key Features

Underscore.js vs. Lodash

How Can Underscore.js Help?

3. Installation

1. Using a CDN

Example: Adding to an HTML File

2. npm 또는 yarn으로 설치하기

npm으로 설치하기

yarn으로 설치하기

JavaScript 파일에서의 예시 import

3. 파일을 다운로드하여 로컬에서 사용하기

4. 모듈 번들러를 사용할 때

예시: Webpack 설정

문제 해결

4. 기본 사용법

1. 배열 순회 – _.each()

예시

2. 배열 매핑 – _.map()

예시

3. 첫 번째 일치 요소 찾기 – _.find()

예시

4. 모든 일치 요소 필터링 – _.filter()

예시

5. 배열 요소 섞기 – _.shuffle()

예시

6. 중복 요소 제거 – _.uniq()

예시

요약

5. 고급 사용법

1. 배열 정렬 – _.sortBy()

예시

2. 배열 그룹화 – _.groupBy()

예시

3. 데이터 집계 – _.countBy()

예시

요약

6. 객체 연산

1. 객체 키와 값 가져오기

키 가져오기 – _.keys()

값 가져오기 – _.values()

2. 객체 복제 – _.clone()

요약

7. 함수 연산

1. 함수 바인딩 – _.bind()

예시

2. 지연 실행 – _.delay()

예시

3. 한 번만 실행 – _.once()

예시

4. 메모이제이션 – _.memoize()

예시

5. 함수 실행 제한 – _.throttle()

예시

요약

8. 유틸리티 함수

1. 무작위 숫자 생성 – _.random()

예시

2. 빈 값 확인 – _.isEmpty()

예시

3. 템플릿 만들기 – _.template()

예시

요약

9. 결론

핵심 정리

최종 생각

자주 묻는 질문 (FAQ)

Q1: Underscore.js를 무료로 사용할 수 있나요?

Q2: Underscore.js와 Lodash의 차이점은 무엇인가요?

Q3: 최신 JavaScript(ES6+)에서는 Underscore.js가 불필요하지 않나요?

Q4: 어떤 유형의 프로젝트에 Underscore.js가 적합한가요?

Q5: Underscore.js를 어떻게 설치하나요?

Q6: 공식 문서는 어디에서 찾을 수 있나요?

Q7: Underscore.js를 대규모 프로젝트에서 사용할 수 있나요?

Q8: 함수 실행 제어를 위한 대안이 있나요?

1. 배열 순회 – `_.each()`

2. 배열 매핑 – `_.map()`

3. 첫 번째 일치 요소 찾기 – `_.find()`

4. 모든 일치 요소 필터링 – `_.filter()`

5. 배열 요소 섞기 – `_.shuffle()`

6. 중복 요소 제거 – `_.uniq()`

1. 배열 정렬 – `_.sortBy()`

2. 배열 그룹화 – `_.groupBy()`

3. 데이터 집계 – `_.countBy()`

키 가져오기 – `_.keys()`

값 가져오기 – `_.values()`

2. 객체 복제 – `_.clone()`

1. 함수 바인딩 – `_.bind()`

2. 지연 실행 – `_.delay()`

3. 한 번만 실행 – `_.once()`

4. 메모이제이션 – `_.memoize()`

5. 함수 실행 제한 – `_.throttle()`

1. 무작위 숫자 생성 – `_.random()`

2. 빈 값 확인 – `_.isEmpty()`

3. 템플릿 만들기 – `_.template()`