음악, 삶, 개발

나는 아래의 데이터를 가지고있었고 const data = [ { arr: [1, 2] }, { arr: [3, 4] }, { arr: [5, 6] }, { arr: [7, 8] } ] 결과적으로 1d 배열을 얻고싶었다. const arr1d = [1, 2, 3, 4, 5, 6, 7, 8] 이때 map 과 concat 을 섞어서 사용하게되는데, 반드시 concat 의 시작 배열에 as number[] 로 type 을 명시해줘야한다. /* https://github.com/microsoft/TypeScript/issues/36769 */ const arr1d = ([] as number[]).concat (...data.map (item => item.arr))

Class 를 만들다보면 constructor 의 인자로 어떠한 type 이 넘어올지 알수없다거나, 여러 type 들이 넘어올수있게끔 허용하고싶다. 물론 자바스크립트에서는 type 이 없으므로 어떠한 것이든 넘길수있지만, Typescript generic class 를 사용함으로써 넘겨진 인자의 type 을 추후 개발하면서 체크할수있게된다. 문법은 클래스명에 를 붙여주고, 인자명에 T 를 붙여줘야한다. class Foo { constructor (public content: T) {} } new Foo ("one").content // string new Foo (["one"]).content // string[] new Foo (1).content // number new Foo ([1]).conten..

https://velog.io/@vlwkaos/Structural-vs-Nominal-Subtyping-그리고-TypeScript https://michalzalecki.com/nominal-typing-in-typescript/ https://stackoverflow.com/questions/26810574/is-there-a-way-to-create-nominal-types-in-typescript-that-extend-primitive-types C++ 같은 경우 클래스 이름으로 타입을 결정하는 nominal typing 이다. 반면 Typescript 는 클래스의 내부 구조가 동일할시 동일한 타입으로 인식하는 strutual typing 을 사용한다. class A { name = "hello" ..

const enum 을 자주 사용하는데, 이 const enum type 에서 몇몇의 property 를 제외한 새로운 type 을 Exclude 를 통해 만들어낼수있다. const enum Foo { ONE, TWO, THREE } type Hoo = Exclude const hooA: Hoo = Foo.ONE // error const hooB: Hoo = Foo.THREE // ok 이 Exclude 를 실전에서 사용하게된 이유는, 디바이스의 파라미터들이 있었는데, parameter lock 기능을 제공하기위해 특정 parameter 들은 제외되어야했기때문이다. color 같은 경우는 굳이 lock 기능이 필요없는 파라미터였다. 따라서, 아래와 같이 작성이 되었다. const enum Paramet..

https://coolors.co 한 Juce 개발자가 추천해줌.

그동안 Web UI 를 개발해오면서 진짜 다양한 시도를 해보았다고 생각한다. 내가 느낀건 생산성 성능 은 절대 비례 관계가 아니라는것이다. 사실 거의 반비례 관계 같기도했다. 음악 관련 UI 들 특징이 버튼을 하나 눌렀을때 동시 다발적으로 여기저기서 변화가 일어나게된다. 심지어 내가 만든 App 에서는 버튼 하나를 누르면 128개의 색깔이 변경되어야하는것도 있다. 이는 곧 동시에 여러가지 DOM 의 변화가 일어난다는것이다. 이 부분에서, 모든걸 캔버스에 그려버리는 Pixi.js 를 선택했었는데 결과적으로 나쁜 선택은 아니었으나, 그다지 엄청 좋은 선택도 아니어서 2달간 시도후 DOM 으로 돌아오게되었다. (이에 대한 이야기는 따로 정리하겠음). 하여튼 React 나 Vue 같이 생산성이 좋은 경우 대부분..

span 은 grid 선을을 기준으로 늘리는것이다. 이때 span 의 위치는 시작일수도있고 끝일수도있는데, 의미가 다르다. grid-colum 의 경우 span 의 오른쪽에 올 경우 우측 방향으로 , 즉 width 가 우측으로 늘어나며, span 이 먼저 오는 경우는 오른쪽에서 왼쪽으로 width 가 늘어난다. span 이 먼저 오는 경우가 조금 사용을 안하는데, 마치 right: 0 으로 두고 width 을 증가시키는것돠 비슷한 원리이다. #foot { grid-column : 1 / span 4; /* line 1 에서 우측 방향으로 4만큼 이동하라. */ } #foo { grid-column: span 4 / 10; /* line 10 에서 왼쪽으로 4칸. right: 0 과 비슷한 원리 */ }

그동안 HTML & CSS 를 많은 UI 를 디자인해보면서, 가장 시간이 많이 잡먹는것이 레이아웃인데, 가장 깔끔한 최고의 방법은 #container { grid-template: repeat(128, 1fr) / repeat(128, 1fr) } 이렇게 하면 매우 조밀하게 형성되기때문에 쓸데없는 wrapper 요소들을 생성하지않아도 된다. 이렇게까지 하는 이유는 wrapper 요소로 중첩 depth 가 깊어질수록 성능이 매우 크게 저하되는것을 확인했기때문.

https://css-tricks.com/animating-number-counters/ @property, counter-reset, counter() /* body { background-color: black; } */ @property --num { syntax: ''; initial-value: 0; inherits: false; } #foo { transition: --num 20s; counter-reset: num var(--num); } #foo:hover { --num: 100000000; } #foo::after { content: counter(num); }