🛠️ 처음부터 만드는 Chunk — 배열을 작은 단위로 나누기

언제 필요할까?

100개의 아이템을 한 번에 처리하면 성능이 떨어질 때, API가 한 번에 10개씩만 허용할 때, 그리드 화면에 3개씩 행을 나누어야 할 때... 큰 배열을 작은 청크로 나누어야 하는 상황들이 있습니다.
```javascript
const items = Array.from({length: 100}, (_, i) => i);
// [0, 1, 2, ... 99]
const chunked = chunk(items, 10);
// [[0,1,2,...,9], [10,11,...,19], ...]
```

구현하기

기본 버전:
```javascript
function chunk(arr, size) {
const result = [];
for (let i = 0; i < arr.length; i += size) {
result.push(arr.slice(i, i + size));
}
return result;
}
```
한 줄 버전 (reduce 활용):
```javascript
const chunk = (arr, size) =>
arr.reduce((acc, _, i) => (
i % size === 0 ? [...acc, arr.slice(i, i + size)] : acc
), []);
```

실전 활용

배치 처리 (예: 대량 API 요청):
```javascript
async function processBatch(items) {
const chunks = chunk(items, 10);
for (const batch of chunks) {
await Promise.all(batch.map(item => api.save(item)));
}
}
```
그리드 렌더링 (React):
```javascript
function Gallery({images}) {
const rows = chunk(images, 3);
return rows.map(row => (

{row.map(img =>

)}

));
}
```

주의사항

size가 0이면 무한 루프 발생 → `Math.max(size, 1)` 처리

마지막 청크는 size보다 작을 수 있음 (정상 동작)

대용량 배열은 slice가 메모리 복사 → generator 버전 고려

💬 0

👁 0 views