개발자용 유틸성 코드 모음 - 자주 쓰는 함수들
개발을 하다 보면, 똑같은 기능을 매번 새로 구현하는 자신을 발견하곤 합니다. 날짜 포맷, 딥 클론, debounce, throttle 같은 함수는 특히 자주 쓰이죠. 이럴 때, 유용하게 재사용할 수 있는 ‘유틸성 함수들’을 모아두면 정말 큰 도움이 됩니다.
이번 글에서는 실무에서 바로 써먹을 수 있는 자바스크립트 기반의 유틸 함수들을 정리해보았습니다. 웹 프론트엔드 개발자라면 누구나 한 번쯤 써봤을 법한 함수부터, 내가 직접 만들어 쓴 함수들까지! 복사해서 바로 사용할 수 있도록 예제와 함께 설명드릴게요.
목차
📌 문자열 처리 유틸
문자열을 다루는 함수는 정말 자주 쓰이는데요, 특히 아래 두 가지는 거의 습관처럼 사용하는 함수입니다.
1. 첫 글자만 대문자로 변환하기
function capitalize(str) {
if (!str) return '';
return str[0].toUpperCase() + str.slice(1);
}
입력값이 "hello"라면 "Hello"로 바꿔주는 간단하면서도 유용한 함수입니다. 사용자 이름, 문장 제목 등에 활용하기 좋아요.
2. 문자열을 슬러그로 변환
function slugify(text) {
return text
.toLowerCase()
.trim()
.replace(/\s+/g, '-')
.replace(/[^\w\-]+/g, '')
.replace(/\-\-+/g, '-');
}
블로그 URL을 만들 때 유용한 슬러그 생성 함수입니다. 예를 들어 "나만의 블로그 제목"은 "na-man-ui-beulrogeu-jaemok"으로 바뀌게 됩니다.
📌 날짜 포맷/계산 함수
날짜 데이터를 처리할 때는 항상 포맷이나 날짜 간의 차이를 계산하는 게 핵심이죠.
1. YYYY-MM-DD 형식으로 포맷하기
function formatDate(date) {
const d = new Date(date);
return d.toISOString().split('T')[0];
}
날짜 데이터를 API에 넘기기 좋도록 YYYY-MM-DD 형식으로 정리해줍니다. 특히 서버 통신 시 유용하죠.
2. 며칠 차이 계산
function getDateDiff(start, end) {
const diff = new Date(end) - new Date(start);
return Math.floor(diff / (1000 * 60 * 60 * 24));
}
어떤 이벤트까지 남은 일수를 계산할 때 자주 씁니다. 예: D-Day 계산, 프로젝트 기간 체크 등.
📌 배열/객체 핸들링
프론트엔드에서는 객체와 배열을 다루는 일이 워낙 많기 때문에 유틸성 함수들이 필수입니다.
1. 배열 중복 제거
function uniqueArray(arr) {
return [...new Set(arr)];
}
특정 배열에서 중복을 제거하고 유니크한 값만 남기고 싶을 때 가장 간단한 방법입니다.
2. 객체 딥 클론
function deepClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
복잡한 객체를 안전하게 복제할 때 활용해요. 단점은 함수나 undefined가 누락될 수 있다는 점, 그럴 땐 lodash의 _.cloneDeep()도 고려하세요.
📌 성능 관련 (debounce/throttle)
사용자 입력을 제어하거나 스크롤 이벤트 등을 최적화할 때 쓰는 대표적인 함수들입니다.
1. Debounce 함수
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
입력창에서 키를 누를 때마다 API 요청을 보내지 않고, 일정 시간 입력이 멈춘 뒤에 한 번만 실행되게 도와줍니다.
2. Throttle 함수
function throttle(fn, limit) {
let inThrottle;
return function (...args) {
if (!inThrottle) {
fn.apply(this, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
스크롤이나 resize 이벤트처럼 자주 발생하는 작업을 일정 간격으로만 실행하게 제한합니다.
📌 내가 자주 쓰는 커스텀 함수
개인적으로 정말 자주 쓰는 커스텀 함수들이 있어요. 실무 중 이런 상황에서 종종 사용하게 됩니다.
1. async/await에서 에러 핸들링을 더 간단하게
async function to(promise) {
try {
const data = await promise;
return [null, data];
} catch (err) {
return [err, null];
}
}
예외 처리를 좀 더 깔끔하게 하고 싶을 때, try/catch 없이 결과를 분리해서 처리할 수 있어 정말 편리합니다.
2. 숫자를 통화 형식으로 포맷
function formatCurrency(value, locale = 'ko-KR', currency = 'KRW') {
return new Intl.NumberFormat(locale, {
style: 'currency',
currency
}).format(value);
}
숫자 데이터를 원화 혹은 달러 등으로 보여줘야 할 때 쓰는 함수입니다. 특히 관리자 페이지나 대시보드에 필수죠.
📌 실무에서 정말 자주 쓰는 순간들
현업에서 유틸성 함수들을 얼마나 자주 사용하는지, 말로 다 표현하기 힘들 만큼 많은 순간들이 있었어요. 그 중에서도 기억에 남는 몇 가지 경험을 소개해볼게요.
🛠 관리자 페이지 리팩토링 프로젝트
한 번은 오래된 관리자 페이지를 리뉴얼하는 프로젝트를 맡았을 때였어요. 전체 UI는 React로 이관하고, 기존 로직은 리팩토링해야 했죠. 이때 가장 먼저 했던 일 중 하나가 바로 유틸 함수 모듈화였습니다. 중복된 날짜 포맷 코드, 값 검증 함수 등을 하나의 유틸 파일로 정리하니, 개발 속도가 30%는 빨라졌어요.
📉 Debounce 하나로 API 호출 80% 절감
검색 기능을 구현할 때, 사용자가 키를 입력할 때마다 API를 호출하니 서버 부하가 심각했어요. 이때 debounce 함수를 적용하자마자, 호출 횟수가 확 줄었고 UX도 훨씬 부드러워졌습니다. 작은 함수 하나로 서비스 품질이 달라지는 걸 직접 체감한 순간이었죠.
📦 공통 유틸 라이브러리로 팀 내 코드 품질 향상
회사 내 여러 팀이 같은 서비스를 개발하고 있었기에, 각 팀마다 유사한 코드가 반복되는 상황이 많았어요. 그래서 내부 공통 라이브러리를 만들어 capitalize, formatDate, slugify 같은 기본 유틸 함수를 통합했죠. 그 결과, 코드 리뷰 시간이 줄고, 신규 입사자들도 더 빠르게 코드에 적응할 수 있었습니다.
✔ 팁: 유틸 함수는 단순히 코드 재사용을 위한 도구가 아니라, 팀워크를 향상시키는 커뮤니케이션 수단이 될 수도 있습니다.
💡 유틸 함수 잘 쓰는 실용 팁
- 공통 유틸 디렉토리 분리:
/utils또는/lib디렉토리를 프로젝트 구조에 포함시키세요. 나중에 정리할 시간이 없습니다. 처음부터 체계적으로! - 테스트 작성 습관: 유틸 함수는 대부분 순수 함수이기 때문에 테스트가 쉽습니다. Jest로 간단한 테스트 코드라도 함께 작성해보세요.
- 타입 정의로 안정성 강화: TypeScript를 사용한다면 유틸 함수에도 명확한 타입 정의를 해주세요. 재사용성이 확 올라갑니다.
- 라이브러리화 고려: 회사나 개인 프로젝트에서 자주 쓰는 함수는 아예 NPM 패키지로 만들 수도 있어요. 나만의 코드가 다른 개발자에게도 도움 될 수 있습니다.
🌿 개발자는 반복을 줄이는 사람
코드를 효율적으로 짜는 것은 단순히 빠르게 기능을 구현하는 것을 넘어서, 더 나은 개발 문화를 만드는 과정이라고 생각해요. 유틸 함수는 그 출발점이 될 수 있습니다. 반복되는 실수를 줄이고, 동료 개발자에게 신뢰를 주며, 나 자신도 좀 더 여유 있는 개발자가 될 수 있는 방법이죠.
결국 중요한 건, 작지만 강력한 도구를 잘 다루는 능력입니다. 그리고 그 시작은 유틸 함수부터예요. 오늘부터 하나씩 만들어보고, 필요할 때 꺼내 쓸 수 있도록 정리해보세요. 언젠가 당신의 유틸 함수가 누군가의 문제를 해결해줄 거예요.
📌 결론
개발을 하다 보면 작지만 자주 반복되는 작업들이 정말 많습니다. 그럴 때마다 유틸성 함수는 반복을 줄이고, 코드 품질을 유지하는 데 큰 힘이 되어줍니다.
이번 글에서 소개한 함수들은 실무에서 자주 쓰이는 대표적인 예시일 뿐입니다. 팀의 코드 스타일이나 업무 도메인에 맞춰 자신만의 유틸 함수 컬렉션을 만들어가는 것도 좋은 습관이에요.
어쩌면 지금은 별것 아닌 함수 하나일지라도, 시간이 지나면 프로젝트 전체의 효율을 바꿔놓을 수도 있거든요. 나만의 작은 개발 도구함을 만드는 것, 그게 결국 더 나은 개발자로 가는 첫걸음이 아닐까요?