음악, 삶, 개발

https://stackoverflow.com/questions/16191324/performance-problems-with-html5-canvas-in-some-mobile-browsers https://stackoverflow.com/questions/38069462/html5-canvas-save-and-restore-performance

typescript 는 switch 같은것을 조건 type 에 사용할수없어서 위와 같이 nest 해서 표현해야함.

https://iconify.design/ https://github.com/unocss/unocss

https://stackoverflow.com/questions/9943771/adding-a-favicon-to-a-static-html-page

1. 구글검색결과 https://www.google.com/search?q=input+range+styling&tbm=isch&ved=2ahUKEwiT2PaPsZf6AhVOx5QKHZDcAl4Q2-cCegQIABAA&oq=input+range+styling&gs_lcp=CgNpbWcQAzIGCAAQHhAIMgQIABAYMgQIABAYUABYAGD_A2gAcAB4AIABkgGIAZIBkgEDMC4xmAEAqgELZ3dzLXdpei1pbWfAAQE&sclient=img&ei=EWkjY9OLOM6O0wSQuYvwBQ&bih=1176&biw=1024&rlz=1C5CHFA_enKR938KR938 2. w3c 의 브라우저간 표준화에 대한 issue https://github.com/w3c/csswg-drafts/i..

다른 사람들의 코드를 보면 막 css class 명, vue 에서 제공하는 특정 함수들이 막 섞여있어서 그런것들 다 배제하고 작성해야하는 최소한의 코드만을 사용했다. 잔 곁가지들을 다 걷어내고 완전한 순살 코드만 작성한것이다. "click" 대신 "mousedown" 을 사용하였고, vue 의 component 들과 송신하기위한 ref 외에는 lifecycle hook 등은 일체 사용하지않고 구현하였다. dropdown 메뉴에서 중요한건 window event listener 가 메뉴가 열리면 생기고, 닫히면 소멸해야하는것이다. Vue 에서 잠시 Svelte 로 넘어갔던 이유가 boilerplate 코드가 너무 많다고 느꼈기때문인데, Vue 3 의 script setup 이 생기면서 거의 Svelte 수..

일일히 짜증나게 setter 를 만들어내는것보다는, 하나의 setter 를 만들려고했다. 생각보다 매우 간단하게 만들수있었다. IFoo 가 필요하지않을 방법도 있을거같긴한데, 일단 이 방법도 좋아보인다.

나는 아래의 데이터를 가지고있었고 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" ..