이 버전은 Canvas ID 불일치 해결 및 밝은 테마에서의 가시성 확보가 완료된 최종 버전입니다.

1. ✨ Twinkling Starfield (반짝이는 밤하늘)

배경을 어두운 남색으로 자동 설정하여 별이 잘 보이게 합니다.

(function() {
    const canvas = document.getElementById('bg-canvas');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let stars = [];

    function resize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    window.addEventListener('resize', resize);
    resize();

    for(let i = 0; i < 150; i++) {
        stars.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            size: Math.random() * 1.5,
            opacity: Math.random(),
            speed: Math.random() * 0.01 + 0.005
        });
    }

    function animate() {
        // 어두운 배경색 강제 지정 (별 가시성 확보)
        ctx.fillStyle = '#0f172a'; 
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        stars.forEach(s => {
            s.opacity += s.speed;
            if (s.opacity > 1 || s.opacity < 0) s.speed *= -1;
            ctx.fillStyle = `rgba(255, 255, 255, ${Math.max(0, s.opacity)})`;
            ctx.beginPath();
            ctx.arc(s.x, s.y, s.size, 0, Math.PI * 2);
            ctx.fill();
        });
        requestAnimationFrame(animate);
    }
    animate();
})();

2. 🌊 Smooth Wave Motion (부드러운 물결)

(function() {
    const canvas = document.getElementById('bg-canvas');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let tick = 0;

    function resize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    window.addEventListener('resize', resize);
    resize();

    function drawWave(color, speed, height, offset) {
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.moveTo(0, canvas.height);
        for (let x = 0; x <= canvas.width; x++) {
            const y = Math.sin(x * 0.01 + tick * speed + offset) * height + (canvas.height / 2);
            ctx.lineTo(x, y);
        }
        ctx.lineTo(canvas.width, canvas.height);
        ctx.fill();
    }

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        tick++;
        drawWave('rgba(59, 130, 246, 0.15)', 0.02, 20, 0);
        drawWave('rgba(96, 165, 250, 0.1)', 0.015, 30, Math.PI);
        requestAnimationFrame(animate);
    }
    animate();
})();

3. 🕸️ Particle Network (지적인 네트워크)

(function() {
    const canvas = document.getElementById('bg-canvas');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const particles = [];

    function resize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    window.addEventListener('resize', resize);
    resize();

    for(let i = 0; i < 50; i++) {
        particles.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            vx: (Math.random() - 0.5) * 0.5,
            vy: (Math.random() - 0.5) * 0.5
        });
    }

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        particles.forEach((p, i) => {
            p.x += p.vx; p.y += p.vy;
            if(p.x < 0 || p.x > canvas.width) p.vx *= -1;
            if(p.y < 0 || p.y > canvas.height) p.vy *= -1;
            
            ctx.fillStyle = 'rgba(148, 163, 184, 0.4)';
            ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, Math.PI*2); ctx.fill();

            for(let j = i + 1; j < particles.length; j++) {
                const p2 = particles[j];
                const dist = Math.hypot(p.x - p2.x, p.y - p2.y);
                if(dist < 100) {
                    ctx.strokeStyle = `rgba(148, 163, 184, ${1 - dist/100})`;
                    ctx.lineWidth = 0.5;
                    ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(p2.x, p2.y); ctx.stroke();
                }
            }
        });
        requestAnimationFrame(animate);
    }
    animate();
})();

4. 🧬 Matrix Rain (디지털 비)

(function() {
    const canvas = document.getElementById('bg-canvas');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const chars = "01".split("");
    const fontSize = 14;
    let columns;
    let drops = [];

    function resize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        columns = Math.floor(canvas.width / fontSize);
        drops = Array.from({length: columns}, () => Math.random() * -50);
    }
    window.addEventListener('resize', resize);
    resize();

    function animate() {
        ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "#0F0";
        ctx.font = fontSize + "px monospace";

        for (let i = 0; i < drops.length; i++) {
            const text = chars[Math.floor(Math.random() * chars.length)];
            ctx.fillText(text, i * fontSize, drops[i] * fontSize);
            if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) drops[i] = 0;
            drops[i]++;
        }
        setTimeout(() => requestAnimationFrame(animate), 33);
    }
    animate();
})();

