정집사의 개발로그

이번 14편에서는 브라우저 환경에서 다양한 디바이스와 해상도에 대응할 수 있도록 돕는 반응형 UI 구현을 위한 자바스크립트 유틸 함수들을 정리합니다. 뷰포트, 리사이즈 감지, 미디어 쿼리, 브레이크포인트 관리 등에 활용됩니다.✅ 1. getViewportSize (현재 뷰포트 크기 가져오기)📌 화면의 가시 영역 너비와 높이function getViewportSize() { return { width: window.innerWidth, height: window.innerHeight };}📌 활용 예시레이아웃 변경 조건 감지모바일/태블릿/PC 구분 기준✅ 2. onResize (창 크기 변경 이벤트 리스너)📌 리사이즈 이벤트에 콜백 등록function onResize(callback) ..

이번 13편에서는 프론트엔드 성능을 빠르게 측정하고 진단하는 데 유용한 유틸 함수들을 정리합니다. 웹 페이지의 반응 속도, 실행 시간, 프레임 드랍 등을 분석하여 개선 포인트를 찾을 수 있습니다.✅ 1. measureExecutionTime (함수 실행 시간 측정)📌 코드 블록의 실행 시간(ms) 측정function measureExecutionTime(fn) { const start = performance.now(); fn(); const end = performance.now(); return end - start;}📌 활용 예시무거운 작업 병목 분석렌더링 로직 성능 점검✅ 2. markPerformance (퍼포먼스 마킹)📌 시작-끝 마커 기반 시간 측정function markPerf..

이번 12편에서는 자바스크립트의 대표적인 고차 함수인 map, filter, reduce를 실무에서 효과적으로 활용할 수 있는 고급 유틸 함수 패턴으로 정리합니다. 단순한 예제를 넘어서 실질적인 데이터 가공과 응용 중심으로 구성했습니다.✅ 1. map 활용 심화📌 배열 객체의 속성 가공const users = [ { name: 'Alice', age: 28 }, { name: 'Bob', age: 34 }];const names = users.map(user => user.name);// 결과: ["Alice", "Bob"]📌 실무 예시데이터 API 응답에서 특정 필드만 추출UI 렌더링용 데이터 포맷 변경✅ 2. filter 활용 심화📌 조건에 맞는 데이터 필터링const products = [..

이번 11편에서는 비동기 처리와 Promise를 다룰 때 유용한 실무형 유틸 함수들을 정리합니다. 네트워크 요청, 타이머 제어, 에러 핸들링 등 비동기 작업을 보다 효율적으로 관리할 수 있습니다.✅ 1. delay (비동기 지연)📌 주어진 시간(ms) 만큼 지연시키는 Promisefunction delay(ms) { return new Promise(resolve => setTimeout(resolve, ms));}📌 활용 예시테스트용 대기 시간 삽입네트워크 요청 간 지연✅ 2. retry (재시도 로직)📌 실패 시 최대 N번까지 재시도async function retry(fn, retries = 3, delayTime = 1000) { try { return await fn(); } c..

이번 10편에서는 자바스크립트에서 함수형 프로그래밍(FP) 스타일로 활용할 수 있는 유틸 함수들을 정리합니다. 불변성(immutability), 고계함수(higher-order functions), 순수함수(pure functions) 같은 개념을 실무에 쉽게 적용할 수 있는 함수들입니다.✅ 1. compose (함수 합성)📌 여러 함수를 오른쪽에서 왼쪽으로 결합function compose(...fns) { return (arg) => fns.reduceRight((acc, fn) => fn(acc), arg);}📌 활용 예시데이터 변환 파이프라인 구성복잡한 변환 과정을 단계별로 처리✅ 2. pipe (함수 파이프라인)📌 여러 함수를 왼쪽에서 오른쪽으로 결합function pipe(...fns)..

이번 9편에서는 객체(Object)를 다룰 때 유용한 실무형 고급 유틸 함수들을 정리합니다. 데이터 변환, 키 관리, 병합 등을 효율적이고 안전하게 처리할 수 있는 방법을 다룹니다.✅ 1. deepMerge (객체 깊은 병합)📌 두 객체를 재귀적으로 병합function deepMerge(target, source) { for (const key in source) { if (source[key] instanceof Object && key in target) { Object.assign(source[key], deepMerge(target[key], source[key])); } } return { ...target, ...source };}📌 활용 예시설정 파일 병합다국어 ..

이번 8편에서는 배열을 고급스럽게 조작할 때 유용한 실무형 유틸 함수들을 정리합니다. 데이터 필터링, 변형, 탐색, 구조 변경 등을 빠르고 깔끔하게 처리할 수 있습니다.✅ 1. compact (Falsy 값 제거)📌 배열에서 false, 0, '', null, undefined, NaN 제거function compact(array) { return array.filter(Boolean);}📌 활용 예시유효 데이터만 남기기API 응답 정리✅ 2. difference (배열 차집합 구하기)📌 A에는 있지만 B에는 없는 요소 찾기function difference(arr1, arr2) { const set2 = new Set(arr2); return arr1.filter(x => !set2.has(..

이번 7편에서는 문자열을 다룰 때 강력한 도구가 되는 정규 표현식을 활용한 고급 유틸 함수들을 정리합니다. 데이터 검증, 포맷 변환, 필터링 등을 효율적으로 처리하는 데 매우 유용합니다.✅ 1. isEmail (이메일 형식 검사)📌 이메일 유효성 검사function isEmail(email) { const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return pattern.test(email);}📌 활용 예시회원 가입 폼 검증이메일 입력 필터링✅ 2. isPhoneNumber (휴대폰 번호 검사)📌 한국 휴대폰 번호 패턴function isPhoneNumber(phone) { const pattern = /^01[016789]-?\d{3,4}-?\d{4}$/; ..

이번 6편에서는 시간과 날짜를 다룰 때 유용한 고급 유틸 함수들을 정리합니다. 날짜 포맷팅, 기간 계산, 요일 변환 등 실제 프로젝트에서 자주 사용되는 기능을 쉽고 깔끔하게 구현할 수 있습니다.✅ 1. formatDate (날짜 포맷 변환)📌 YYYY-MM-DD 포맷 변환function formatDate(date) { const d = new Date(date); const year = d.getFullYear(); const month = String(d.getMonth() + 1).padStart(2, '0'); const day = String(d.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`;}📌 활용 예시게시글 등록일..

이번 5편에서는 숫자 데이터와 통계 처리를 다룰 때 유용한 고급 유틸 함수들을 정리합니다. 금액 계산, 퍼센트 변환, 평균/최댓값/최솟값 구하기 등 다양한 실무 상황에서 바로 사용할 수 있는 함수들입니다.✅ 1. formatNumber (숫자 포맷팅)📌 3자리마다 콤마 추가function formatNumber(num) { return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}📌 활용 예시금액 표시 (₩1,000,000)통계 데이터 가독성 향상✅ 2. clamp (값 범위 제한)📌 최소값과 최대값 사이로 강제 조정function clamp(value, min, max) { return Math.min(Math.max(value, min), ..