본문 바로가기

개발 171

[개발회고] 23년 5월 회고 개발 이번달의 중요 개발 크게 2가지라 볼 수 있겠다. 비디오-오디오 싱크를 하는 기능 플러터로 MVVM 패턴을 활용하여 앱 런칭하기 비디오-오디오 싱크를 하는 기능 유저가 올린 비디오와 오디오를 Edit할수 있는 웹기반 온라인 툴을 만들고 있다. (AI를 곁들인) 기존에는 Cli 기반으로 동작했던 모델을 브라우저상에서 돌리면 좋겠다는 목표를 가지고 개발을 진행했고 여차저차 시연일정을 맞출 수 있었고 가장 날 괴롭힌 것은 대용량 미디어 파일에 대한 처리였는데, 에디팅툴이기에 미디어파일을 브라우저에 올리고 사용했는데 이게 1시간이상짜리 비디오 1개와 오디오 N개가 들어갈 수 있는 구조다보니 브라우저의 OOM이 떴다. 개선 방법에 대한 블로그글은 따로 작성중이지만 이 기능을 위해 기존에 사용하던 오픈소스를 .. 2023. 5. 31.
[리액트] Devtool로 확인하고 성능개선하기 들어가며 안녕하세요. 핸디입니다. 최근에 모바일 버전에 대응하여 반응형 레이아웃과 컴포넌트로 변경했습니다. 다만 데스크톱에서 원활하게 돌아가던 서비스가 구형단말기에서는 랜더링 중에 멈추는 현상이 발견되었습니다. 그래서 이번에는 간단한 성능테스트하는 방법, 리펙토링 하는 방법, 그리고 최종결과에 대해 살펴보도록 하겠습니다. 결과부터 말씀드리면 성능향상의 기준이 각자 다르지만 유휴시간 기준으로 16배, 스크립팅시간으론 4배 빨라졌어요. 성능테스트하는 방법 일단 데스크탑 기준으로 성능을 측정해 보겠습니다. 우리의 영원한 친구 크롬 개발자 도구와 리액트 개발자 도구로 측정해보겠습니다. 크롬 개발자 도구 일단 보시면 Idle 시간이 10초 중에 0.5초밖에 없습니다. 바쁘게 열일하고 있었군요.. 리액트 개발자 도.. 2023. 2. 8.
[Next.js] 분리된 음원을 다시 하나로 (Web Assembly, web worker) 들어가며 만드는 서비스 중에 AI를 통해 음원을 분리해주는 "Source Separation"이 있습니다. 음원을 분리하여 유저에게 분리된 음원소스를 다운로드하는 기능을 제공하고 있습니다. 최근 유저 피드백 중에 분리된 음원을 합쳐서 하나의 파일로 다운로드 하는 기능이 들어와 개발을 하게 되었습니다. 이번 글에서는 간단하게 라이브러리를 이용해 기능을 만들어보았습니다. 이후 속도 개선을 위해 Web Assembly 기반의 FFmepg wasm을 사용하고, UI Block를 방지하기 위해 변환 기능을 Web Worker 상에서 동작하는 방법에 대해 알아보겠습니다. 결론부터 말하자면 웹어셈블리는 매우 짱짱이었고 테스트 데이터 결과 15~30배의 성능개선이 이뤄졌습니다. 대상 독자 브라우저에서 오디오파일을 다루.. 2023. 2. 1.
[포트폴리오] AI로 만드는 연차별 포트폴리오 (ChatGPT) 들어가며 금요일 오후, 퇴근을 업무도 업무를 마무리하면서 ChatGPT를 가지고 놀고 있었습니다. 불현듯 ChatGPT가 써주는 프론트엔드 개발자의 포트폴리오는 어떨까라는 생각을 가지고 한번 물어봤습니다. 아무래도 많은 포트폴리오 데이터를 학습했으니깐 평균적인 데이터가 아닐까 생각됩니다. 그럼 한번 가보시죠. 포트폴리오 주니어 개발자 주니어 프론트엔드 개발자로 기술 스택은 typescript, react, next, aws를 넣어봤습니다. write resume that junior frontend devolper with typescript, react, next, aws 하나의 단락씩 살펴보도록 하겠습니다. ㅋㅋ Summary TypeScript, React, Next.js, AWS에 경험이 있는 .. 2023. 1. 27.

티스토리툴바