말듣꾸5 음성 녹음 크로스브라우징 이번 포스트는 말듣꾸 프로젝트를 진행하는 당시 겪었던 이슈로 음성 녹음 기능을 구현하는 과정에서 OS와 브라우저에 따라 녹음이 불가능한 문제를 대응하였던 내용을 다루었습니다. 말듣꾸 프로젝트는 테스트 서비스로 사용자가 음성을 녹음하여 제출하면, 사용자가 어느 지역의 방언을 구사하는지 학습된 인공지능이 추론하여 결과를 제공하는 서비스입니다. 프로젝트에 관한 자세한 사항은 링크를 통해 확인 부탁드립니다. 🔥 발생한 이슈 음성 녹음 기능을 추가하기 위하여 MediaRecorder 를 이용하였습니다. 해당 기능을 Chrome 브라우저를 기준으로하여 개발을 진행하였는데, MediaRecorder 인스턴스 생성시 옵션으로 mimeType 을 Chrome 에서 사용가능한 audio/webm 으로 지정하였습니다. 기능.. 2022. 6. 9. [Next.js] SSR, SSG, ISR 구성하기 이전 포스트를 통해 Next.js 에서 SSR(Server Side Rendering) 과 SSG(Static Site Generation)의 방식으로 페이지를 생성하는 방법에 대해 다루었습니다. 이번 포스트에서는 SSR, SSG 과 함께 추가적으로 ISR(Incremental Static Regeneration)도 함께 다루어보겠습니다. 이전의 Next.js 기본 개념과 프로젝트에 사용한 이유 포스트에서 CSR, SSR, SSG 방식에 대한 설명을 이미 다루었으므로 관련된 설명은 생략하도록 하겠습니다. 관련 내용 확인이 필요한 경우 위의 포스트를 확인해주시기 바랍니다. 📘 SSR SSR(Server Side Rendering) 은 사용자가 서비스에 접속하여 서버로 요청을 보내는 경우, 서버에서 렌더링을.. 2022. 6. 9. [Next.js] 페이지 나누기 (라우팅) Next.js 를 이용한 개발에서 가장 기초적이며 필수적인 요소로 페이지 라우팅 입니다. 해당 포스트는 Next.js 에서 페이지 구성하는 방법과 진행한 프로젝트에서 어떠한 방식으로 라우팅을 이용하였는지에 대해 다루었습니다. 📘 React 페이지 구성과 라우팅 React 를 이용할때는 페이지를 구분하고 이동시키기 위하여 라우터 기능이 있는 react-router 라이브러리를 이용해야 합니다. 해당 라이브러리를 이용하기 위해서는 react-router 에 대한 추가적인 학습이 필요하고, 와 등을 이용하여 라우팅 구성이 필요합니다. 이러한 점이 React 에서 페이지를 구성하는것에 어려움을 가져다줍니다. 📗 Next.js 페이지 구성과 라우팅 Next.js 는 라우팅 기능을 내장하고 있어 손쉽게 페이지를 구.. 2022. 5. 28. [Next.js] 기본 개념과 프로젝트에 사용한 이유 진행하는 프로젝트의 프론트엔드 기술 스택으로 Next.js 를 사용하게 되었습니다. 해당 포스트는 Next.js 에 대한 간략한 설명과 진행한 프로젝트에서 Next.js 를 사용하게 된 이유에 관한 내용을 담았습니다. 이후의 Next.js 관련 포스트는 Next.js 를 이용하면서 발생한 이슈들에 대해 다룰 예정입니다. 📖 Next.js 에 대하여 위키백과에서는 Next.js 를 아래와 같이 설명하고 있습니다. Next.js 는 Node.js 를 기반으로 구축된 오픈 소스 웹 개발 프레임워크로, 서버 측 렌더링 및 정적 웹사이트 생성과 같은 React 기반 웹 애플리케이션 기능을 가능하게 합니다. 위키 백과 : https://en.wikipedia.org/wiki/Next.js 위의 내용에서 Next.j.. 2022. 5. 12. 말듣꾸 - 방언 분류 서비스 본 포스트는 프로젝트에 관한 간략한 설명, 관련 포스트 링크 내용등이 작성되어 있습니다. 상세 설명 및 코드, 서비스 화면 등을 확인하기 위해 중간에 작성된 Github 링크를 이용부탁드립니다. 🎁 말듣꾸 💡 프로젝트 소개 교통과 기술의 발전으로 과거와 다르게 지역간 교류가 활발하게 이루어지고 있습니다. 특정 지역의 방언을 구사하는 드라마와 영화가 많이 나오고 있고, 주변에 특정 지역 사투리를 구사하는 지인들이 많이 있습니다. 이러한 환경으로 내가 자란 환경과 다른 지역의 방언을 구사하는 경우도 있습니다. 사용자가 주어진 텍스트를 녹음하여 제출하면 여러 지역 방언을 학습한 인공지능 모델이 사용자의 억양과 유사한 지역 방언을 비율로 알려주게 됩니다. 테스트 결과에 따라 지역을 모티브로 제작한 캐릭터를 이용.. 2022. 4. 5. 이전 1 다음
