음악, 삶, 개발

티스토리를 하면서 알게된 개발자분의 추천으로 PixiJS 를 시작하게되었다. 극한의 상황을 예상해보며, 이것저것 시도해본 결과 5만개 rect 를 randomize 하는 코드를 작성해보았다. 최적화를 통해 5만개를 60fps 로 출력할수있다는것은 대단한 기술임에는 분명하다. 여러 webGL 관련 프레임워크들이 존재하지만, 다른 녀석들보다 PixiJS 가 가장 빠르다. 포인트는 미리 만들어놓고 재사용하는것이다. Perna 님 덕분에 알게된 오브젝트 풀링 https://notyu.tistory.com/m/64 의 개념이 PixiJS 를 사용할때 매우 중요할듯하다. import './style.css' import * as PIXI from 'pixi.js' const app = new PIXI.Applica..

1. classNames 라는 아래 함수를 생성한다. export const classNames = (...classes: (false | null | undefined | string)[]) => { return classes.filter(Boolean).join(" ") } 2. VSCode 의 setting.json 에 아래의 요소를 추가한다. /* setting.json */ { "tailwindCSS.experimental.classRegex": [ ["classNames\\(([^)]*)\\)", "'([^']*)'"] ] } 3. 사용한다

TailWind 에서 tailwind.config.js 파일을 연뒤에, exports 안에 theme 안에 colors 객체를 만든뒤 아래와 같이 리터럴로 작성한다. /* tailwind.config.js */ module.exports = { theme: { colors: { 'myOwnColor' : 'black', 'myAnotherColor' : 'white' }, } } 그러면 html 에서 Hello 와 같이 사용할수있다. 이런 점이 TailWind 에서 너무 편한것이다. 색만 정의해놓으면 css 파일열고 backgroundColor 니 color border-color 이딴거 신경쓸 필요없이 바로 조합해서 사용할수있게된다. 심지어 inline style 도 아니며 jit 컴파일된다. 수정) ..

최대한 Redux 의 사용을 피하고자 다른 대안이 있는지 뒤져보았다. Redux 코드들을 이것저것 보았는데, bolierplate 코드가 너무 심하게 많다는 느낌을 지울수없었고, 잘 와닿지도, 이해도 되지않았다. 이렇게 힘들게 상태관리가 되야하는가라는 느낌도 있었다. 이러한 이유로 뒤지다보니, 생각보다 npm 다운로드수가 높은 녀석들이 3개나 있었다. 1. zustand : 다운로드수 - 95,890 https://www.npmjs.com/package/zustand 2. recoil : 다운로드수 - 92,644 https://www.npmjs.com/package/recoil 3.jotai : 다운로드수 - 17,038 https://www.npmjs.com/package/jotai 자세한 내용은 더..

마우스를 더블클릭하거나 드래그하는와중에, button 속에 text 가 선택된다. 이것을 방지하기위해 css 에서 아래와 같이 작성한다. button { user-select : none; }

지난 1주일동안 React app 의 성능 향상을 위해 많은 자료를 찾아보고, 직접 실험도 이것저것 해보았다. 사실 음악 관련 GUI 를 리액트로 개발한 선례를 찾아보기가 힘들었기에, 스스로 파헤쳐내야 하는것도 꽤나 많았다. 일반 앱들과 음악앱이 다른점은, 음악앱에서는 UI 의 레이아웃 전환이 매우 빠르게, 매우 자주 발생한다는것이다. Ableton 을 생각해보면 수많은 UI 버튼, 슬라이더, 믹서 노브등이 떠 있는 상태에서, tab 키를 누르면 곧바로 다른 레이아웃으로 전환된다. 이 레이아웃 전환시 30ms 이상이 되면 사용자도 충분히 인지할수있으며, "어 조금 느린데? 왜 이러지?" 라면서 나에게 이메일을 보내게될수있다. 음악을 하는 사람들은 작은 타이밍의 차이도 매우 예민하게 잘 느낄수있기때문이다...

useEffect 를 통해 props 에 따라 다이나믹하게 div 의 레이아웃을 css 가 아닌 style 속성을 통해 변경해야할 상황이 생겼는데, 레이아웃이 변경될때마다, 화면이 깜빡거리는 일이 발생했다. 원인을 몇시간동안 추적해본 결과 useEffect 에서 style 을 변경하여 생기는 문제였다. useEffect 는 Max 에서 [delay] 객체를 사용하는것마냥 약간의 시간차를 두고 호출되는거같다. 이 약간의 시간차가 화면이 깜빡거리게끔 느끼게 하는것이다. 예를 들어, width 가 바로 0 이 되어야하는데, 40 에서 약간 떠있다가 0 으로 되어 깜빡이는것처럼 느껴졌던것이다. 결국 className 에 display: none 에 해당하는 class 를 asign 함으로써 문제를 해결할수있었다..

항상 html 에서 레이아웃을 만들때 1D 형태를 쓰게되면 Flexbox 를 사용해야한다라는 강박관념이 있었지만, 1D 도 Grid 가 우월하다. 이에 관해 많은 검색을 해보았는데, 다른 이들도 Grid 가 할수없는 레이아웃이 필요하지않은 이상은 1D 도 Grid 를 default 로 사용하라고 권장한다. https://www.reddit.com/r/web_design/comments/7uxldi/should_i_be_using_a_css_grid_or_flexbox_or_a/ Grid 가 Flexbox 보다 압도적으로 뛰어난 점은 자식 요소의 css 작성을 줄여준다는것이다. 대부분의 경우 자식 요소에서 아무것도 작성하지않아도 될때가 많다. 반면 Flexbox 는 자식 요소에서 무언가를 굉장히 많이 해주..

Grid 를 Flex 보다 우선적으로 사용하는 이유는 무엇보다도 자식 요소에 아무런 css 태그가 들어가지않아도, 부모가 자식의 width 나 height 를 결정할수있다는것이다. 더 놀라운 사실은, 부모 css 에서 Grid 를 건드리면 자식 요소를 숨길수도있다. 보통 자식 요소를 숨기기위해서는 display: none 을 사용하지만, Grid 를 사용하면 훨씬 유연하게 dynamic layout 을 구현할수있다. .parent { display: grid; grid-template-columns: 1fr 1fr 1fr; } .parent-hide-2nd-child { grid-template-columns: 1fr 0 1fr } 위에서 보이는것처럼, 2번째 자식 요소의 column 크기를 0 으로 주..

최근에 React 로 GUI 개발을 시작하면서 절실하게 느낀... 개발을 할수록 머리속에 예상된 가장 큰 점 하나는.. 미디나 오디오 관련된 코드보다 GUI 와 관련된 코드가 압도적으로 길것 이라는 생각이다. 왜 그러냐면, 우선 사용자 눈에 이뻐야하면서도, workflow 를 향상시켜줄 UX 여야만 하기때문이다. 결국 아무리 내부적으로 뛰어난 알고리즘을 장착하고있다하더라도, 사용성이 불편하다면 사용자의 외면을 받게된다. 이 둘을 동시에 떠올리는것은 생각보다 창의력 + 미적 감각을 요하는 굉장히 난이도 있는 작업이다. 미디 데이터나 오디오를 다루는 알고리즘을 잘 만들었다고 해도, 결국 GUI 를 하지않았다면 프로덕트로 향하는 길의 절반도 가지 못한것이다. 다시 말하지만 확실한건, GUI 관련 코드가 오디오..