frontend 3

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

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

기술/웹 개발 2024.09.05

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

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

기술/웹 개발 2024.08.30

[typescript] typescript에서 Union Types를 enum처럼 사용하기

개인 홈페이지 프로젝트에서홈페이지에 띄울 내 개인정보들을담을 data들을 enum 형태로만들어야겠다고 생각했다 나도 typescript는 처음인지라이것저것 구글링을 해보았는데enum이 없는 javascript와는 다르게typescipt는 typescript 자체적으로enum을 지원하고 있었으나이 enum을 사용하지 않는 편이좋다고 하는 글을 하나 발견했다 https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.들어가며 안녕하세요. LINE Growth Technology UIT 팀의 Keishima(@pittanko_pta)입니다. ..

기술/웹 개발 2024.08.04