5. ❄️ Gentle Snowfall (겨울 눈)

(function() {
    const canvas = document.getElementById('bg-canvas');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const snowflakes = [];

    function resize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    window.addEventListener('resize', resize);
    resize();

    for(let i = 0; i < 100; i++) {
        snowflakes.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            r: Math.random() * 3 + 1,
            d: Math.random() * 1,
            v: Math.random() * 0.8 + 0.4
        });
    }

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
        ctx.beginPath();
        snowflakes.forEach(f => {
            ctx.moveTo(f.x, f.y);
            ctx.arc(f.x, f.y, f.r, 0, Math.PI * 2, true);
            f.y += f.v;
            f.x += Math.sin(f.d += 0.01);
            if(f.y > canvas.height) {
                f.y = -10;
                f.x = Math.random() * canvas.width;
            }
        });
        ctx.fill();
        requestAnimationFrame(animate);
    }
    animate();
})();

6. 🏮 Floating Bubbles (비눗방울)

(function() {
    const canvas = document.getElementById('bg-canvas');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const bubbles = [];

    function resize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    window.addEventListener('resize', resize);
    resize();

    for(let i = 0; i < 30; i++) {
        bubbles.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            r: Math.random() * 15 + 5,
            s: Math.random() * 0.5 + 0.2
        });
    }

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        bubbles.forEach(b => {
            b.y -= b.s;
            if(b.y < -b.r) {
                b.y = canvas.height + b.r;
                b.x = Math.random() * canvas.width;
            }
            ctx.beginPath();
            ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2);
            ctx.strokeStyle = "rgba(100, 100, 100, 0.2)";
            ctx.stroke();
        });
        requestAnimationFrame(animate);
    }
    animate();
})();

7. 🌈 Gradient Flow (유동적 그라데이션)

(function() {
    const canvas = document.getElementById('bg-canvas');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let hue = Math.random() * 360;

    function resize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    window.addEventListener('resize', resize);
    resize();

    function animate() {
        hue = (hue + 0.1) % 360;
        const grad = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
        grad.addColorStop(0, `hsl(${hue}, 50%, 90%)`);
        grad.addColorStop(1, `hsl(${(hue + 60) % 360}, 50%, 80%)`);
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        requestAnimationFrame(animate);
    }
    animate();
})();

8. 📐 Geometric Float (떠다니는 도형)

(function() {
    const canvas = document.getElementById('bg-canvas');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const shapes = [];

    function resize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    window.addEventListener('resize', resize);
    resize();

    for(let i = 0; i < 15; i++) {
        shapes.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            size: Math.random() * 40 + 20,
            angle: Math.random() * Math.PI * 2,
            rot: Math.random() * 0.02,
            v: Math.random() * 0.5
        });
    }

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        shapes.forEach(s => {
            s.angle += s.rot;
            s.y -= s.v;
            if(s.y < -s.size) {
                s.y = canvas.height + s.size;
                s.x = Math.random() * canvas.width;
            }
            
            ctx.save();
            ctx.translate(s.x, s.y);
            ctx.rotate(s.angle);
            ctx.strokeStyle = "rgba(100, 100, 100, 0.1)";
            ctx.strokeRect(-s.size/2, -s.size/2, s.size, s.size);
            ctx.restore();
        });
        requestAnimationFrame(animate);
    }
    animate();
})();

9. ⚡ Aurora Borealis (오로라)

