서론많은 웹사이트에서 악성 사용자를 막기 위해 캡챠를 사용하곤 한다. 대표적으로 ReCaptcha가 있다.하지만 ReCaptcha는 일정 사용량 이상(10,000건)부터는 과금이 이루어진다.하지만 많은 유용한 도구들은 대체제가 있기 마련이다. 내가 제시하는 대안은 Turnstile 이다.Turnstile의 장점은 다음과 같다.빠르다정확하다.저렴하다.Cloudflare에서 완전 무료를 선언한 Turnstile은 빠르고 정확하며 저렴하기까지 하다.ReCaptcha에서 넘어올 만 하지 않은가?본론사용법과 관련된 내용은 주로 Turnstile Documentation에서 가져온 내용이다.먼저 client 검증이다.script 태그와 div 태그를 적절히 조합하면 위의 gif처럼 캡챠를 시작하는 모습을 볼 수 있..

서론Cloudflare worker를 사용하는 sh0rt.kr 을 개발하며 가장 중요했던 것은 분산 Sqlite 호환 데이터베이스인 D1에 접근하는 방법이였다.D1에 접근하는 방법은 크게 두가지가 있다. Wrangler를 활용하는 방법과 @nuxthub/core 패키지를 사용하는 방법이다.두가지의 차이점과 왜 @nuxthub/core 라이브러리를 사용해야 하는지를 간단히 살펴보자.본론Wrangler를 활용하려면 wrangler dev 명령어를 통해 Worker 환경과 비슷한 로컬 환경을 만들 수 있다. 하지만 단점이 명확하다.Nuxt의 dev 모드에서는 D1에 접근할 수 없다는 것이다.Cloudflare D1은 Sqlite와 호환되는 데이터베이스이다. 장점은 다음과 같다.Worker와 같이 쓸 수 있는 ..

서론Cloudflare worker를 이용해 URL Shorter를 만들어보려는 사이드 프로젝트 계획을 시작했다.하지만 wrangler를 이용해 디버깅을 해야하는 등, 만만치 않았던 과정이였다.하지만 Nitro.js의 문서를 살펴보다 보니 새로운 방법을 찾게 되었다.본론살펴본 문서는 다음과 같다.Cloudflare는 Worker와 D1, KV Namespace와 같은 Serverless 환경을 제공하고 있다.하지만 이것을 이용해 개발하는 과정은 조금 험난하다.wrangler라는 cli 도구를 이용해야 개발 환경에서 D1과 같은 서비스에 접근하는 코드를 짤 수 있다.하지만 이제는 다르다.nitro-cloudflare-dev 패키지를 설치해 보자.Nuxt3에서는 설치 후 다음과 같이 설정한다.export d..

서론Nuxtjs를 쓰면서 RuntimeConfig를 사용할 일이 많이 있다. 예를 들자면 Adsense의 광고ID나 Backend URL 등 의외로 많은 장소에서 사용하게 된다.RuntimeConfig의 내용은 ServerSide에서도, ClientSide에서도 모두 사용이 가능한 변수이다. process.env.[]는 ServerSide에서만 사용이 가능한 것과 대조된다.설정방법을 모르는 분을 위해 설정 예시를 보이고 본론으로 들어가도록 하겠다.export default defineNuxtConfig({ runtimeConfig: { public: { backendUrl: process.env.NUXT_BACKEND_URL ?? "http://localhost:8000", re..