서론Promise는 JavaScript의 비동기 프로그래밍을 도와주는 라이브러리다.현재는 JavaScript V8엔진에 기본 탑재되어 있다. (즉 Node.js에서도 활용할 수 있다.)IE10 이전 버전에서는 작동하지 않는데 Babel과 Promise polyfill을 통해 비슷하게 작동하도록 만들 수 있다. 본론그렇다면 어떻게 Promise가 비동기 작동을 돕는걸까?간단한 Wait 함수를 살펴보자.const wait = (time: number): Promise => new Promise((resolve, reject) => { setTimeout(() => resolve(), time);});wait(4000).then(() => console.log("done"))이 코드를 실행한다면 4초 후 P..

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

서론맞춤법검사기를 만들면서 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";..