(function() {
    const canvas = document.getElementById('bg-canvas');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let time = 0;

    function resize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    window.addEventListener('resize', resize);
    resize();

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        time += 0.005;
        for(let i = 0; i < 3; i++) {
            const y = 30 + i * 15;
            const grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
            grad.addColorStop(0, `rgba(52, 211, 153, ${0.3 - i*0.1})`);
            grad.addColorStop(1, 'transparent');
            ctx.fillStyle = grad;
            ctx.beginPath();
            ctx.moveTo(0, canvas.height);
            for(let x = 0; x <= canvas.width; x += 10) {
                const noise = Math.sin(x * 0.005 + time + i) * 50;
                ctx.lineTo(x, y + noise);
            }
            ctx.lineTo(canvas.width, canvas.height);
            ctx.fill();
        }
        requestAnimationFrame(animate);
    }
    animate();
})();

10. 🌑 Bokeh Background (컬러 보케 조명)

색상을 입혀 밝은 배경에서도 잘 보이게 수정되었습니다.

(function() {
    const canvas = document.getElementById('bg-canvas');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const circles = [];

    function resize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    window.addEventListener('resize', resize);
    resize();

    for(let i = 0; i < 25; i++) {
        circles.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            r: Math.random() * 100 + 50,
            v: Math.random() * 0.2 + 0.1,
            color: `hsla(${Math.random() * 360}, 70%, 70%, 0.3)`
        });
    }

    function animate() {
        // 배경을 살짝 어둡게 처리하여 보케 입자가 보이게 함
        ctx.fillStyle = 'rgba(15, 23, 42, 0.05)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        ctx.globalCompositeOperation = "lighter";
        circles.forEach(c => {
            c.y -= c.v;
            if(c.y < -c.r) {
                c.y = canvas.height + c.r;
                c.x = Math.random() * canvas.width;
            }
            const g = ctx.createRadialGradient(c.x, c.y, 0, c.x, c.y, c.r);
            g.addColorStop(0, c.color);
            g.addColorStop(1, "transparent");
            ctx.fillStyle = g;
            ctx.beginPath(); ctx.arc(c.x, c.y, c.r, 0, Math.PI*2); ctx.fill();
        });
        requestAnimationFrame(animate);
    }
    animate();
})();

SveltekitBlog는 최첨단 Svelte 5 Runes, Better-Auth, Cloudflare D1 & Pages, Drizzle ORM을 결합한 차세대 Full-Edge Serverless 하이브리드 블로그 엔진입니다.

정적 빌드 방식에서 나타나기 쉬운 빌드/배포 지연을 최소화하고, 클라이언트 사이드 API 페칭 방식의 레이아웃 깜빡임(Flicker) 현상을 세련되게 해결했습니다. 소스 코드의 재빌드 및 재배포 없이 관리자 설정 즉시 독자 화면에 0ms 급으로 실시간 동기화되는 최정상급 렌더링 퍼포먼스를 경험해 보세요.

🚀 Key Badges & Tech Stack

🏆 성능 지표 및 비즈니스 특장점 (Core Strengths & Metrics)

SveltekitBlog는 단순한 토이 프로젝트 수준이 아닌, 실제 상용 대형 블로그 및 퍼블리싱 매체 수준의 압도적인 엔지니어링 지표와 비즈니스적 강점을 자랑합니다.

💰 1. 실질 운영 비용 0원 (Only Domain Fee)

• 무제한 무료 인프라: Cloudflare Pages, Workers, D1 Database, KV 스토리지의 파격적인 무료 티어 범위 내에서 기동되므로, 매월 청구되는 웹 인프라 호스팅 비용이 0원에 수렴합니다.
• 지출 비용: 오직 본인이 소유할 개인 도메인(Domain) 등록 비용 외에는 어떠한 유지보수 비용도 들지 않습니다.

🎨 2. 한계 없는 디자인 자유도 & 레이아웃 포터빌리티 (Theme Portability)

