서론지난번에는 Callback hell을 해결하기 위해 Promise 문법을 알아보았다.하지만 Callback hell을 완벽하게 회피할 수 있는 방법은 아니다.그래서 async/await 문법이 ES7부터 나오게 되었다.ES7의 async/await에 대해 알아보자.본문import fs from 'fs'const openFile = (file: string) => new Promise((resolve, reject) => { fs.readFile(file, (err, data) => { if(err) reject(err); resolve(data); });});지난번 포스트의 openFile 함수다. 이걸 쓰기 위해openFile('location') .catch((err) => con..

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