Deno TypeScript: Claude Code 활용 가이드

Deno개발をClaude Code로 효율화하기

Denoは보안ファーストなモダンランタイムです。TypeScriptをネイティブサポートし、パーミッションモデル에 의한安全な実行環境を提供します。Claude Code와組み合わせれば、Denoの独自機能も빠르게활용할 수 있습니다。

프로젝트の初期설정

> DenoでWeb앱를 생성해줘。
> Fresh프레임워크を使って、deno.jsonの설정만약て。

// deno.json
{
  "lock": false,
  "tasks": {
    "dev": "deno run -A --watch=static/,routes/ dev.ts",
    "build": "deno run -A dev.ts build",
    "start": "deno run -A main.ts",
    "test": "deno test -A --coverage=coverage",
    "lint": "deno lint",
    "fmt": "deno fmt"
  },
  "imports": {
    "$fresh/": "https://deno.land/x/[email protected]/",
    "$std/": "https://deno.land/[email protected]/",
    "preact": "https://esm.sh/[email protected]",
    "preact/": "https://esm.sh/[email protected]/"
  },
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}

パーミッションモデルの활용

Denoはデフォルトで모든アクセスを거부します。

> 파일読み取りと네트워크アクセスだけを허가した
> API서버を作って。最小権限の原則で설정して。

// server.ts
// 実行: deno run --allow-net=:8000 --allow-read=./data server.ts

import { serve } from "$std/http/server.ts";

const handler = async (req: Request): Promise<Response> => {
  const url = new URL(req.url);

  if (url.pathname === "/api/config") {
    const data = await Deno.readTextFile("./data/config.json");
    return new Response(data, {
      headers: { "content-type": "application/json" },
    });
  }

  if (url.pathname === "/api/items") {
    const dir = Deno.readDir("./data/items");
    const items = [];
    for await (const entry of dir) {
      if (entry.isFile && entry.name.endsWith(".json")) {
        const content = await Deno.readTextFile(
          `./data/items/${entry.name}`
        );
        items.push(JSON.parse(content));
      }
    }
    return Response.json(items);
  }

  return new Response("Not Found", { status: 404 });
};

serve(handler, { port: 8000 });

Freshでアイランド아키텍처

> Freshのアイランド컴포넌트でカウンターを作って。
> 서버サイドと클라이언트サイドの分離を意識して。

// routes/index.tsx
import Counter from "../islands/Counter.tsx";

export default function Home() {
  return (
    <div class="max-w-screen-md mx-auto p-4">
      <h1 class="text-4xl font-bold">Deno Fresh App</h1>
      <Counter start={0} />
    </div>
  );
}

// islands/Counter.tsx
import { useSignal } from "@preact/signals";

interface CounterProps {
  start: number;
}

export default function Counter({ start }: CounterProps) {
  const count = useSignal(start);
  return (
    <div class="flex gap-4 items-center">
      <button onClick={() => count.value--}>-</button>
      <span class="text-2xl">{count}</span>
      <button onClick={() => count.value++}>+</button>
    </div>
  );
}

테스트と커버리지

// server_test.ts
import { assertEquals } from "$std/assert/assert_equals.ts";

Deno.test("API health check", async () => {
  const res = await fetch("http://localhost:8000/api/config");
  assertEquals(res.status, 200);
  const data = await res.json();
  assertEquals(typeof data, "object");
});

Deno.test("file operations with permissions", async () => {
  const content = await Deno.readTextFile("./data/config.json");
  const config = JSON.parse(content);
  assertEquals(config.version !== undefined, true);
});

Deno Deployへの배포

# Deno DeployのCLI
deno install -A jsr:@deno/deployctl

# デプロイ
deployctl deploy --project=my-app --entrypoint=main.ts

정리

Denoの보안モデルとTypeScriptネイティブサポートは、安全で快適な개발体験を提供します。Claude Code를 활용하면 パーミッション설정やFreshの独自パターンも효율적으로習得할 수 있습니다。TypeScript개발のコツや보안監査가이드도 참고하세요.

Deno의 상세 정보는Deno공식 문서를 참고하세요.