음악, 삶, 개발

https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered

이 사이트가 (https://grid.kiwiberry.nz/) 가상 스크롤의 가장 적절한 예제를 보여주고있다. Vue 로 구현되어있지만, 나는 vanilla HTML 에서 구현해보려한다. 위의 사이트를 스크롤하며 콘솔을 열어 확인해보니 대략 아래와 같은 로직을 확인할수있었다. 1. scroll 을 구현할 div 를 먼저 부모 div 로 감싼뒤 overflow: auto 를 설정한다. 2. 이 div 안에 scroll 을 담당할 div 를 넣고, height 를 item 갯수 * itemHeight 로 매우 길게 생성한다. (이게 중요) (item 갯수가 100000개라고 가정하면 50px 이라해도 500백만 px 이 나온다) 3. 이제 이 scroll 할 div 에 첫 부모 container (view..

위와 같이 myFunction 이라는 함수를 한 파일안에서 만들었고, 이를 여러 파일에서 불러서 사용하는 상황을 생각해보자. 개발을 하다보면 여러 helper 함수나 클래스를 만들게되기때문에 이와 같은 상황은 무조건 일어난다고 보면 된다. 이때 내가 만든 myFunction 이라는 함수명을 변경했을때, 이를 사용하는 나머지 파일의 함수명이 변경되지않는다면 에러가 발생한다. 애초에 default export 를 하면 되지않느냐고 반문할수있으나, 이렇게 pure function 인 경우는 가능하지만, 클래스를 만들었고, 함수들이 그안에 존재하고있다면 어짜피 named export 인 셈이다. 다행히도 VSCode 자체에서 해당 프로젝트안에 모든 파일에 해당 이름을 찾아 한번에 변경하는 방법이 존재한다. Cm..

객체는 복사하지않는 이상, 대입할 경우 reference 임을 우리는 알고있다. 하지만 막상 개발을 하고 앱이 굉장히 커지면 reference 를 value 라고 착각하는 바보같은 실수를 하게된다. 방금 내가 한 실수로 인해, 3시간동안 디버깅한 결과 경우 실수를 찾아냈다. 아래와 같은 경우였다. const DEFAULT_VALUES = [1, 2, 3] class Foo { public values = DEFAULT_VALUES // 여기가 문제!!!!!!!!!!! public setValue(index: number, value: number): void { this.values[index] = value } } const f1 = new Fo..

https://stackoverflow.com/questions/26663494/algorithm-to-draw-waveform-from-audio https://matt.aimonetti.net/posts/2015-12-audio-dsp-demystified-sampling/ https://matt.aimonetti.net/posts/2019-06-generating-waveform-data-audio-representation/ https://matt.aimonetti.net/posts/2019-07-drawing-waveforms-in-flutter/ https://github.com/bbc/audiowaveform https://pudding.cool/2018/02/wav..

https://www.npmjs.com/package/tonal https://github.com/tonaljs/tonal 음악 관련 패키지가 그리 많지는 않지만 쓸만한 라이브러리이다. 노트를 이것저것 변환할때 유용하다.

https://www.npmjs.com/package/fdir fdir The fastest directory crawler & globbing alternative to glob, fast-glob, & tiny-glob. Crawls 1m files in < 1s www.npmjs.com 이 라이브러리를 꽤 오래전에 사용했었는데, 겨우 다시 찾았다. 만약 샘플 브라우저를 만들게된다면, 사용자의 폴더안에 있는 모든 샘플들의 경로를 다 가져올수있어야한다. (빠른 시간안에) 이때 이 fdir 라이브러리를 사용하여 Node For Max 에서 구현했었는데, 정말 빨랐다. 몇십만개 샘플이 들어가 있는 폴더를 테스트했었는데, 정말 몇초 걸리지않았다. 반면에 C 로 구현된 Max 의 [folder] 객체를 사용할..

일단 관련 자료들을 검색중이다. https://www.html5gamedevs.com/topic/33044-pixi-sprites-are-blurry-on-mobile-devices/ https://www.html5gamedevs.com/topic/42955-solved-how-to-scale-the-pixijs-view-without-making-the-game-blurry/ https://bleepcoder.com/pixi-js/579640185/i-want-to-make-a-responsive-screen-like-a-demo https://www.html5gamedevs.com/topic/26880-blurry-text-in-pixijs/ https://github.com/pixijs/pixijs..

먼저 코드를 보자. // https://pixijs.download/dev/docs/PIXI.BitmapFont.html BitmapFont.from("LeeFont", { fontFamily: 'sans-serif', fontSize: 100, fontWeight : '700', fill: 'white', }, { chars : [ ...BitmapFont.ALPHANUMERIC, // 모든 알파벳, 숫자 포함. (특수기호 제외) '△', '#', '(', ')', ',', '-' // 여기 직접 특수기호들 추가 ]}) const bitmapText = new BitmapText(text, {fontName : 'LeeFont', fontSize : 14 }) this.stage.addChild(bit..