서론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..

서론이전의 Nuxt3 google ReCaptcha 사용하기 글의 연장이다.맞춤법 검사기 를 구성하며 Nuxtjs 3와 FastAPI로 웹개발을 한 기록이다.이번 이야기는 Nuxt3에서 받아온 ReCaptcha Token을 FastAPI에서 검증하는 방법에 대한 이야기다. 같은 방법으로 Django나 Node.js 등 다양한 언어에서 적용이 가능하니 참고하기 바란다.  본론ChatGPT의 도움을 조금 받았다. (아니 사실 엄청 많이 받았다.)간단히 HTTP Request를 양식에 맞춰 보내는 것만으로도 ReCaptcha 토큰의 검증은 끝난다.아래는 FastAPI에서 실행시키기 위한 간단한 코드다.from fastapi import HTTPExceptionimport httpxasync def recapt..

서론맞춤법검사기를 만들면서 CSRF 인증 대신 더욱 안전한 ReCaptcha v3를 사용하기로 결정했다.이 글은 Nuxt3에서 ReCaptcha 인증을 하는 방법에 대해 설명한다.본론우선 ReCaptcha SITE_KEY와 SECRET_KEY를 발급받았다는 전제 하에 진행한다.ReCaptcha ADMIN CONSOLE에서 간단히 발급받을 수 있다.npm i -s vue-recaptcha 로 필요한 vue-recaptcha 라이브러리를 받아준다.Nuxtjs 3의 /plugins/recaptcha.ts 에 다음 코드를 작성한다. dev.to 의 글을 참고했다.import { defineNuxtPlugin} from "#app"import {VueReCaptcha} from "vue-recaptcha-v3";..

서론맞춤법검사기를 제작하면서 Huggingface Transformer API(이하 Transfomer API)를 FastAPI 백엔드에서 사용할 일이 생겼다.처음에는 당연하게도 이런식으로 구성했다.@router.post("/correction", response_model=CorrectionResponse)@limiter.limit("60/seconds")async def correction(request: Request, correction: CorrectionRequest, user: Session = Depends(get_logged_user)): # 1. Tokenize and pad inputs in batches batch = [tokenizer([f"{tokenizer.bos_t..