프로젝트 개발
-
[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를 통해 디자인하였다. 처음엔 어려웠지만..
-
[9일차] nailed it! 구현 마무리 및 해결되지 않은 문제프로젝트 개발/뮤직플레이어 웹앱 2021. 2. 14. 12:16
nailed it! 9일차를 끝으로 미완성된 재생 Progress bar 기능과 함께 프로젝트를 마무리 지었다. 실제 서비스하기엔 여러모로 부족하지만 애당초 실제 서비스 목표가 아니라 "iPhone과 mp3는 있지만, 맥북도, 앱스토어에 게시된 앱들도 믿지 못해서 직접 만든 웹 기반 음악 플레이어"에 상당 부분 충족했기 때문이다. 완성된 UI는 아래와 같다. 음악 커버 부분은 재생중인 음악별로 커버를 만들어 넣기 귀찮아서(!?) React 기본 이미지를 넣었다. 테스트 중에 Web Title에 현재 재생중인 음악 제목이 표시되었으면 좋겠다 싶어 수정했다. 프로그래스 바는 material-ui 에서 제공하는 LinearProgress 컴포넌트를 이용했으며 아래와 같이 간단하게 구현했다. 해결되지 않은 문제..
-
[8일차] React Prop를 이용해 음악 재생 리스트 하위 컴포넌트 구현프로젝트 개발/뮤직플레이어 웹앱 2021. 2. 13. 21:09
어제 기능적인 부분은 다 구현했다고 생각했는데 재생리스트를 놓치고 있었다. 그래서 8일차인 오늘은 아직 구현하지 않은 음악 재생 리스트 화면을 구현하는데 치중했다. 음악 리스트 화면은 음악 재생화면의 하위 컴포넌트 형태로 구성했으며, 음악 재생 버튼을 누를때 표시된다. 표시된 음악리스트는 indexedDB 순서에 따라 정렬되어 표시된다. 만약 셔플을 했다면, 셔플된 랜덤한 순서로 정렬되어 표시된다. 리스트에 표시된 음악 제목을 선택하면 해당 음악으로 바로 재생하며 하단의 X 버튼을 누르면 리스트가 닫힌다. 아래는 구현한 음악리스트 화면 컴포넌트에 대한 전체 소스이다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 걸 React에선 Prop 라고 불리는데, 컴포넌트간에 종속적인 부분이 생기는 것 같아..
-
[7일차] 셔플(Suffle) 기능 구현 및 길어진 Promise 코드를 async/await 로 정리프로젝트 개발/뮤직플레이어 웹앱 2021. 2. 12. 20:41
어제 작성한 소스코드로 반복재생, 다음 음악 재생, 음악 파일이 저장되어있지 않은 경우 storage에서 내려받는 기능 구현까지 주요 기능은 어느정도 갖춰지게 되었다. 남은건 셔플(Suffle) 기능과 재생목록화면, 메인 재생화면에 대한 UI 디자인 등이 남은 듯 하다. 오늘은 두 가지를 처리했다. 하난 셔플, 다른 하나는 길어진 소스코드에 대한 정리이다. 셔플 셔플 기능은 간단하게 구현 가능했다. 물론 이부분도 약간의 뻘짓이 들어 갔었기 때문에 별도의 포스트로 정리하였다. https://ddochea.tistory.com/97 [React Hook] 상태 훅(State Hook)을 내부함수로 정의할 경우 유의사항 이 소스 자체가 올바르다고 보긴 어렵겠지만 나중에 또 뻘짓할수도 있는점을 대비해 정리한 글..
-
[5~6일차] 주요 오류 발생사항 수정프로젝트 개발/뮤직플레이어 웹앱 2021. 2. 12. 00:10
소스코드를 대량으로 수정했다. 하드웨어상에서 재생/일시정지 지원을 위해 이벤트리스너를 설정하면서 겪게된 생각지도 못한 문제, 로그인 이후 재생상태에서 로그아웃했을때도 계속 재생되는 문제등을 수정했다. audio 태그에 이벤트리스너를 설정한뒤 다음 음악재생처리 과정에서 Hook에 대한 값이 제대로 변경되어있지 문제를 겪었고 원인과 해결방법에 대해선 별도의 포스트로 정리하였다. https://ddochea.tistory.com/93 [React Hook] 컴포넌트 내 Effect Hook(useEffect) 사용 개념정리 함수형 컴포넌트는 내부에 선언된 상태 훅(State Hook)의 변화나 렌더링 상황에 따라 함수형 컴포넌트 자체가 재 호출된다. 그래서 함수형 컴포넌트내에 단순히 변수를 선언하거나, 함수를..