프로젝트 개발/MP3 Tools 웹앱 (Drop)
-
[4일차] CI/CD 뻘짓 2차전 및 meta 태그적용프로젝트 개발/MP3 Tools 웹앱 (Drop) 2021. 5. 22. 21:24
4일차에는 검색엔진 활성화를 위한 메타 태그를 적용하려다 package 의존성이 또 잘못되어 뻘짓을 진행하게 되었다. 1. CI/CD 뻘짓 2차전 지난시간에 fsevents 이슈에 의해 배포자동화가 동작하지 않는 문제가 있어 optionalDependencies 로 해결했었다. 그 뒤 디자인 적용과, 검색엔진최적화(SEO) 작업을 위해 아래 포스트를 참조하여 작업을 진행했다. https://velog.io/@byseop/SPA%EC%97%90%EC%84%9C-%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%84-%EA%B5%AC%EC%B6%95%ED%95%98%EC%A7%80-%EC%95%8A%EA%B3%A0-..
-
[3일차] Cover 추출기능 화면 임시구현 및 메뉴 변경프로젝트 개발/MP3 Tools 웹앱 (Drop) 2021. 5. 20. 22:02
이번시간엔 본 프로젝트 구현보단 ffmpeg load(), exit() 에 대한 테스트 및 예제코드를 작성하는데 좀 더 많은 시간을 보냈다. 따라서 간단한 작업만 하고 마무리지었다. 1. Cover 이미지 추출기능 mp3 커버에 저장된 이미지를 추출하는 기능과 기능 제공 화면을 구현했다. 임시구현이기 때문에 Import 화면에서 변경된 바 거의 없다. 2. 메뉴 수정 메뉴명칭이 너무 길어 몇 개 화면만 구현해도 메뉴가 못생겨질 것 같아 보였다. (이미 충분히 못생기긴했지만..) 따라서 조금 불편할지라도 depth를 1에서 2로 늘렸다. 3. FFmpegService 구조 변경방안 마련 사실 1일차 때 FFmpegService 싱글톤으로 구현하고, ffmpeg 객체를 1개만 사용하도록 한정한 이유가 ffm..
-
[2일차] ffmpeg.wasm 0.10.0 업데이트 및 github action npm ci 문제 해결프로젝트 개발/MP3 Tools 웹앱 (Drop) 2021. 5. 19. 17:37
1. ffmpeg.wasm 업데이트 개발 진행중 ffmpeg.wasm 이 0.10.0으로 업데이트 된 것을 확인했다. 이전에 문제가 있었던 스레드 종료이슈에 대한 기능이 구현되었다. 사용하면 원하는 상황에 바로 리소스가 해제되진 않는 듯 하지만 전혀 없었던 때에 비하면 훨씬 더 좋아졌다. setTimeout(() => { try { ffmpeg.exit(); } catch { } }, 0); ffmpeg.exit() 함수를 바로 호출하면 에러 메시지가 alert으로 표시되어 나온다. 따라서 timeout으로 감싼뒤 try catch로 처리했다. 2. 아이콘 변경 아이콘에 소소한 변경을 주었다. 지난시간에 만들었던 아이콘이 새로 디자인할 뮤직플레이어 웹앱에 어울릴듯하여 해당 아이콘은 새로운 뮤직플레이어 웹..
-
[1일차] MP3 Tools 웹앱 개발 시작프로젝트 개발/MP3 Tools 웹앱 (Drop) 2021. 5. 16. 17:13
한동안 관심을 가졌던 ffmpeg.wasm(https://ddochea.tistory.com/147) 으로 웹 서비스를 개발해보았다. 이번에는 광고를 붙이고 소소하게 수입이 들어오길 바라는 야망(?)을 품고 있기 때문에 어느정도 완성이 되면 URL을 공개할 것이다. 첫 시작으론 mp3 파일에 cover image를 추가하는 기능이다. ffmpeg.wasm 을 사용해보았기 때문에 구현자체는 어렵지 않았다. 프로젝트 구성 이번 프로젝트는 지난번 "뮤직플레이어 웹앱" 때와 마찬가지로 소스코드를 오픈해두었다. 다만 지난시간엔 App.ts 에 화면, 기능영역 구분없이 구현했었다. 이번엔 비즈니스 로직과 화면영역을 분리할 계획이다. 아이콘 및 파비콘 디자인 아이콘은 Figma를 통해 디자인하였다. 처음엔 어려웠지만..