• 드래그 앤 드롭 테마 빌더: 테마 에디터에서 헤더, 메뉴 여백, 픽셀 두께, 로고 정렬(수평/수직)을 완벽하게 맞춤 조절합니다.
• 디자인 JSON 공유: 개인정보가 완벽히 소거된 디자인 JSON 설정 파일 내려받기/올려받기 기능이 기본 탑재되어 있어, 유저들끼리 클릭 한 번으로 본인이 정교하게 가꾼 테마 레이아웃 디자인을 서로 주고받아 장착할 수 있습니다.

💾 3. 완전무결한 데이터 주권 및 백업/복원 자유 (Full Data Sovereignty)

• 플랫폼 정책 변화에 구애받지 않고, 자신이 생산한 창작물과 독자 교류 데이터를 완벽하게 소유하고 자유롭게 백업 및 복원할 수 있습니다.
• 작성한 모든 마크다운/HTML 포스트 본문, 유저 댓글, 방명록 정보와 Cloudflare D1 전역 분산 SQLite 데이터베이스 파일은 100% 블로그 주인의 온전한 디바이스 하에 보관 및 영구 소유합니다.

⚡ 4. 경이적인 Lighthouse 성능 지표 (All 100% Desktop)

V8 Isolate 런타임과 Svelte 5 컴파일 타임 최적화를 통해 구글 크롬 Lighthouse 웹 표준성 검사 시 세계 정상급 최고점을 획득합니다:

• 데스크톱 (Desktop): 성능 100점 / 접근성 100점 / 권장사항 100점 / SEO 100점 (전 분야 100점 퍼펙트!)
• 모바일 (Mobile): 성능 94~96점 획득, 그리고 접근성/권장사항/SEO는 올 100점 달성.

📈 5. 실무용 광고/트래커 탑재 시 우수한 성능 지표 유지 (AdSense & GA4)

• 일반적으로 마케팅 및 통계 수집용 외부 스크립트(Google AdSense, Google Analytics 4, 네이버 서치어드바이저 등)들을 다수 연동하는 경우, 모바일 기기에서의 성능 점수는 급격히 하락하는 경향이 있습니다.
• SveltekitBlog는 Svelte 5의 극도로 가볍고 영리한 풋프린트와 비동기 렌더링 흐름을 바탕으로, 이러한 실무용 외부 스크립트들을 모두 구동하더라도 모바일 환경에서 성능 점수 80점대 이상을 안정적으로 기록 및 유지합니다.

✨ Core Features & Engineering Innovations

⚡ 1. 무재배포 실시간 디자인 동기화 (Zero-Rebuild Live Sync)

• No Build, No Deploy: 에디터에서 로고 높이, 정렬, 색상 등 테마를 수정하고 저장하는 즉시 CI/CD 배포 파이프라인 가동 없이 독자 화면에 동기화됩니다.
• Dynamic Edge SSR: 독자가 접속하는 찰나 에지 노드에서 D1 데이터베이스(BLOG_DB)를 실시간 병렬 쿼리하여 완성된 스타일시트 HTML을 즉시 배출합니다.
• No-Flicker CSS Injection: CSS 커스텀 변수(--logo-margin 등)를 HTML 루트에 직접 인라인 SSR 주입하여, 자바스크립트 구동 전 레이아웃 깜빡임이나 레이아웃 이동(CLS) 현상을 완전히 배제했습니다.

🎨 2. Svelte 룬 & CSS Repainting 기반 60FPS 테마 프리뷰

• React 진영의 전체 컴포넌트 트리 파괴/재생성(Re-render) 병목을 탈피했습니다.
• Svelte 5 $state 반응성 상태와 CSS 변수 재매핑(Repaint) 기술을 결합하여, 사용자가 어드민 패널에서 여백 픽셀이나 테마 색상 조절 시 렌더링 끊김(Lag)이 전혀 없는 완벽한 GPU 가속 60FPS 테마 프리뷰를 실현합니다.

