[{"data":1,"prerenderedAt":136},["ShallowReactive",2],{"articles-list":3},[4,63],{"id":5,"title":6,"body":7,"date":51,"description":52,"extension":53,"meta":54,"navigation":55,"path":56,"seo":57,"stem":58,"tags":59,"__hash__":62},"articles\u002Farticles\u002Fhello-meloscode.md","MelosCode를 시작하며",{"type":8,"value":9,"toc":45},"minimark",[10,14,19,22,26,42],[11,12,13],"p",{},"MelosCode는 기술 아티클과 프로젝트 포트폴리오, 그리고 개발하면서 자주 필요했던 작은 도구들을 한곳에 모아두기 위해 시작한 개인 사이트입니다.",[15,16,18],"h2",{"id":17},"왜-만들었나","왜 만들었나",[11,20,21],{},"매번 검색해서 찾아 쓰던 JSON 포맷터, Base64 인코더, UUID 생성기 같은 도구들을 직접 만들어서 모아두면 더 편할 것 같았습니다. 모든 도구는 서버 없이 브라우저에서만 동작하도록 만들어서, 운영 비용 없이 계속 유지할 수 있게 했습니다.",[15,23,25],{"id":24},"앞으로-추가할-것들","앞으로 추가할 것들",[27,28,29,33,36,39],"ul",{},[30,31,32],"li",{},"코드 → 이미지 변환 도구",[30,34,35],{},"배경음 + 뽀모도로 타이머",[30,37,38],{},"가상 악기 \u002F 코드 진행 플레이그라운드",[30,40,41],{},"마크다운 → 블로그 썸네일 생성기",[11,43,44],{},"하나씩 천천히 채워나갈 예정입니다.",{"title":46,"searchDepth":47,"depth":47,"links":48},"",2,[49,50],{"id":17,"depth":47,"text":18},{"id":24,"depth":47,"text":25},"2026-08-12","개발 아티클, 포트폴리오, 그리고 무료 개발자 도구를 모아두는 공간을 만든 이유.","md",{},true,"\u002Farticles\u002Fhello-meloscode",{"title":6,"description":52},"articles\u002Fhello-meloscode",[60,61],"meloscode","소개","Sh7pwS97YyrrjzmBRBX3pqUaI5ei5cDZLDk8D39rwm4",{"id":64,"title":65,"body":66,"date":51,"description":127,"extension":53,"meta":128,"navigation":55,"path":129,"seo":130,"stem":131,"tags":132,"__hash__":135},"articles\u002Farticles\u002Fnuxt-cloudflare-pages-free-deploy.md","Nuxt 3와 Cloudflare Pages로 비용 없이 정적 사이트 배포하기",{"type":8,"value":67,"toc":123},[68,71,74,113,117,120],[11,69,70],{},"이 사이트(meloscode.com)는 백엔드나 데이터베이스 없이 100% 정적 사이트로 만들어졌습니다. 아래는 사용한 스택과 배포 방식입니다.",[15,72,73],{"id":73},"스택",[27,75,76,83,89,100],{},[30,77,78,82],{},[79,80,81],"strong",{},"프레임워크",": Nuxt 3 (Vue 3, TypeScript)",[30,84,85,88],{},[79,86,87],{},"스타일링",": Tailwind CSS",[30,90,91,94,95,99],{},[79,92,93],{},"콘텐츠",": ",[96,97,98],"code",{},"@nuxt\u002Fcontent"," (Zod 스키마로 글 메타데이터 검증)",[30,101,102,94,105,108,109,112],{},[79,103,104],{},"배포",[96,106,107],{},"nuxt generate","로 정적 파일을 만든 뒤 ",[96,110,111],{},"wrangler pages deploy","로 Cloudflare Pages에 업로드",[15,114,116],{"id":115},"왜-비용이-들지-않나","왜 비용이 들지 않나",[11,118,119],{},"Cloudflare Pages 무료 플랜은 정적 사이트에 대해 대역폭과 요청 수 제한이 없고, 커스텀 도메인 연결과 SSL 인증서도 무료로 제공됩니다. CLI로 직접 업로드하는 방식은 Git 연동 빌드에만 적용되는 월별 빌드 횟수 제한에도 걸리지 않습니다.",[11,121,122],{},"서버가 필요한 기능(Workers, D1 등)을 추가하지 않는 한, 이 사이트를 운영하는 데 드는 비용은 도메인 등록비뿐입니다.",{"title":46,"searchDepth":47,"depth":47,"links":124},[125,126],{"id":73,"depth":47,"text":73},{"id":115,"depth":47,"text":116},"서버나 데이터베이스 없이, Nuxt 3 정적 생성과 Cloudflare Pages 무료 플랜만으로 개인 사이트를 배포한 방법.",{},"\u002Farticles\u002Fnuxt-cloudflare-pages-free-deploy",{"title":65,"description":127},"articles\u002Fnuxt-cloudflare-pages-free-deploy",[133,134,104],"nuxt","cloudflare","aK0r5ZDcEIIMOLPHJpWHT5Qs34xO6WS02CptnpNkOgk",1786525316582]