Node.js 기초: 함수 표현식
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
개발 툴
대상자
- 대상자: React, Node.js, Vanilla JS 개발자
- 난이도: 중급~고급 (함수 표현식, 클로저, 고차함수 활용)
핵심 요약
- 함수 표현식의 핵심 활용:
- React
에서 동적 렌더링을 위한 chartRenderers
객체 사용 (예: const Renderer = chartRenderers[type]
)
- Vanilla JS
에서 이벤트 핸들러에 맥락 전달 (예: handleClick(message) => () => alert(message)
)
- 성능 및 안정성 고려사항:
- 클로저 사용 시 메모리 누수 방지 (timeoutId
관리), debounce
패턴으로 비용 효율적 실행
- this
바인딩 오류 방지 (화살표 함수 또는 .bind()
사용)
- 보안 및 테스트:
- 사용자 입력 기반 함수 생성 시 DOMPurify
, zod
로 입력 검증
- Jest
, Vitest
로 단위/통합 테스트, Playwright
로 브라우저 환경 테스트
섹션별 세부 요약
1. 동적 렌더링 (React 예제)
chartRenderers
객체를 통해 차트 타입에 따른 렌더링 함수 동적으로 할당const Renderer = chartRenderers[type]
로 조건 분기 대체 (Open/Closed Principle 준수)React
컴포넌트에서Renderer
를props
로 전달하여 재사용성 향상
2. 이벤트 핸들러와 맥락 전달 (Vanilla JS)
createButton
함수에서handleClick
을message
로 캡처하여 이벤트 핸들러 전달- 클로저를 통해 외부 변수(
message
) 참조 (예:handleClick('Hello, world!')
) addEventListener
로 이벤트 리스너 등록
3. 고차함수를 통한 데이터 변환
applyMiddleware
함수로 미들웨어 체인 구성 (예:logger
미들웨어 적용)reduceRight
로 미들웨어 순서 반전하여 실행action
객체를next
함수로 전달하여 상태 처리
4. 디바운스/트로트팅 패턴
debounce
함수로 반복 호출 시 실행 간격 제어 (예:setTimeout
활용)expensiveOperation
함수를debouncedOperation
으로 감싸서 호출delay
인자로 실행 지연 시간 설정 (예:300ms
)
5. 보안 및 성능 고려사항
eval()
또는new Function()
사용 시DOMPurify
,zod
로 입력 검증core-js
,Babel
을 통해 ES6+ 기능을 IE11 호환polyfill.io
로 브라우저 기반 동적 폴리필 로딩
6. 테스트 및 디버깅
Jest
,Vitest
로 단위 테스트 (예:describe
,test
활용)Playwright
,Cypress
로 브라우저 환경 통합 테스트console.time
,console.timeEnd
로 성능 측정 및DevTools
로 메모리 누수 분석
결론
- 핵심 팁:
- TypeScript
로 타입 안전성 강화 (예: const Renderer: Function = chartRenderers[type]
)
- lodash.memoize
로 비용 많은 함수 호출 캐싱
- this
바인딩 오류 방지를 위해 화살표 함수 또는 .bind()
사용
- console.table
로 복잡한 데이터 구조 시각화 및 source maps
으로 트랜스파일 코드 디버깅