🖼️ 3. 웹 검색기 스타일 비주얼 미디어 매니저 & REST 어댑터

• Zero-SDK 경량 아키텍처: 무거운 클라우드 공식 SDK 라이브러리를 전면 배제하고, Web Fetch API 표준만을 활용해 각 스토리지의 REST API 규격과 다이렉트로 결합한 초경량 스토리지를 완성했습니다.
• 비주얼 미리보기 (Thumbnail Grid): KV 모드의 텍스트 지향 제한에서 벗어나, R2 / Supabase / ImageKit 활성화 시 마치 고성능 웹 이미지 검색기처럼 전체 에셋을 풍부한 썸네일 그리드로 브라우징 및 폴더 탐색할 수 있습니다.
• 원클릭 원격 물리 삭제: 대시보드에서 쓰지 않는 에셋을 선택해 삭제하면 adapter.delete(keys) 함수가 비동기 구동되어 원격지 스토리지의 물리 파일 자체를 즉각 영구 삭제함으로써 불필요한 클라우드 부하와 유지 요금을 방지합니다.

🛰️ 4. 스크롤 스레드 부하 0%의 IntersectionObserver 센서

• 윈도우 스크롤 이벤트를 매번 리스닝하여 메인 스레드를 선점하고 버벅임을 유발하는 전통적인 방식에서 과감히 탈피했습니다.
• 헤더 하단부에 보이지 않는 1px 크기의 투명 센서 엘리먼트를 숨겨두고 브라우저 자체 엔진이 스레드 백그라운드에서 구동하는 IntersectionObserver 센서를 맵핑하여 스크롤 점유율 0%의 압도적으로 스무스한 모바일 스크롤 경험을 제공합니다.

🌐 5. 무한 확장형 단일 진실원(SSOT) 다국어 i18n 시스템 & 멀티 랭귀지 배포

• 3개 국어 기본 탑재 및 무한 확장: 한국어, 영어, 일본어(ko, en, ja)를 즉시 사용할 수 있도록 기본 탑재하고 있습니다. 이에 그치지 않고 새로운 언어가 필요한 경우, 사전에 언어 키를 추가하고 해당 번역 텍스트만 채워 넣는 방식으로 무한히 쉽게 확장할 수 있는 개방 구조를 가집니다.
• 1개 포스트의 다국어 동시 발행 (Multi-language Publishing): 동일한 포스트를 서로 다른 언어 번역 버전으로 동시에 연동 발행할 수 있습니다. 데이터베이스 수준에서 translationGroupId 관계를 연결해 한 묶음으로 엮기 때문에, 독자는 블로그 화면 상단에서 클릭 한 번으로 영문판, 일문판 등을 실시간 스위칭하며 즉각적으로 감상할 수 있습니다.
• 강건한 폴백(Fallback) 엔진: 타입 안전성이 검증된 번역 사전을 모노레포 패키지 레벨(packages/shared/src/i18n)에서 공유하여 중복 코드를 완벽 배제하며, 특정 언어 번역이 누락되었을 경우 기본 언어로 매끄럽게 대체 노출되는 완성도 높은 폴백 시스템을 가집니다.

📐 Overall Architecture Flow

sequenceDiagram
    actor Client as 웹 브라우저 클라이언트
    participant Anycast as CF Anycast Edge CDN
    participant Pages as CF Pages (SvelteKit 에지 런타임)
    participant D1 as Cloudflare D1 (BLOG_DB)
    participant Storage as Cloudflare R2 / Supabase / ImageKit

    Client->>Anycast: 1. 블로그 URL 접속 요청
    Anycast->>Pages: 2. 최저 핑 리전 에지 Worker 기동 (Cold Start 0ms)
    Pages->>D1: 3. db.getSettings() 실시간 디자인 설정 조회 (0ms~5ms)
    D1-->>Pages: 4. SQL 쿼리 결과 반환
    Pages->>Storage: 5. 이미지 프록시 레이어 가동 및 에셋 캐시 체크
    Storage-->>Pages: 6. 이미지 바이너리 버퍼 반환 (CDN 캐시 수혈)
    Pages-->>Client: 7. CSS 변수가 SSR 인라인 탑재된 최적의 HTML 응답 반환

