프론트엔드 프레임워크를 위한 엣지 컴퓨팅

프론트엔드 개발에서 엣지 컴퓨팅의 부상

웹 개발 환경은 성능과 사용자 경험을 중심으로 끊임없이 진화하고 있습니다. 애플리케이션이 점점 더 복잡해지고 전 세계적으로 분산됨에 따라, 전통적인 클라이언트-서버 아키텍처는 사용자가 이제 요구하는 초저지연 및 응답성을 제공하는 데 종종 어려움을 겪습니다. 이러한 과제는 "엣지 컴퓨팅"을 틈새 개념에서 주류 솔루션으로, 특히 프론트엔드 개발자들에게 추진했습니다. 계산을 사용자에게 더 가깝게 – 네트워크의 "엣지"로 – 이동함으로써 네트워크 지연 시간을 크게 단축하고, 로딩 시간을 개선하며, 동적이고 개인화된 경험을 가능하게 할 수 있습니다. 이 기술적 변화는 프론트엔드 애플리케이션을 구축하고 배포하는 방식에 깊은 영향을 미치고 있습니다.

오늘날, 프론트엔드 프레임워크에서 엣지 컴퓨팅을 쉽게 사용할 수 있도록 하는 데 두 가지 주요 플레이어가 선두에 나서고 있습니다: Vercel 엣지 함수와 Cloudflare Workers. 두 플랫폼 모두 분산된 방식으로 서버 측 로직을 실행할 수 있는 강력한 플랫폼을 제공하며, 현대 웹 경험의 성능과 확장성에 직접적으로 영향을 미칩니다. 이 글에서는 이러한 플랫폼의 복잡성을 탐구하고, 기본 원리를 분석하며, 프론트엔드 프로젝트를 향상시키는 방법을 보여주는 실용적인 예제를 제공할 것입니다.

엣지 컴퓨팅 개념 이해하기

Vercel 엣지 함수와 Cloudflare Workers의 구체적인 내용으로 들어가기 전에, 프론트엔드 프레임워크를 위한 엣지 컴퓨팅에 관련된 핵심 개념에 대해 공통된 이해를 구축해 봅시다.

엣지 컴퓨팅: 이 패러다임은 중앙 집중식 데이터 센터에 의존하는 대신, 데이터 소스와 사용자에게 더 가까운 계산 및 데이터 스토리지를 이동시킵니다. 웹 애플리케이션의 경우, 이는 사용자와 물리적으로 더 가까운 지리적으로 분산된 Points of Presence (PoPs)에서 코드를 실행하는 것을 의미합니다.
서버리스 함수/서비스로서의 함수 (FaaS): Vercel 엣지 함수와 Cloudflare Workers 모두 서버리스 함수의 범주에 속합니다. 이 모델을 통해 개발자는 기본 서버 인프라를 관리할 필요 없이 작고 단일 목적의 함수를 작성하고 배포할 수 있습니다. 클라우드 제공업체는 서버를 자동으로 확장, 프로비저닝 및 유지 관리합니다.
글로벌 분산 네트워크: 두 플랫폼 모두 전 세계의 방대한 PoPs 네트워크를 활용합니다. 사용자가 리소스를 요청하면, 요청은 가장 가까운 사용 가능한 PoP로 라우팅되며, 여기서 엣지 함수가 실행될 수 있습니다.
콜드 스타트 vs. 웜 스타트: 엣지 함수가 비활성 기간 후 호출될 때, 환경이 프로비저닝되는 동안 약간의 지연이 포함되는 "콜드 스타트"를 경험할 수 있습니다. 짧은 시간 내에 후속 호출은 환경이 이미 활성화되어 있기 때문에 더 빠른 "웜 스타트"로 이어지는 경우가 많습니다. 엣지 플랫폼은 콜드 스타트 시간을 최소화하기 위해 노력합니다.
WebAssembly (Wasm) 및 JavaScript V8 엔진: Cloudflare Workers는 Chrome 및 Node.js를 구동하는 것과 동일한 엔진인 V8 JavaScript 엔진을 적극적으로 활용하며 WebAssembly를 실행하여 높은 성능과 격리를 제공할 수 있습니다. Vercel의 엣지 함수 또한 V8 기반 런타임 환경을 사용합니다.

Vercel 엣지 함수: 프레임워크와의 원활한 통합

