Edge Computing 최신 기능 소개

엣지 컴퓨팅의 핵심 개념과 최신 기술을 실제 코드 예제로 살펴봅니다. CDN, 서버리스 엣지 함수, 실시간 데이터 처리 등을 다룹니다.

---

---

들어가며

이 글에서는 Edge Computing 최신 기능 소개에 대해 상세히 알아보겠습니다. 총 10가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. 엣지_함수_기본_구조
2. 지역_기반_라우팅
3. 캐시_제어_전략
4. A/B_테스트_구현
5. 요청_재작성_및_프록시
6. 보안_헤더_추가
7. 실시간_로그_수집
8. Web_Workers_활용
9. 동적_이미지_최적화
10. API_속도_제한

---

1. 엣지 함수 기본 구조

개요

엣지 컴퓨팅의 가장 기본이 되는 서버리스 엣지 함수입니다. 사용자와 가까운 위치에서 빠르게 실행됩니다.

코드 예제

export default async function handler(request) {
  const url = new URL(request.url);
  const name = url.searchParams.get('name') || 'Guest';

  return new Response(`Hello, ${name}!`, {
    headers: { 'Content-Type': 'text/plain' }
  });
}

설명

URL 파라미터를 읽어 개인화된 응답을 반환하는 간단한 엣지 함수입니다. CDN 엣지 서버에서 실행되어 지연시간이 매우 짧습니다.

---

2. 지역 기반 라우팅

개요

사용자의 지역 정보를 감지하여 최적화된 콘텐츠를 제공합니다. 엣지에서 지역별 맞춤 서비스가 가능합니다.

코드 예제

export default async function handler(request) {
  const country = request.headers.get('cf-ipcountry');
  const language = country === 'KR' ? 'ko' : 'en';

  return Response.json({
    country,
    language,
    message: language === 'ko' ? '환영합니다!' : 'Welcome!'
  });
}

설명

CloudFlare 헤더를 이용해 사용자 국가를 파악하고, 해당 지역에 맞는 언어로 응답합니다. 별도의 백엔드 서버 없이 엣지에서 처리됩니다.

---

3. 캐시 제어 전략

개요

엣지에서 동적 캐싱을 구현하여 성능을 극대화합니다. 캐시 히트율을 높여 서버 부하를 줄입니다.

코드 예제

export default async function handler(request) {
  const cache = caches.default;
  let response = await cache.match(request);

  if (!response) {
    response = await fetch('https://api.example.com/data');
    await cache.put(request, response.clone());
  }
  return response;
}

설명

캐시에 데이터가 있으면 즉시 반환하고, 없으면 원본 서버에서 가져와 캐시에 저장합니다. 엣지 캐싱으로 응답 속도가 획기적으로 개선됩니다.

---

4. A/B 테스트 구현

개요

엣지에서 사용자를 그룹별로 분리하여 A/B 테스트를 수행합니다. 백엔드 수정 없이 실험이 가능합니다.

코드 예제

export default async function handler(request) {
  const userId = request.headers.get('user-id') || 'anonymous';
  const variant = parseInt(userId, 36) % 2 === 0 ? 'A' : 'B';

  return Response.json({
    variant,
    feature: variant === 'A' ? 'old-ui' : 'new-ui'
  });
}

설명

사용자 ID를 기반으로 A/B 그룹을 결정하고, 각 그룹에 다른 기능을 제공합니다. 엣지에서 즉시 분기 처리되어 지연이 없습니다.

---

5. 요청 재작성 및 프록시

개요

엣지에서 요청 URL을 동적으로 변경하거나 다른 서버로 프록시합니다. 유연한 라우팅이 가능합니다.

코드 예제

export default async function handler(request) {
  const url = new URL(request.url);

  if (url.pathname.startsWith('/api/v2')) {
    url.hostname = 'new-api.example.com';
    return fetch(url, request);
  }
  return fetch(request);
}

설명

/api/v2 경로 요청을 새로운 API 서버로 자동 프록시합니다. DNS 변경이나 클라이언트 수정 없이 엣지에서 트래픽을 제어할 수 있습니다.

---

6. 보안 헤더 추가

개요

엣지에서 보안 관련 HTTP 헤더를 자동으로 추가하여 웹 애플리케이션을 보호합니다.

코드 예제

export default async function handler(request) {
  const response = await fetch(request);
  const newResponse = new Response(response.body, response);

  newResponse.headers.set('X-Content-Type-Options', 'nosniff');
  newResponse.headers.set('X-Frame-Options', 'DENY');
  newResponse.headers.set('X-XSS-Protection', '1; mode=block');
  return newResponse;
}

설명

원본 응답에 보안 헤더를 추가하여 XSS, 클릭재킹 등의 공격을 방어합니다. 모든 응답에 일관된 보안 정책을 적용할 수 있습니다.

---

7. 실시간 로그 수집

개요

엣지에서 발생하는 이벤트를 실시간으로 수집하고 분석 서버로 전송합니다.

코드 예제

export default async function handler(request) {
  const startTime = Date.now();
  const response = await fetch(request);
  const duration = Date.now() - startTime;

  await fetch('https://analytics.example.com/log', {
    method: 'POST',
    body: JSON.stringify({ url: request.url, duration })
  });
  return response;
}

설명

요청 처리 시간을 측정하고 분석 서버로 로그를 전송합니다. 엣지에서 직접 모니터링하여 실시간 성능 분석이 가능합니다.

---

8. Web Workers 활용

개요

엣지 환경에서 Web Workers API를 사용하여 CPU 집약적인 작업을 처리합니다.

코드 예제

export default async function handler(request) {
  const data = await request.json();

  const hash = await crypto.subtle.digest(
    'SHA-256',
    new TextEncoder().encode(data.message)
  );

  return Response.json({ hash: Array.from(new Uint8Array(hash)) });
}

설명

Web Crypto API를 사용해 메시지의 해시값을 계산합니다. 암호화 작업을 엣지에서 처리하여 메인 서버의 부담을 줄입니다.

---

9. 동적 이미지 최적화

개요

사용자 디바이스와 네트워크 상태에 맞춰 이미지를 엣지에서 실시간으로 최적화합니다.

코드 예제

export default async function handler(request) {
  const url = new URL(request.url);
  const width = request.headers.get('viewport-width') || '1920';
  const quality = url.searchParams.get('q') || '80';

  return fetch(`https://images.example.com/optimize`, {
    method: 'POST',
    body: JSON.stringify({ width, quality, src: url.pathname })
  });
}

설명

뷰포트 크기와 품질 파라미터를 기반으로 이미지를 최적화합니다. 모바일과 데스크톱에 각각 최적화된 이미지를 제공하여 로딩 속도를 개선합니다.

---

10. API 속도 제한

개요

엣지에서 API 요청 횟수를 제한하여 서버를 보호하고 공정한 리소스 사용을 보장합니다.

코드 예제

export default async function handler(request) {
  const ip = request.headers.get('cf-connecting-ip');
  const key = `rate_limit:${ip}`;
  const count = await KV.get(key) || 0;

  if (count > 100) return new Response('Too Many Requests', { status: 429 });
  await KV.put(key, count + 1, { expirationTtl: 60 });
  return fetch(request);
}

설명

IP 주소별로 분당 요청 횟수를 추적하고 100건을 초과하면 차단합니다. KV 스토어를 사용해 엣지에서 직접 속도 제한을 구현합니다.

---

마치며

이번 글에서는 Edge Computing 최신 기능 소개에 대해 알아보았습니다. 총 10가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#EdgeComputing #ServerlessFunction #CDN #RealTimeProcessing #WebWorker