노드JS 기초: 사이드 이펙트
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 대상: React, Vue, Svelte 등 프레임워크를 사용하는 웹 개발자
- 난이도: 중급~고급 (사용자 인터페이스 개발 및 상태 관리 경험 필요)
핵심 요약
- 사이드 이펙트 정의: 함수가 외부 환경과 상호작용하는 모든 행위 (예:
fetch
,useState
,useEffect
) - 관리 필요성: 비동기 처리, 상태 업데이트, 보안 취약점 유발 가능
- 핵심 도구:
useEffect
(React),fetch
API, 캐싱,DOMPurify
(보안)
섹션별 세부 요약
1. 사이드 이펙트 정의 및 예시
- 정의: 외부 환경과의 상호작용 (I/O, DOM 조작, 상태 변경 등)
- 예시:
- fetch
API 호출 (네트워크 요청)
- useEffect
로 DOM 이벤트 리스너 등록
- localStorage
데이터 저장
2. React에서의 사이드 이펙트 관리
useFetch
훅 예시:
```javascript
function useFetch
const [data, setData] = useState
const [loading, setLoading] = useState(true);
const [error, setError] = useState
useEffect(() => {
const fetchData = async () => {
setLoading(true);
try {
const response = await fetch(url);
const jsonData: T = await response.json();
setData(jsonData);
} catch (e) {
setError(e as Error);
} finally {
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, loading, error };
}
```
useEffect
역할: 사이드 이펙트의 생명주기 관리
3. 브라우저 호환성 및 최적화
fetch
호환성:
- IE 지원을 위해 whatwg-fetch
폴리필 사용
- if (typeof fetch === 'undefined')
조건식으로 동적 로딩
- 성능 최적화 전략:
- 캐싱: localStorage
또는 메모리 캐시 사용
- 디바운싱/타rottle: useEffect
의존성 배열에 debounce
적용
- Web Workers: CPU 집약적 작업 분리
4. 보안 고려사항
- XSS 방지:
DOMPurify
로 HTML 정화 - CORS 문제: 서버 설정에서 정확한 정책 적용
- 인젝션 공격:
zod
등 스키마 검증 라이브러리 사용
5. 테스트 전략
- 유닛 테스트:
```javascript
test('useFetch fetches data successfully', async () => {
(fetch as jest.Mock).mockResolvedValue({
ok: true,
json: () => Promise.resolve({ name: 'Test Product' }),
});
const { result, waitFor } = renderHook(() => useFetch('https://api.example.com/data'));
await waitFor(() => result.current.data);
expect(result.current.data).toEqual({ name: 'Test Product' });
});
```
- 통합 테스트:
Playwright
,Cypress
로 브라우저 환경에서 실제 동작 검증
결론
- 핵심 팁:
useEffect
로 사이드 이펙트를 명시적으로 관리하고,fetch
API에async/await
사용 - 보안 강화: 데이터 정화(
DOMPurify
)와 스키마 검증(zod
) 적용 - 성능 최적화: 캐싱, 디바운싱, Web Workers 활용
- 테스트 전략:
Jest
로 외부 의존성 모킹 및Playwright
로 실제 브라우저 테스트 수행