AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

노드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(url: string): FetchResult {

const [data, setData] = useState(null);

const [loading, setLoading] = useState(true);

const [error, setError] = useState(null);

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로 실제 브라우저 테스트 수행