Vercel은 특히 Next.js와 같은 프레임워크의 프론트엔드 배포와 동의어가 되었습니다. Vercel 엣지 함수는 기존 프론트엔드 코드베이스와 긴밀하게 통합된 엣지에서 서버 측 코드를 실행할 수 있도록 하여 이 원활한 경험을 확장합니다.

Vercel 엣지 함수 작동 방식

Vercel 엣지 함수는 고도로 최적화된 V8 기반 런타임(Cloudflare Workers와 유사)을 기반으로 구축되며 Vercel의 엣지 네트워크 전반에 걸쳐 전 세계적으로 배포됩니다. 이 함수들은 저지연, 고동시성 작업을 위해 설계되었으며 특히 다음과 같은 작업에 적합합니다.

인증 및 권한 부여: 페이지가 렌더링되기 전에 사용자 자격 증명 또는 권한을 확인하기 위해 요청을 가로챕니다.
A/B 테스팅 및 기능 플래그: 사용자 속성 또는 실험 그룹에 따라 동적으로 다른 콘텐츠 또는 기능을 제공합니다.
지리 정보 기반 개인화: 사용자의 지리적 위치에 따라 콘텐츠를 수정하거나 사용자를 리디렉션합니다.
다시 작성 및 리디렉션: 개선된 SEO 또는 사용자 지정 라우팅을 위해 엣지에서 URL 다시 작성 또는 리디렉션을 수행합니다.
데이터 가져오기 및 API 프록시: 백엔드 API에서 데이터를 가져와 클라이언트로 보내기 전에 변환하여 엣지 측 프록시로 효과적으로 작동합니다.

Vercel 엣지 함수 구현

Vercel 엣지 함수는 일반적으로 프론트엔드 코드와 함께 배치됩니다. Next.js의 경우, pages 디렉토리 내의 _middleware.ts (또는 .js) 파일에 정의하거나 app 디렉토리의 새로운 middleware.ts를 사용할 수 있습니다.

A/B 테스팅을 위한 엣지 함수 예제를 살펴보겠습니다:

// pages/_middleware.ts (또는 app/middleware.ts)
import { NextRequest, NextResponse } from 'next/server';

export const config = {
  matcher: ['/'], // 이 미들웨어를 루트 경로에 적용
};

export function middleware(req: NextRequest) {
  const url = req.nextUrl;
  const userAgent = req.headers.get('user-agent') || '';

  // 쿠키 또는 무작위 숫자를 기반으로 한 간단한 A/B 테스트
  let variant = req.cookies.get('variant') || Math.random() < 0.5 ? 'A' : 'B';

  const response = NextResponse.rewrite(new URL(`/variant-${variant}`, url));
  response.cookies.set('variant', variant); // 일관된 경험을 위해 쿠키 설정

  return response;
}

이 예제에서 엣지 함수는 루트 경로에 대한 요청을 가로챕니다. variant 쿠키가 있는지 확인하고, 없으면 사용자에게 'A' 또는 'B'를 무작위로 할당합니다. 그런 다음 URL을 /variant-A 또는 /variant-B로 다시 작성하여 전체 클라이언트 측 리디렉션 없이 다른 페이지를 효과적으로 제공합니다. response.cookies.set은 사용자가 후속 방문 시에도 동일한 변형을 일관되게 볼 수 있도록 합니다.

배포: Vercel에 Next.js 애플리케이션을 배포할 때, _middleware.ts 또는 middleware.ts 파일은 자동으로 엣지 함수로 배포됩니다. 일반적으로 미들웨어 자체를 정의하는 것 외에 특별한 구성은 필요하지 않습니다.

Cloudflare Workers: 강력하고 유연한 엣지 로직

Cloudflare Workers는 엣지에서 서버리스 함수를 실행할 수 있는 고성능 및 유연한 플랫폼을 제공합니다. 간단한 리디렉션부터 복잡한 API 게이트웨이, 심지어 풀스택 애플리케이션에 이르기까지 광범위한 사용 사례에 대해 설계되었습니다.

Cloudflare Workers 작동 방식

Cloudflare Workers는 Cloudflare의 글로벌 네트워크에서 실행되며, 격리되고 경량화된 V8 isolates를 활용합니다. 이러한 isolates는 시작 및 실행 속도가 매우 빨라 높은 부하에서도 최소한의 콜드 스타트 시간을 제공합니다. Cloudflare의 광범위한 네트워크는 Worker 코드가 사용자에게 지리적으로 가깝게 실행되도록 하여 탁월한 성능을 제공합니다.

Cloudflare Workers는 다음과 같은 시나리오에서 뛰어납니다:

