기술 37

[react] Google Cloud text-to-speech API 이용해서 frontend에서 영어단어별 발음 재생 구현하기

외주로 작업하고있는 개발 프로젝트에서영어 문단이 있으면그 문단의 단어별로 녹음파일을재생해야하는 기능이 있었다 처음에는 모든 녹음파일들을Google Cloud text-to-speech기능을 사용해서front쪽 public 폴더에넣어놓고 재생해달라고 요청을 받았지만 https://console.cloud.google.com/vertex-ai/studio/speech/text-to-speech?project=gen-lang-client-0237974714&inv=1&invt=AbeTjg Google 클라우드 플랫폼로그인 Google 클라우드 플랫폼으로 이동accounts.google.com그렇게하면단어별로 하나하나 녹음파일을다운받아야한다는 수작업이 발생하고..나중에 영어 문단이 바뀌었을 때새로 작업하기가 꽤..

기술/웹 개발 2024.10.10

[react/tailwind css] 자체적으로 audio player 구현하기

이번에 맡게된 외주 개발 작업에서1. 사용자가 mediaRecorder로 녹음한거 재생2. mp3 파일 재생을 할 오디오 플레이어를 구현해야했다 Figma상 디자인은 이랬다  따라서 대충 슥 봤을 때크게 구현해야하는 기능은 1. audioURL 생성해서 audio component에서 재생가능하게하기2. play, pause 할 때마다 아이콘 바뀌고audio 재생했다가 멈췄다가해주기3. audio 전체 길이와 현재 재생 중인 시간계산해서 progress bar 만들어주기 였다   처음에는 audioBlob이나 URL을생성하지 않고바로 audioRef를 넣어서재생하게 해줬는데이유는 모르겠지만 재생에 필요한셋업을 하는 시간이 너무 오래 걸려서.. audioRef -> audioBlob -> URL로 변경한 ..

기술/웹 개발 2024.10.06

[c++] gcc 컴파일러로 여러 개의 c++ 파일 link해서 컴파일하기

이번에 c++ 과목 과제를 하면서교수님이 알려주신대로 gcc 컴파일러를 통해컴파일을 하는데 자꾸 ld: symbol(s) not found for architecture arm64clang: error: linker command failed with exit code 1 (use -v to see invocation)이 에러가 뜨는 것이었다 열심히 구글링을 해보니main함수가 있는 c++ 파일에다른 여러 c++ 파일들을 include 해줬는데이게 뭐 자체적으로 link가 되지않아 생기는 에러인 듯 했다 해결법은 초특급 간단하다 당연하겠지만 헤더에#include를 이용해서 가져올 다른 cpp파일을 입력해줘야한다그리고 저 cpp파일들은 같은 폴더 안에 있어야한다 그런 다음기존에 gcc 컴파일러로 컴파일하기..

기술/기타 2024.09.22

[ssh] ssh public key 로컬에 생성하기

AWS 서버에 접근하기 위해서나의 ssh public key가 필요로했다 ssh key는 주로 Git이나 AWS같은원격 서버에 접근해야하는 상황에서비밀번호대신 많이 쓰인다 나는 기존에는 없었으므로 새로 생성해주었다생성하는 방법은 매우 간단하다나는 Mac을 사용하므로MacOS 기준이다 우선/ .ssh 폴더에id_xxxxid_xxxx.pub이런 파일 2개가 존재하는지 확인해주자 존재한다면 이미 ssh key를로컬에 갖고이쓴 것이다 cat /.ssh/id_xxxx.pub 위 명령어를 통해 공개키를 확인해주면된다만약 없다면 새로 생성하면된다 ssh-keygen 위 명령어를 terminal에 쳐주면위와 같이해당 경로에 ssh key를 저장하겠다고 알려준다저 곳에 저장해주기 위해서 enter를 눌러준다  enter..

기술/기타 2024.09.22

[python/AzureAI] 발음평가(Pronunciation Assessment) API 사용해보기(cognitive-services-speech-sdk)

외주 개발 프로젝트에서front에서 user의 영어 녹음 파일을 받아와서pronunciation assessment API에 보내발음평가 결과를 받아와야했다 이 작업을 하면서 삽질을 너무 많이해서30분이면 끝날 작업을3일에 걸쳐서 완성하게 됐는데 ... 삽질의 과정은 딴것보다는 wav파일을 보내는 부분 때문이었는데 ,,, 삽질 기록과 해결법은 다른 게시물에이미 기록해뒀으니 참고해두면 좋을 것 같다 아무튼 그것만 빼면 그렇게 어려운 작업은 아니었던이번 작업을 기록에 남겨두려고한다 왜냐면 얘네 Microsoft라 공식문서가 잘돼있을 줄 알았는데그렇지 않았기때문에 ㅎ,,,일단 이 발음평가 API를 사용하려면미리 세팅해야하는게 2가지가 있다 1. speech_key와 service_region2. cogniti..

기술/기타 2024.09.09

