YG - 96년생 , 강아지 있음, 개발자 희망

들어가며최근 React Native로 프론트엔드 면접 준비 서비스를 개발하면서 음성 인식 기능을 구현해야 했다. 사용자가 면접 질문에 대한 답변을 음성으로 녹음하면 이를 텍스트로 변환하는 기능이 필요했는데, 이 과정에서 겪은 시행착오와 해결책을 공유하고자 한다.Google Speech-to-Text의 한계처음에는 Google Cloud의 Speech-to-Text API를 사용했다. 한국어 인식률이 좋다고 알려져 있고, 대규모 서비스에서 검증된 API라 선택했지만 곧 문제점을 발견했다.Google STT는 일상 대화에 최적화되어 있다 보니 개발 용어나 기술 관련 단어를 제대로 인식하지 못했다. 예를 들면:useState → 뉴스 스테이트로 인식됨useReducer → 전혀 다른 단어로 인식됨SSR → 정..

Gmail SMTP로 무료 이메일 인증 구현하기안녕하세요, 개발자 여러분! 오늘은 제가 최근에 구현한 Gmail SMTP를 활용한 무료 이메일 인증 시스템에 대해 공유하려고 합니다. 메일건(Mailgun)같은 서비스는 월 $15부터 시작해서 간단한 인증 기능에 사용하기엔 부담스러운 가격이더라고요. 그래서 완전 무료로 사용할 수 있는 Gmail SMTP를 활용한 방법을 찾아보게 되었습니다.왜 Gmail SMTP인가?완전 무료하루 500건까지 이메일 전송 가능 (개인 계정 기준)대부분의 개발자가 이미 Gmail 계정을 가지고 있음높은 배달 성공률준비물Gmail 계정2단계 인증이 활성화된 Google 계정NestJS 프로젝트 (다른 프레임워크도 비슷하게 적용 가능)Nodemailer 패키지1. Gmail SM..

Husky를 이용하여 테스트 자동화 하는 이유 깃 action에서도 테스트 자동화를 할 수 있지만 월 2,000분만 무료로 제공하기 때문에 잦은 PR을 올리거나 테스트 개수가 많아졌을 때 비용이 들 수 있습니다. 그래서 push 혹은 commit 하기 전 로컬에서 테스트가 실패하거나 불필요한 코드가 같이 PR에 올라가는 지 확인하는 것이 좋다고 생각이 들었습니다. GitHub Actions 요금 청구 정보 - GitHub Docs 계정에 포함된 스토리지 또는 시간(분)을 벗어나 GitHub Actions를 사용하면 추가 사용량에 대한 요금이 청구됩니다. docs.github.com 설치 npm install husky --save-dev npm install --save-dev lint-staged hu..

보투게더 팀 블로그에서 작성한 글을 가져왔습니다. Dialog 태그 위로 토스트 보이도록 하기 (feat.TopLayer, createPortal) html dialog 태그로 만든 Drawer에서 에러가 났을 때 토스트가 보이지 않는 상황이 있었습니다. 이유는 dialog는 최상위 계층 (Top layer)으로 열리기 때문인데요. topLayer는 페이지의 다른 모든 콘텐츠 레 velog.io 문제가 되는 상황 html dialog 태그로 만든 Drawer에서 에러가 났을 때 토스트가 보이지 않는 상황이 있었습니다. 이유는 dialog는 최상위 계층 (Top layer)으로 열리기 때문인데요. topLayer는 페이지의 다른 모든 콘텐츠 레이어 위의 존재하는 레이어입니다. 그래서 토스트가 TopLaye..

fetch를 추상화한 기존의 코드 import { ACCESS_TOKEN_KEY } from '@constants/localStorage'; import { getLocalStorage } from './localStorage'; import { silentLogin } from './login/silentLogin'; const headers = { 'Content-Type': 'application/json', }; export const makeFetchHeaders = () => { const accessToken = getLocalStorage(ACCESS_TOKEN_KEY); if (!accessToken) { return headers; } return { ...headers, Authori..

보투게더 팀 블로그에서 작성한 글을 가져왔습니다 사용자가 업로드 한 이미지 압축하여 서버로 보내기 (feat.Browser Image Compression, Upload Images Converter, 이미지 압축 패키지 비교 (23.10.04 기준) Browser Image Compression https://www.npmjs.com/package/browser-image-compression 다운로드 수 : 137,399 번들 사이즈 : 55.51KB 마지 velog.io 이미지 압축 패키지 비교 (23.10.04 기준) 이미지 성능 최적화 사용자가 서버로 보내는 이미지의 용량을 줄여서 서버의 용량도 절약해 주고, 사용자가 이미지를 불러올 때 가볍게 불러올 수 있도록 하려고 했습니다. 그래서 사용자가..

이전 게시글이 선행되면 좋습니다 사이트를 모바일 웹앱으로 실행되도록 하는 방법 (feat.apple-meta-tag) 사이트를 모바일 웹앱으로 실행되도록 하는 방법 1. html의 header에 다음과 같이 넣어주면 됩니다 // 홈 화면에 추가했을 때 보여질 앱의 이름 // 모바일에서 전체화면으로 보이게 할 지 여부 // 상 hell-of-company-builder.tistory.com 프로그레시브 웹 앱(PWA)이란 프로그레시브 웹 앱은 웹 기술을 사용하여 개발된 애플리케이션으로, 사용자가 웹 브라우저에서 접속할 수 있으며 모바일 앱과 비슷한 사용자 경험을 제공합니다. 이러한 웹 앱은 오프라인에서도 작동할 수 있으며, 푸시 알림을 받을 수 있고, 홈 화면에 아이콘을 추가하여 쉽게 접근할 수 있습니다...

잘못된 정보가 있다면 댓글로 알려주세요 .env를 통한 환경변수 사용 Votogether 팀 환경에 경우 AWS EC2로 배포하고 있기 때문에 AWS EC2에서는 .env를 배포 환경으로 생성하고, 개발자들이 사용하는 컴퓨터에서는 .env를 개발환경으로 세팅하면 배포 환경별 API를 바꿔가며 사용할 수 있습니다. 이렇게 사용하는 이유는 개발 환경에서는 MSW를, 실제 배포 환경에서는 서버의 API를 이용하도록 하기 위함입니다. 또한 서버의 앤드 포인트를 외부에 알리면 보안 위험이 있을 수 있습니다. (익명의 사용자가 대량의 요청 시도, 서버의 직접적인 공격) 따라서 dotenv를 통해 환경변수 설정을 해보도록 하겠습니다. 개발 환경 .env VOTOGETHER_BASE_URL=http://localhos..