API 게이트웨이: 내부 API를 프록시하고, 인증, 속도 제한 및 캐싱을 엣지에서 추가합니다.
맞춤형 캐싱 로직: 표준 CDN 기능을 넘어선 매우 세분화된 캐싱 규칙을 구현합니다.
실시간 이미지 최적화: 장치 및 네트워크 조건에 따라 이미지를 크기 조정하거나 최적화합니다.
서버 측 렌더링 (SSR) 강화: 엣지에서 콘텐츠를 사전 렌더링하거나 기존 SSR 응답을 보강합니다.
개인화 및 현지화: 사용자 위치, 언어 또는 기타 속성에 따라 맞춤형 콘텐츠를 제공합니다.
엣지 AI/ML: 실시간 예측을 위해 엣지에서 경량 머신러닝 모델을 실행합니다.

Cloudflare Workers 구현

Cloudflare Workers는 일반적으로 JavaScript 또는 TypeScript로 작성되며 독립적으로 또는 더 큰 Cloudflare 프로젝트의 일부로 배포됩니다. Cloudflare 대시보드, wrangler CLI 또는 API를 통해 관리할 수 있습니다.

다음은 지리 정보에 따라 동적으로 데이터를 가져오는 Cloudflare Worker 예제입니다:

// worker.ts
interface Env {
  // Worker에서 액세스 가능한 환경 변수를 정의합니다.
  API_ENDPOINT: string;
}

export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    const url = new URL(request.url);

    // Cloudflare의 요청 헤더에서 사용자의 국가를 가져옵니다.
    const country = request.headers.get('cf-ipcountry');

    let dynamicPath = '/default-data';
    if (country === 'US') {
      dynamicPath = '/us-data';
    } else if (country === 'EU') {
      dynamicPath = '/eu-data';
    }

    // API URL 구성
    const apiUrl = `${env.API_ENDPOINT}${dynamicPath}`;

    try {
      const apiResponse = await fetch(apiUrl);
      const data = await apiResponse.json();

      return new Response(JSON.stringify({
        message: `Hello from ${country}!`, 
        data: data,
      }), {
        headers: { 'Content-Type': 'application/json' },
      });
    } catch (error) {
      console.error('Error fetching data:', error);
      return new Response('Error fetching personalized data', { status: 500 });
    }
  },
};

배포: 일반적으로 Cloudflare wrangler CLI를 사용하여 이 Worker를 배포합니다.

wrangler 설치: npm install -g wrangler
인증: wrangler login

wrangler.toml 생성:

name = "my-geolocation-worker"
main = "src/worker.ts" # 또는 worker.js
compatibility_date = "2023-01-01"

[vars]
API_ENDPOINT = "https://my-backend.com/api"

배포: wrangler deploy

배포 후, 특정 요청(예: api.yourdomain.com/personalized-data)을 이 Worker로 라우팅하도록 Cloudflare 대시보드에서 라우팅을 구성해야 합니다.

헤드 투 헤드 비교: Vercel 엣지 함수 vs. Cloudflare Workers

두 플랫폼 모두 계산을 엣지로 가져오는 것을 목표로 하지만, 고유한 철학과 강점을 가지고 있습니다.

Vercel 엣지 함수

장점:

Vercel 프론트엔드 프레임워크와의 깊은 통합: Next.js, Nuxt.js, SvelteKit 등에서 사용이 매우 용이합니다. 미들웨어 파일은 자동으로 엣지 함수로 취급됩니다.
개발자 경험: 친숙한 API (Next.js NextRequest/NextResponse), 뛰어난 로컬 개발 지원 및 빠른 배포.
모노레포 친화적: 엣지 함수는 프론트엔드 코드와 함께 상주하여 풀스택 Next.js 애플리케이션의 프로젝트 구조 및 배포를 단순화합니다.
자동 확장 및 관리: Vercel은 모든 인프라를 처리하며 수요에 따라 자동으로 확장합니다.

단점:

Vercel 생태계에 대한 엄격한 결합: 주로 Vercel 호스팅 프로젝트와 함께 작동하도록 설계되었습니다.
제한된 사용자 정의 (Workers 대비): 강력하지만, API는 프론트엔드 관련 미들웨어 작업에 맞춰져 있어 더 많은 의견이 반영되었습니다.
덜 독립적인 유연성: 임의의 백엔드 서비스를 위한 범용 서버리스 플랫폼으로 의도되지 않았습니다.

Cloudflare Workers