음악, 삶, 개발

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); }

pseudo 요소는 DOM 요소가 아니라서 직접적으로 변경할수없고 약간 우회해야한다. dataset 속성의 값을 삽입해준다. document.getElementById ("foo").dataset.label = "Label" 위와같이 한뒤 HTML 을 확인해보면 이런식으로 html 에 저장이된다. 이제 이 dataset 을 CSS 에서 "attr" 이라는 css 함수를 통해 읽어드린다. attr 는 css 에서 사용할수있는 calc() 과 비슷한 css 전용 함수이다. #foo::before { content: attr(data-label); }

window.addEventListener ("wheel", (e: WheelEvent) => { if (e.deltaY < 0) { /* Wheel Up */ } else { /* Wheel Down */ } }) wheel 이 올라갔는지 내려갔는지는 e.deltaY 가 음수인지 양수인지 확인해서 발견한다. 중요한것은 wheel 을 사용자가 올릴때 e.deltaY 값은 음수이다.

버튼을 보다보면, 라벨 + 버튼 인 경우가 많이 있다. 라벨도 text 를 가지고 버튼도 text 를 가지는데, 이때 라벨은 클릭할수없어야하고 버튼은 클릭할수있어야한다. 이때 보통 먼저 떠오르는 생각은 아래와 같을것이다. Label Click Me! 하지만 pseudo element 를 활용하면 굳이 dom 을 container 에다가 2개의 요소 (총 3개) 를 사용하지않고 하나의 요소로 끝낼수있다. ::before ::after 위의 ::before, ::after 는 html 안에서 추가하는게 아니라 CSS 에서 추가해야한다. 결과는 아래와 같다. .button { /* 일단 전체 event 를 끔. */ pointer-events: none; } .button::before { /* 라벨은 클릭해..