[python] ffmpeg로 wav파일에 header 넣어주기(ffmpeg-python) (feat. microsoft speech cogni

react에서 user가 녹음한 파일을 백엔드로 받아와서 백엔드에서 발음평가 API를 날려 점수를 받아오는 기능을 구현해야했는데,, 내가 이용한 발음평가 API는 Azure AI의 pronunciation assessment였고 cognitive-services-speech-sdk를 다운받아 사용하는 방식이었다 https://ai.azure.com/explore/aiservices/speech/pronunciationassessment?tid=56b5b06f-62d4-4c16-b193-36e8379dae27Azure AI Studioai.azure.com github 코드를 보며 (microsoft라 기대했지만 생각보다 잘 안돼있음^^) https://docs.microsoft.com/azure/cogn..

기술/기타 2024.09.05

[react] client단에서 마이크를 이용해 녹음한 파일 API로 전송하기(multipart 전송)

현재 작업 중인 외주 개발 프로젝트에서user가 영어 문장을 컴퓨터 마이크를 통해 녹음하면해당 녹음 파일을 발음평가 API로 전송해user의 발음 점수를 받아오는 기능을구현해야했다. 따라서 유저가 녹음한 파일을 API를 통해백엔드 서버에 보낸 뒤,백엔드에서 발음평가 API로 다시 전송해서점수를 받아오고 이를 다시 프론트에서 받아와서화면에 뿌려줘야했다 정말 이 기능 구현하면서삽질을 너무너무너무너무너무 많이해서시간낭비를 제대로 했지만 ^^; 이 부분에서 삽질을 한 건 아니라서이 것도 까먹기 전에 얼른 기록으로 남겨두려한다1. recording 상태 확인 할 useState정의우선 record 기능을 컨트롤할버튼을 한 개 구현해줬다 recording이 아닐 때는Button의 텍스트가"Start Recordin..

기술/웹 개발 2024.09.05

[FastAPI/python] 파이썬 FastAPI로 정말 간단하게 API 만들기(CORS)

이번에 외주 작업하고 있는 프로젝트에서사이드 개발을 FastAPI로 하고있는걸 봤다 FastAPI는 들어봤었는데정확히 뭔지도 몰랐고파이썬으로 하는건지도 몰랐는데이번에 작업을 진행하면서정말 이렇게 간단하게도백엔드 작업을 할 수가 있구나 싶었서글을 작성해보려한다 백엔드 입문을spring으로 한 나에게는정말 신세계 그 자체,, https://fastapi.tiangolo.com/ko/#typer-fastapi-cli FastAPIFastAPI framework, high performance, easy to learn, fast to code, ready for productionfastapi.tiangolo.com 공식문서에도 굉장히 설명이 잘돼있어서참고하면 좋을 것 같다FastAPI 설치pip3 insta..

기술/웹 개발 2024.08.31

[PortOne/react] 통합 결제 연동 솔루션 포트원 react 프로젝트에 이식하기

이번애 배정받은 업무는개발하고 있는 웹 사이트의 결제 기능 개발이었다 결제를 위해서는 PortOne API연동을 알아봐달라고 요청받아서이번에 기능을 구현해보면서티스토리에도 남겨보려고 한다PortOne이란?포트원은 여러 가지 결제대행사들을연동해서 결제를 도와주는서비스이다https://portone.io/korea/ko 포트원 | 온라인 비즈니스 성장을 돕는 기업포트원이 제공하는 단 한 줄의 코드로 세상의 모든 결제를 손쉽게 연동해보세요. PG사 통합결제 연동, 해외결제, 파트너 정산 관리, 결제 애널리틱스, 수수료 혜택까지, 포트원의 맞춤 컨설팅을portone.io 설명에 따르면신용카드, 간편결제, 해외결제까지 모두손쉽게 연동이 가능하다고 한다PortOne 회원가입회원가입이 되어있지 않다면당연히 회원가입부..

기술/웹 개발 2024.08.30

[node.js/express/react] 새로운 endpoint로 새로운 화면 띄우기

요즘에 나는 대학원 생활과 동시에한 스타트업의 웹 사이트 개발의외주를 맡고있는데이 작업은node.js/express를 사용한 backend와react를 사용한 frontend 작업이다 아무튼 새로운 pricing 관련 페이지를만들어달라고해서react로 간단한 UI와js 파일을 작업해놓은 상태 이제 node.js에서 react를 사용해서새로운 endpoint에새로운 화면을 띄우는 법을 작성해보도록 하겠당 방법은 초특급 간단하다기존에 이미 기본 페이지가 구현되어있다면App.js에이렇게 구현이 작성이 되어있을 것이다  그럼 새로운 endpoint로 새로운 페이지를 띄우려면root페이지를 불러온 것과 동일하게React의 Route에서} /> 내가 설정해주고싶은 endpoint를 path에화면에 띄워주고싶은 컴포..

기술/웹 개발 2024.08.29