🛠️ Quick Start & Deployment

본 프로젝트는 의존성 복잡도를 원천 배제하기 위해 npm workspaces 모노레포 구조로 단정하게 엮여 있습니다.

[!IMPORTANT]
로컬 및 클라우드 배포 통합 한방 셋업 (npm run setup)

• 인프라 자동화 끝판왕: Cloudflare D1(데이터베이스) 및 KV Namespace 자원 생성, wrangler.json 바인딩 자동 업데이트, 스키마 마이그레이션 및 시드 데이터 이식, 에지 서버 환경변수(Secrets) 동기화, 전체 워크스페이스 빌드 및 Cloudflare Pages 최종 프로덕션 라이브 서버 배포에 이르기까지 모든 로컬 및 클라우드 구축 프로세스를 단 하나의 스크립트로 완전 종결합니다!
• 구동 OS 권장: 로컬 에뮬레이션은 Wrangler 가상화가 안정적으로 동작하는 리눅스(Linux) 환경을 권장합니다.

1. 의존성 셋업 및 취약점 자동 패치

# 전체 워크스페이스 의존성 설치 및 로컬 심볼릭 링크 자동 생성
npm install

# 의존성 패키지의 취약점 정밀 보안 검수 및 자동 교정 패치 (필수)
npm audit fix

2. 원클릭 로컬 & 클라우드 인프라 한방 구축 (One-Click Setup & Deploy)

프로덕션 배포 파이프라인과 로컬 DB 셋업은 극단적으로 간소화되어 있습니다. 아래 단 한 줄의 스크립트만 실행하면, 최초 1회 wrangler 연결 승인( wrangler login ) 후 안내창에 맞춰 엔터(Enter) 몇 번 누르는 것만으로 데이터베이스 구축부터 최종 프로덕션 Pages 라이브 서버 배포까지 원스톱으로 고속 완성됩니다!

# 클라우드 D1/KV 리소스 생성 + DB 마이그레이션 + 환경변수 동기화 + 빌드 + 라이브 서버 최종 배포까지 한방 실행!
# (실행 후 승인 및 설정 안내에 따라 엔터만 입력해 주면 클라우드 전역 롤아웃이 끝납니다.)
npm run setup

3. 로컬 독립 개발 서버 실행 (인프라 구축 완료 후)

배포 및 설정이 끝난 후 아래 명령어를 호출하여 독립 개발 서버를 띄울 수 있습니다. 이 과정에서 Wrangler 가상 샌드박스가 이전 setup 단계에서 기입된 wrangler.json 설정 파일의 리소스 바인딩 정보(D1 DB UUID 등)를 자동으로 다시 한번 파악하여, 개발 환경에 최적화된 로컬 환경변수 정보로 자동 등록/매핑하는 과정을 수행하게 됩니다.

# [환경변수 자동 매핑 및 기동] 1. 블로그 독자 사이트 로컬 개발 기동 (apps/blog)
npm run dev:blog

# [환경변수 자동 매핑 및 기동] 2. 어드민 테마 에디터 로컬 개발 기동 (apps/admin)
npm run dev:admin

🏁 Architecture Significance

SveltekitBlog는 무겁고 물리 IDC 리전에 고정된 전통적인 백엔드 아키텍처를 탈피하고, 전 세계 300여 개 Anycast CDN 리전 어디서나 0ms에 가까운 속도로 코드가 깨어나고, 에지 데이터베이스에서 직접 디자인을 로드하여 독자에게 빛의 속도로 서빙되는 서버리스 거버넌스의 가장 앞선 모범을 보여줍니다.