NodeJS 기초: 사이드 이펙트

카테고리

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

서브카테고리

웹 개발

대상자

• 대상: React/Node.js 프론트엔드 및 백엔드 개발자
• 난이도: 중급 ~ 고급 (프레임워크 내부 동작 원리 및 최적화 전략 포함)

핵심 요약

• 사이드 이펙트 정의: 함수가 외부 환경과의 상호작용 (예: fetch, useState, useEffect)
• 프론트엔드 최적화: useEffect로 제어 가능, async/await 활용, 캐싱/디바운싱 적용
• 보안 고려사항: XSS 방지 (DOMPurify), CORS 정책, 인젝션 공격 방어

섹션별 세부 요약

1. **사이드 이펙트의 정의와 영향**

• JavaScript에서 외부 상태 변경 (DOM 조작, 네트워크 요청, 로깅 등)
• 비동기 처리 (setTimeout, fetch)로 인한 예측 불가능한 동작 유발
• 브라우저/Node.js의 I/O 모델 차이로 성능 최적화 전략 다름

2. **React에서의 예시: `useFetch` 훅 구현**

• useEffect로 데이터 불러오기 및 상태 관리
• fetch API 활용, async/await으로 비동기 처리 명확화
• 의존성 배열 ([url])로 불필요한 리렌더링 방지

3. **브라우저 호환성 및 폴리필**

• whatwg-fetch로 IE 호환성 확보
• typeof fetch === 'undefined' 조건으로 폴리필 로딩
• 브라우저 테스트 도구 (BrowserStack, Lighthouse) 활용 권장

4. **성능 최적화 전략**

• 캐싱: localStorage/sessionStorage 활용으로 중복 요청 줄이기
• 디바운싱/서스펜싱: URL 변경 빈도 높을 시 useEffect 제어
• Web Workers: CPU 집약적 작업은 메인 스레드 분리
• 프로파일링: console.time, Lighthouse, DevTools 프로파일러 사용

5. **보안 고려사항**

• XSS 방지: DOMPurify로 HTML 산화
• CORS 정책: Access-Control-Allow-Origin 제대로 설정
• 인젝션 방어: zod로 데이터 검증, 파라미터화된 쿼리 사용

6. **테스트 전략**

• 단위 테스트: Jest로 fetch 모킹, renderHook으로 훅 테스트
• 통합 테스트: 컴포넌트 간 상호작용 검증
• 브라우저 자동화: Playwright/Cypress로 실제 환경에서 테스트

7. **상용화 시 주의사항**

• 레이스 조건: Promise.all로 비동기 병렬 처리 관리
• 메모리 누수: useEffect에서 clearInterval/removeEventListener 명시적 해제
• 불필요한 사이드 이펙트: useEffect 내부에서 불필요한 상태 업데이트 제거

결론

• 핵심 팁: useEffect의 의존성 배열을 정확히 설정하고, fetch 캐싱/디바운싱으로 성능 최적화. 보안 위험 방지 위해 DOMPurify와 데이터 검증 라이브러리 활용. Jest/Playwright로 테스트 커버리지 확보.