개발 171 [Audio] 오디오를 눈으로 보는 2가지 방법(peaks와 wavesurfer) 들어가며 이번 글에서는 오디오를 그리는 방법에 대해 알아보고 간단한 구현 방법을 설명합니다. 그다음으로는 라이브러리 Wavesurfer에 대해 간단히 소개하고 알아보도록 하겠습니다. 다루는 내용은 아래와 같습니다. 오디오를 그리는 방법 Wavesurfer를 다루는 방법 v6 -> v7로 바뀌면서 달라진 점 오디오를 그리는 방법 일단 오디오를 다루는 회사에서 근무하고 있는 저에게 오디오를 그리는 기능은 필연적이었습니다. 그래서 처음에는 직접 waveform를 그렸습니다. 그리는 방법은 생각보다 간단한데요. 직접 구현하기 직접 구현하는 방법은 Canvas를 이용하는 방법입니다. ( 다른 라이브러리도 같습니다만) 데이터 가져오기 로컬에 있는 파일이던 서버에 있는 파일이던 일단 데이터를 가져오는 것부터 시작합니.. 2023. 8. 13. [개발회고] 23년 7월 회고 개발 이번달은 퍼블리셔와 관련된 공부를 많이 했던 달이다. 어떤 식으로 해야 디자이너의 시안을 좀 더 정확히, 그리고 빠르게 구현할 수 있을까에 대한 고민의 발로이다. 피그마의 개발자모드를 디자이너에게 설명하기도 했고, 내가 최근에 잘 읽었던 도서를 선물하기도 했다. 그리고 나 또한 디자인관련된 책을 추천받아서 읽고 있다. 이게 개발카테고리에 있는 것이 이상해보일지 몰라도, 디자인은 프론트엔드 개발을 하다 보면 마주칠 수밖에 없는 분야이기도 하다. 특히나 스타트업일수록 개발자가 기획, 디자인을 해야할때도 종종 있어서 얼른 이쪽 분야의 익숙해졌으면 좋겠다. 이번달 개발블로그은 5개를 썼다. 다른 동료가 내 글을 어디선가 읽고 잘 읽고 있다고 말을 해줬다. 참 기분 좋은 일이다. 코딩시간 | 85.5시간 전.. 2023. 8. 1. [개발잡담] 디아블로4와 함께 알아보는 스파게티 코드 들어가며 최근에 디아블로 4 레딧을 보다가 상당히 어이없는 글을 발견했습니다. 오픈월드 게임인 디아블로 4에서 유저끼리 만나는 순간 과부하가 걸린다는 것인데요. 이게 대체 무슨 말도 안되는 소리인가 싶으면서도 블라자드(디아블로4 개발사)의 유명한 스파게티 코드에 대해 살펴보러 가보겠습니다. 스파게티 코드란? 여기서 스파게티 코드를 설명하기엔 짧으니 위키백과 링크로 대체하겠습니다. 스파게티 코드 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 스파게티 면발 스파게티 코드(spaghetti code)는 컴퓨터 프로그램의 소스 코드가 복잡하게 얽힌 모습을 스파게티의 면발에 비유한 표현이다. 스파게티 코드는 정상 ko.wikipedia.org 디아블로 4 스파게티 코드 게임을 하다보면 게임.. 2023. 7. 27. [유튜브] url로 영상의 정보를 가져오는 기능 만들기 들어가며 이번 글에서는 유튜브 링크를 기반으로 해당 영상의 meta 정보를 가져와 활용하는 예제를 살펴보겠습니다. 최근 업무에서 유튜브 링크로 실제 데이터를 가져오기 전에 브라우저 단에서 10분짜리 영상인지를 판별하는 로직이 필요했습니다. 서버에서 10분 이상인 영상의 경우 처리할 수 없다는 에러코드가 나옵니다. 하지만 모든 업로드 프로세스가 마무리되고 난후에 날아오는 에러코드이기에 UX적으로 불편했습니다. 그래서 이번에는 유튜브 링크로 바로 meta를 가져와 유저에게 알려주는 기능을 개발하게 되었습니다. 유튜브 링크로 바로 meta를 가져와 유저에게 알려주는 기능 본문에 들어가기 전에 완성된 기능을 보고 가겠습니다. 기능 구현 일단 해당 기능을 구현하기 전에 라이브러리가 있나 살펴보았습니다. 여러 가지.. 2023. 7. 25. 이전 1 2 3 4 5 6 7 8 ··· 43 다음
