10 JavaScript Utilities I Use in Every Single Project

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 웹 개발자: 반복적이고 복잡한 작업을 효율적으로 처리하는 데 도움

- 난이도: 중간 (기본 JavaScript 지식 필요)

핵심 요약

• 10개의 핵심 유틸리티 제공: sleep, deepClone, debounce, formatCurrency, generateId, storage, retry, validate, chunk, formatDate
• 모든 프로젝트에 적용 가능: 반복 작업 최소화, 버그 감소, 코드 일관성 유지
• 테스트 및 모듈화 예시 포함: utils.js 파일로 관리, Jest 테스트 구조 제시

섹션별 세부 요약

1. `sleep` 유틸리티

• 기능: 비동기 함수에서 지연 시간 추가
• 코드: const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
• 사용 사례: 로딩 상태 테스트, API 호출 제한

2. `deepClone` 유틸리티

• 기능: 중첩된 객체/배열 깊은 복사
• 코드: 재귀적 복사 구현 (Date, Array, Object 처리)
• 사용 사례: 참조 오류 방지, 복잡한 데이터 구조 복제

3. `debounce` 유틸리티

• 기능: 입력 이벤트 처리 시 성능 최적화
• 코드: setTimeout을 사용한 디바운스 로직
• 사용 사례: 검색 입력, API 호출 빈도 제한

4. `formatCurrency` 유틸리티

• 기능: 통화 형식 자동 변환
• 코드: Intl.NumberFormat을 활용한 지역 설정 지원
• 사용 사례: 다국어 환경에서 가격 표시

5. `generateId` 유틸리티

• 기능: 임시 ID 생성
• 코드: 랜덤 문자열 생성 로직
• 사용 사례: React 컴포넌트 키, 세션 ID 생성

6. `storage` 유틸리티

• 기능: localStorage에 유효 기간이 있는 데이터 저장
• 코드: set, get, remove 메서드 구현
• 사용 사례: API 응답 캐싱, 사용자 선호도 저장

7. `retry` 유틸리티

• 기능: 실패한 API 호출 재시도
• 코드: 지수 백오프 알고리즘 적용
• 사용 사례: 서버 일시적 오류 처리

8. `validate` 유틸리티

• 기능: 객체 검증 (필수 값, 타입, 패턴 확인)
• 코드: 스키마 기반 검증 로직
• 사용 사례: 폼 검증, API 입력 유효성 검사

9. `chunk` 유틸리티

• 기능: 배열을 일정 크기로 분할
• 코드: slice를 사용한 분할 로직
• 사용 사례: 페이징, 배치 처리

10. `formatDate` & `timeAgo` 유틸리티

• 기능: 날짜 포맷팅 및 "X분 전" 형식 변환
• 코드: toLocaleDateString, Date 계산 로직
• 사용 사례: 사용자 인터페이스 날짜 표시

결론

• 핵심 팁: utils.js 파일로 유틸리티 모듈화하고, Jest 테스트로 안정성 확보
• 추천: 반복 작업을 자동화하여 생산성을 높이고, 코드 일관성 유지
• 결론: 이 유틸리티들은 개발자에게 시간 절약과 코드 품질 향상에 기여하며, 일관된 패턴 사용이 핵심