react 41 [Next.js] 분리된 음원을 다시 하나로 (Web Assembly, web worker) 들어가며 만드는 서비스 중에 AI를 통해 음원을 분리해주는 "Source Separation"이 있습니다. 음원을 분리하여 유저에게 분리된 음원소스를 다운로드하는 기능을 제공하고 있습니다. 최근 유저 피드백 중에 분리된 음원을 합쳐서 하나의 파일로 다운로드 하는 기능이 들어와 개발을 하게 되었습니다. 이번 글에서는 간단하게 라이브러리를 이용해 기능을 만들어보았습니다. 이후 속도 개선을 위해 Web Assembly 기반의 FFmepg wasm을 사용하고, UI Block를 방지하기 위해 변환 기능을 Web Worker 상에서 동작하는 방법에 대해 알아보겠습니다. 결론부터 말하자면 웹어셈블리는 매우 짱짱이었고 테스트 데이터 결과 15~30배의 성능개선이 이뤄졌습니다. 대상 독자 브라우저에서 오디오파일을 다루.. 2023. 2. 1. [상태관리] 내가 Zustand를 선택한 이유 (over the Recoil) 들어가며 편리함을 추구하는 프론트엔드 개발자 핸디입니다. 최근에 새롭게 진행한 사이드프로젝트에서는 recoil 대신에 zustand를 사용해 보았습니다. 그래서 이번 글에서는 zustand와 Recoil를 비교하고 zustand의 장점부터 사용법에 대해 설명하도록 하겠습니다 대상독자 간단하고 직관적인 상태관리 라이브러리에 대한 기초 지식이 필요한 개발자 zustand와 recoil 사이에서 고민하는 개발자 본문 들어가기 전에 잠깐 살펴본 npm Trend입니다. recoil의 0.7.6의 버전, 가장 많은 zustand의 star수와 압도적으로 작은 사이즈가 눈에 뜹니다. 그럼 이제 편리한 zustand의 세상으로 떠나보시죠. Zustand 독일어로 ‘상태’라는 뜻을 가진 라이브러리입니다. Jotai를 .. 2023. 1. 24. [Next] 안정감있는 서비스를 위하여 (Sentry) 들어가며 이번 글에서는 프론트엔드 서비스 안정성을 위해 Next.js 프로젝트에 Sentry(이하 센트리)를 도입하는 과정에 대해 다루도록 하겠습니다. 이후 Sentry의 세부 기능을 이용해서 유의미한 에러 로그를 활용하는 방법에도 알아봅시다. 대상 독자는 Next 프로젝트에 Sentry를 도입하여 유저의 안정성을 향상시키고픈 개발자 Sentry 기능을 활용해 좋은 서비스를 만들고 싶은 개발자 Sentry란? Sentry는 실시간 로그 취합 및 분석 도구, 모니터링 플랫폼입니다. 이미 많은 회사에서도 도입하고 있는 검증된 툴입니다. 프론트엔드를 하다보면 가장 난감할때가 어디선가 들려오는 에러입니다. ( ex. 친구한테 링크 공유했는데 안된데요.. ) 유저들의 런타임 환경을 모르기 때문에 이슈를 재연하기가.. 2023. 1. 12. [React] 우리서비스를 더 널리, SNS 공유하기 (Navigator.share) 들어가며 이번에 갑자기 서비스를 운영 중에 팬덤을 타고 SNS에 서비스가 공유되는 일이 발생했었습니다. 그래서 이번 기회에 유저의 편의성을 위해 링크를 만들어 제공하거나 SNS로 바로 공유가 가능하도록 기능을 구현한 방법을 다뤄보겠습니다. 대상 독자는 공유하기 기능에 대한 예시 코드를 살펴보고 싶은 개발자 리액트를 통해 공유 기능을 제공하려는 개발자 공유 기능 살펴보기 공유기능 생각보다 눈여겨보진 않았지만 어느덧 우리 삶에 깊숙이 들어온 기능입니다. 이번 기회에 다른 서비스 예시부터 그리고 어떤 UX를 가지고 있나 살펴보도록 하겠습니다. 공유하기의 UX 공유하기 기능은 크게 2가지 버전으로 나눌 수 있습니다. 일반 브라우저에서의 공유하기 모바일 브라우저에서의 공유하기 이렇게 나눠지는 이유는 실은 간단.. 2022. 11. 22. 이전 1 2 3 4 5 ··· 11 다음
