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

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

리액트 네이티브 Expo에서 Apollo GraphQL 토큰 관리 문제 해결하기문제 상황리액트 네이티브 Expo 환경에서 GraphQL Apollo 클라이언트를 사용하는 중, 액세스 토큰과 리프레시 토큰 처리에서 문제가 발생했습니다. 기존에는 getItemAsync와 같은 비동기 함수를 사용해 토큰을 스토리지에서 가져오고 있었는데, 이로 인해 첫 요청 시 Authorization 헤더가 비어있는 상태로 요청이 전송되는 문제가 있었습니다.원인 분석 문제의 핵심은 비동기적으로 토큰을 가져오는 과정에서 발생했습니다. 백엔드 로그를 확인해보니, 요청이 두 번 발생하는데:첫 번째 요청: 토큰이 없이 전송됨두 번째 요청: 토큰이 포함되어 전송됨이는 getItemAsync의 비동기 특성 때문에, 토큰을 가져오기 전에..

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

React Native와 NestJS를 활용한 Google Cloud Speech-to-Text 구현하기오늘은 모바일 애플리케이션에서 음성 인식 기능을 구현하는 방법에 대해 알아보겠습니다. 특히 React Native로 구현된 프론트엔드와 NestJS로 구현된 백엔드를 통해 Google Cloud Speech-to-Text API를 연동하는 방법을 자세히 설명하겠습니다.개요이 글에서는 다음과 같은 내용을 다룹니다:Google Cloud Speech-to-Text API 설정NestJS 백엔드 구현React Native 프론트엔드 구현비용 정보 및 무료 티어 활용 방법1. Google Cloud Speech-to-Text API 설정1.1 Google Cloud SDK 설치맥OS에서는 Homebrew를 통..

Expo 프로젝트에서 Xcode 인식 문제 해결하기문제 상황맥북에 이미 Xcode가 설치되어 있음에도 불구하고 Expo 프로젝트에서 iOS 시뮬레이터를 실행하려고 할 때 다음과 같은 메시지가 계속 표시되었습니다:Xcode must be fully installed before you can continue. Continue to the App Store? 심지어 Xcode 스플래시 화면이 보이는 상태에서도 이런 메시지가 나타났습니다.원인 분석이 문제는 Expo CLI가 시스템에 설치된 Xcode의 경로를 올바르게 인식하지 못해서 발생합니다. 로그를 보면 다음과 같이 Xcode: /undefined로 표시되어 있었습니다:IDEs: Xcode: /undefined - /usr/bin/xcodebuild해결..

Expo에서 'os.availableParallelism is not a function' 오류 해결하기 문제 상황오늘 Expo 프로젝트에서 npm run start 명령어를 실행했을 때 다음과 같은 에러가 발생했습니다.TypeError: os.availableParallelism is not a function 원인 분석이 오류의 원인은 Node.js 버전 호환성 문제였습니다. os.availableParallelism()은 Node.js 19 버전부터 도입된 함수인데, 저는 Node.js 18 버전을 사용하고 있었습니다.해결 방법Expo 깃허브 이슈(#34946)를 확인한 결과, 최신 LTS 버전의 Node.js로 업그레이드하는 것이 해결책이었습니다.다음 명령어로 최신 LTS 버전을 설치하고 적용했습..

React Native 개발 시 Expo 네트워크 연결 문제 해결하기React Native와 Expo로 개발하다 보면 종종 모바일 기기와 개발 서버 간의 연결 문제가 발생할 수 있습니다. 특히 npx expo start 명령어로 서버를 시작한 후 Expo Go 앱으로 연결이 되지 않는 상황은 많은 개발자들이 경험하는 문제입니다. 이번 글에서는 이러한 네트워크 연결 문제의 원인과 해결 방법에 대해 알아보겠습니다.연결 문제 발생 상황일반적으로 Expo 개발 서버를 시작하고 QR 코드를 스캔하면 Expo Go 앱으로 쉽게 접속이 가능합니다. 하지만 다음과 같은 상황에서는 연결이 실패할 수 있습니다:"Unable to connect to development server""Network response time..

React Native 시작하기: 설치부터 expo-router 환경설정까지최근 모바일 앱 개발 프로젝트를 시작하면서 React Native를 선택했고, 라우팅 라이브러리를 결정하는 과정에서 많은 고민이 있었습니다. 이 글에서는 React Native 설치부터 라우팅 환경설정까지의 과정을 공유하려고 합니다. 특히 expo-router와 react-navigation 중 어떤 것을 선택할지에 대한 의사결정 과정과 expo-router 세팅 방법을 자세히 다룰 예정입니다.1. React Native 설치하기React Native를 시작하는 방법은 크게 두 가지가 있습니다: React Native CLI를 사용하는 방법과 Expo를 사용하는 방법이 있습니다. 이 글에서는 초기 개발 환경 구성이 더 간편한 Ex..