Edge Computing with Cloudflare Workers & Deno · 강의

프런트엔드 프레임워크 통합

React, Vue 또는 Svelte와 같은 인기 프런트엔드 프레임워크를 Workers와 통합하여 동적인 풀스택 앱을 구축합니다.

프런트엔드 프레임워크 통합은(는) CoddyKit의 무료 Edge Computing with Cloudflare Workers & Deno 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Edge Computing with Cloudflare Workers & Deno 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Edge Computing with Cloudflare Workers & Deno 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Full-Stack Edge with Frontend Apps

Welcome to integrating frontend frameworks with Cloudflare Workers! This lesson explores how popular frameworks like React, Vue, or Svelte can work seamlessly with Workers to create dynamic, full-stack applications at the edge.

By combining them, you get the best of both worlds: a rich user interface and a super-fast, globally distributed backend.

How Frontends Talk to Workers

At its core, a frontend framework (running in the user's browser) communicates with a Cloudflare Worker using standard HTTP requests. The Worker acts as a lightweight API backend.

The frontend sends requests (GET, POST, etc.) to the Worker's URL.
The Worker processes the request and returns a response, often JSON data.
The frontend then updates the UI based on this data.

Worker: A Simple JSON API

Let's see a basic Worker that acts as a simple API, returning a JSON message. Your frontend application can easily fetch data from this endpoint.

Try running this example to see the Worker's response.

export default {
  async fetch(request, env, ctx) {
    const data = {
      message: "Hello from the Edge!",
      timestamp: new Date().toISOString()
    };

    return new Response(JSON.stringify(data), {
      headers: { 'Content-Type': 'application/json' }
    });
  }
}

Frontend: Making a GET Request

From your frontend app (e.g., a React component), you'd use the browser's fetch API or a library like Axios to call your Worker. Here's how it generally looks (conceptual code, not runnable on its own):

fetch('/api/hello')
  .then(response => response.json())
  .then(data => console.log(data));

The frontend sends a GET request to the Worker, which then sends back the JSON data.

Worker: Handling POST Requests

Frontends often send data to the backend using POST requests, for example, when submitting a form or creating a new item. The Worker can read the request body to get this data.

Run this Worker and imagine your frontend sending a POST request with {"name": "Coddy"} in the body.

export default {
  async fetch(request, env, ctx) {
    if (request.method === 'POST') {
      try {
        const body = await request.json();
        const name = body.name || 'Guest';
        return new Response(JSON.stringify({ greeting: `Hello, ${name}!` }), {
          headers: { 'Content-Type': 'application/json' }
        });
      } catch (error) {
        return new Response('Invalid JSON body', { status: 400 });
      }
    }
    return new Response('Please send a POST request.', { status: 405 });
  }
}

Understanding CORS for Edge APIs

CORS (Cross-Origin Resource Sharing) is a security feature that browsers use. If your frontend (e.g., myapp.com) tries to fetch data from a Worker on a different origin (e.g., myworker.workers.dev), the browser will block it unless the Worker explicitly allows it.

You need to add specific HTTP headers to your Worker's responses to enable CORS.

Implementing Basic CORS in a Worker

To allow your frontend to communicate with your Worker, include CORS headers in your Worker's responses. The Access-Control-Allow-Origin header is crucial.

This example shows how to add basic CORS headers, allowing requests from any origin (*). For production, specify your frontend's exact domain.

export default {
  async fetch(request, env, ctx) {
    const headers = {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*', // Allow requests from any origin
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type'
    };

    if (request.method === 'OPTIONS') {
      // Handle preflight requests for CORS
      return new Response(null, { headers });
    }

    const data = { message: 'CORS enabled response!' };
    return new Response(JSON.stringify(data), { headers });
  }
}

Environment Variables & Secrets

Your Workers might need access to API keys or other sensitive configuration. Use environment variables (often called 'bindings' in Workers) to securely provide these.

Never embed secrets directly in your code or expose them to the frontend. Workers can access these securely at runtime, acting as a proxy for sensitive operations.

Define variables in wrangler.toml.
Access them via the env object in your Worker.

Best Practices for Integration

To build robust full-stack edge applications, consider these best practices:

API Versioning: Use paths like /api/v1/users for easier updates.
Clear Endpoint Naming: Make your Worker routes intuitive (e.g., /products, /orders).
Error Handling: Return meaningful HTTP status codes (400, 401, 404, 500) and JSON error messages from your Worker.
Authentication: Workers can handle authentication tokens (JWTs) and manage user sessions for your frontend.

Quick Check: Worker Integration

When integrating a frontend framework with a Cloudflare Worker, what is the primary mechanism for the frontend to retrieve dynamic data from the Worker?

Recap: Full-Stack Edge Integration

In this lesson, we explored how to integrate frontend frameworks with Cloudflare Workers. We learned that Workers act as powerful, globally distributed API backends that your frontend apps can communicate with via standard HTTP requests.

Key takeaways:

Workers serve JSON data and handle various request methods.
CORS headers are essential for cross-origin communication.
Best practices include clear API design and secure secret management.

This integration allows you to build fast, scalable full-stack applications at the edge!

자주 묻는 질문

“프런트엔드 프레임워크 통합” 강의는 무료인가요?

네 — “프런트엔드 프레임워크 통합” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Edge Computing with Cloudflare Workers & Deno 강의 전체를 잠금 해제할 수 있습니다. Edge Computing with Cloudflare Workers & Deno 강의에는 총 4개의 강의가 포함되어 있습니다.

“프런트엔드 프레임워크 통합”에서 뭘 배우나요?

React, Vue 또는 Svelte와 같은 인기 프런트엔드 프레임워크를 Workers와 통합하여 동적인 풀스택 앱을 구축합니다. 브라우저에서 직접 실행하는 실습 코드로 Edge Computing with Cloudflare Workers & Deno을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Edge Computing with Cloudflare Workers & Deno을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Edge Computing with Cloudflare Workers & Deno은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“프런트엔드 프레임워크 통합” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Edge Computing with Cloudflare Workers & Deno 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Edge Computing with Cloudflare Workers & Deno 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Edge Computing with Cloudflare Workers & Deno(으)로 돌아가기