티스토리

음악, 삶, 개발

검색하기

블로그 홈

음악, 삶, 개발

leestrument.tistory.com/m

Lee_____ 님의 블로그입니다.

구독자: 3

방명록 방문하기

주요 글 목록

Canvas 성능에 관한 유용한 자료들. 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 공감수 0 댓글수 0 2022. 10. 6.
함수의 두번째 인자 type 을 첫번째 인자의 type 에 의해 결정하기. typescript 는 switch 같은것을 조건 type 에 사용할수없어서 위와 같이 nest 해서 표현해야함. 공감수 0 댓글수 0 2022. 9. 21.
관심가질 2가지 : icontify, unocss https://iconify.design/ https://github.com/unocss/unocss 공감수 0 댓글수 0 2022. 9. 18.
favicon 을 html 파일안에 embed 하기. https://stackoverflow.com/questions/9943771/adding-a-favicon-to-a-static-html-page 공감수 0 댓글수 0 2022. 9. 16.
input range 요소에 대한 유용한 자료들 모음. 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.. 공감수 0 댓글수 0 2022. 9. 16.
Vue 3 - dropdown 메뉴 만들기 (최소 순살 코드) 다른 사람들의 코드를 보면 막 css class 명, vue 에서 제공하는 특정 함수들이 막 섞여있어서 그런것들 다 배제하고 작성해야하는 최소한의 코드만을 사용했다. 잔 곁가지들을 다 걷어내고 완전한 순살 코드만 작성한것이다. "click" 대신 "mousedown" 을 사용하였고, vue 의 component 들과 송신하기위한 ref 외에는 lifecycle hook 등은 일체 사용하지않고 구현하였다. dropdown 메뉴에서 중요한건 window event listener 가 메뉴가 열리면 생기고, 닫히면 소멸해야하는것이다. Vue 에서 잠시 Svelte 로 넘어갔던 이유가 boilerplate 코드가 너무 많다고 느꼈기때문인데, Vue 3 의 script setup 이 생기면서 거의 Svelte 수.. 공감수 0 댓글수 0 2022. 9. 14.
갤럭시 A 시리즈의 역사 알파 (2014) : A3 (2015) : 4.5인치 - 110g - 안드6 - 1.5 - 8/16 A5 (2015) : 5.0인치 - 123g - 안드6 - 2기가 - 16 A7 (2015) : 5.5인치 - 141g - 안드6 - 2기가 - 16 A8 (2015) : 5.7인치 - 151g - 안드7 - 2기가 - 32 A3 (2016) : 4.7인치 - 132g - 안드7 - 1.5 - 16 A5 (2016) : 5.2인치 - 155g - 안드7 - 2기가 - 16 A7 (2016) : 5.5인치 - 172g - 안드7 - 3기가 - 16 A8 (2016) : 5.7인치 - 182g - 안드8 - 3기가 - 32 A9 (2016) : 6.0인치 - 200g - 안드7.. 공감수 0 댓글수 0 2022. 5. 31.
아이패드의 역사 미니 1세대 : 2012 - A5 - 512 - iOS 9 - 312g - 16/32/64 미니 2세대 : 2013 - A7 - 1GB - iOS 12 - 341g - 16/32/64/128 미니 3세대 : 2014 - A7 - 1GB - iOS 12 - 341g - 16/64/128 미니 4세대 : 2015 - A8 - 2GB - iOS 15 - 304g - 16/32/64/128 미니 5세대 : 2019 - A12 - 3GB - iOS 16 - 308g - 64/256 미니 6세대 : 2021 - A15 - 4GB - iOS 16 - 297g - 64/256 - 홈버튼 소멸지점. 1세대 9.7 : 2010 - 삼성 - 256 - iOS 5.. 공감수 1 댓글수 0 2022. 5. 30.
아이폰의 역사 ------ 30핀 충전 --------------------------------------------- 아이폰 1 : 2007.01 - 삼성 - 128 - iOS 3 - 135그램 - 4/8/16 아팟터 1 : 2007.09 - 삼성 - 128 - iOS 3 - 120그램 - 8/16/32 아이폰 3g : 2008.06 - 삼성 - 128 - iOS 3 - 133그램 - 8/16 아팟터 2 : 2008.09 - 삼성 - 128 - iOS 4 - 115그램 - 8/16/32 아이폰 3gs : 2009.06 - 삼성 - 256 - iOS 6 - 135그램 - 8/16/32 아팟터 3 : 2009.09 - 삼성 - 128 - iOS 4 - 115그램 - 8 아이폰 4 : 2010.06 - A4 - 512 .. 공감수 1 댓글수 0 2022. 5. 18.
Typescript 에서 setProperty 메소드 만들기. 일일히 짜증나게 setter 를 만들어내는것보다는, 하나의 setter 를 만들려고했다. 생각보다 매우 간단하게 만들수있었다. IFoo 가 필요하지않을 방법도 있을거같긴한데, 일단 이 방법도 좋아보인다. 공감수 0 댓글수 1 2022. 3. 29.
TS 에서 concat 사용하여 2d 배열을 1d 로. 나는 아래의 데이터를 가지고있었고 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)) 공감수 0 댓글수 0 2022. 3. 19.
Typescript 로 Generic Class 생성하기. 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.. 공감수 0 댓글수 0 2022. 3. 15.
Typescript Type 시스템 이해하기 : Structural Typing 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" .. 공감수 0 댓글수 0 2022. 3. 14.
Typescript 에서 Exclude 를 통해 property 제외하기 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.. 공감수 0 댓글수 0 2022. 3. 14.
선거 개표 UI 중 knob 모양 코드 공감수 0 댓글수 0 2022. 3. 10.
색깔 만들기 좋은 사이트 : https://coolors.co https://coolors.co 한 Juce 개발자가 추천해줌. 공감수 0 댓글수 0 2022. 2. 19.
DOM 의 성능을 생각한다면 해야할 행동들. 그동안 Web UI 를 개발해오면서 진짜 다양한 시도를 해보았다고 생각한다. 내가 느낀건 생산성 성능 은 절대 비례 관계가 아니라는것이다. 사실 거의 반비례 관계 같기도했다. 음악 관련 UI 들 특징이 버튼을 하나 눌렀을때 동시 다발적으로 여기저기서 변화가 일어나게된다. 심지어 내가 만든 App 에서는 버튼 하나를 누르면 128개의 색깔이 변경되어야하는것도 있다. 이는 곧 동시에 여러가지 DOM 의 변화가 일어난다는것이다. 이 부분에서, 모든걸 캔버스에 그려버리는 Pixi.js 를 선택했었는데 결과적으로 나쁜 선택은 아니었으나, 그다지 엄청 좋은 선택도 아니어서 2달간 시도후 DOM 으로 돌아오게되었다. (이에 대한 이야기는 따로 정리하겠음). 하여튼 React 나 Vue 같이 생산성이 좋은 경우 대부분.. 공감수 1 댓글수 0 2022. 2. 3.
grid-area 속성에서 span 잘 활용하기. 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 과 비슷한 원리 */ } 공감수 0 댓글수 0 2022. 1. 30.
레이아웃을 가장 편하게 하는 최고의 방법 : Grid 를 매우 조밀하게. 그동안 HTML & CSS 를 많은 UI 를 디자인해보면서, 가장 시간이 많이 잡먹는것이 레이아웃인데, 가장 깔끔한 최고의 방법은 #container { grid-template: repeat(128, 1fr) / repeat(128, 1fr) } 이렇게 하면 매우 조밀하게 형성되기때문에 쓸데없는 wrapper 요소들을 생성하지않아도 된다. 이렇게까지 하는 이유는 wrapper 요소로 중첩 depth 가 깊어질수록 성능이 매우 크게 저하되는것을 확인했기때문. 공감수 0 댓글수 0 2022. 1. 28.
css 의 animation 을 확장하기 (css @property) 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); } 공감수 0 댓글수 0 2022. 1. 26.
pseudo 요소의 content 속성을 JS 에서 변경하는 방법. (dataset) 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); } 공감수 0 댓글수 0 2022. 1. 24.
웹에서 wheel 이벤트 처리하기 window.addEventListener ("wheel", (e: WheelEvent) => { if (e.deltaY < 0) { /* Wheel Up */ } else { /* Wheel Down */ } }) wheel 이 올라갔는지 내려갔는지는 e.deltaY 가 음수인지 양수인지 확인해서 발견한다. 중요한것은 wheel 을 사용자가 올릴때 e.deltaY 값은 음수이다. 공감수 0 댓글수 0 2022. 1. 24.
pseudo element 를 이용해 요소 하나로 라벨, 버튼 둘다 만들기. 버튼을 보다보면, 라벨 + 버튼 인 경우가 많이 있다. 라벨도 text 를 가지고 버튼도 text 를 가지는데, 이때 라벨은 클릭할수없어야하고 버튼은 클릭할수있어야한다. 이때 보통 먼저 떠오르는 생각은 아래와 같을것이다. Label Click Me! 하지만 pseudo element 를 활용하면 굳이 dom 을 container 에다가 2개의 요소 (총 3개) 를 사용하지않고 하나의 요소로 끝낼수있다. ::before ::after 위의 ::before, ::after 는 html 안에서 추가하는게 아니라 CSS 에서 추가해야한다. 결과는 아래와 같다. .button { /* 일단 전체 event 를 끔. */ pointer-events: none; } .button::before { /* 라벨은 클릭해.. 공감수 0 댓글수 0 2022. 1. 21.
CSS contain 속성 정리 https://css-tricks.com/lets-take-a-deep-dive-into-the-css-contain-property/ .foo { contain: size; /* foo 요소의 자식들이 foo 의 size 를 키울수없음 */ } .foo { contain: layout; /* 외부 요소가 foo 요소의 layout 에 영향을 주지않음, 또는 foo 요소가 외부 요소의 layout 에 영향을 주지않음을 브라우져에게 알려줌. */ } .foo { contain: paint; /* foo 요소의 자식 요소들이 foo 요소 밖으로 빠져 나갔을때 그려지지않음. overflow hidden 과 비슷함. 예를 들어, foo 요소의 자식 요소가 -100% 로 밖으로 나가있다면, 브라우저가 contai.. 공감수 0 댓글수 0 2022. 1. 18.
브라우저 랜더링 성능 향상을 위한 자료들. 1. 랜더링 Pipeline 이해하기. https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/ 2. CSS 의 contain 속성. https://www.youtube.com/watch?v=iqcO-5_KkJ4 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment https://developer.mozilla.org/en-US/docs/Web/CSS/contain https://www.smashingmagazine.com/2019/12/browsers-containment-css-contain-property/ https://css-trick.. 공감수 0 댓글수 0 2022. 1. 17.
CSS Grid 의 특정 item width 나 height 를 조절후 정렬하기 CSS grid 를 사용할때, item 의 width 를 px 로 static 하게 조정한후 다시 수평 정렬이나 수직정렬을 하고싶을수있다. 이때 사용하는 중요한 속성이 justify-self 와 align-self 이다. .item { width: 100px; height: 50px; justify-self: center; /* 수평 정렬. width 와 연관. */ align-self: center; /* 수직 정렬 height 와 연관. */ } 꼭 width 가 특정되지않아도, 자식을 통해 설정된 width 상태에서도 justify-self 나 alight-self 를 사용할수있다. .item { grid-area: 1 / 1 / 2 / -1; /* width 가 1000px 이라고 가정. */ d.. 공감수 1 댓글수 0 2022. 1. 15.
Hittest 의 부하 https://stackoverflow.com/questions/41830529/optimizing-native-hit-testing-of-dom-elements-chrome 공감수 0 댓글수 0 2022. 1. 14.
Transform 도 reflow 를 trigger 할수있다. 안전하지않다. 관련된 아주 좋은 설명들.. (감사합니다) https://blinders.tistory.com/92 https://blinders.tistory.com/93 https://sculove.github.io/slides/improveBrowserRendering/#/7 중요한건 아래와 같다. .foo { transform: scale(0) } /* 반드시. 초기값 설정해줘야함. 없으면 reflow 발생 */ .foo.visible { transform: scale(1) } 만약 transform 의 초기값이 없이 classlist 에 transform 을 하기위한 class 가 추가된다면 reflow 가 발생한다. 또 하나 "update layer tree" 라는것이 transform 을 통해 trigger.. 공감수 0 댓글수 0 2022. 1. 14.
성능에 큰 악영향을 주는 CSS 의 나쁜 속성과 element 들. 그동안 개발을 1년간 해오면서, UI 의 성능을 저해하는 녀석들을 찾아냈고 정리해놓으려한다. 추후 더 찾아내면 이 포스팅에 업데이트하도록 하겠다. css 의 속성 하나를 추가하고 빼느냐에 따라 cpu 사용량이 3배가 넘게 나는것을 경험했기때문이다. 나는 나의 js 코드가 문제인가 하며 여기저기 말도 안되는곳을 들쑤고다녔었다. width, height 대신 transform 을 사용하라 같은 이야기가 아니다. 1. box-shadow 정말 사용하지 말아야 할 악마같은 녀석중 첫번째이다. 편하긴한데, 이게 ui 의 레이아웃이 변경할때 굉장히 CPU 나 GPU 를 spike 튀게했다. 무언가를 그리게 하는것은 UI 에서 피할수없지만, box-shadow 는 절대 다시 그리면 안되는 녀석이며.. 그냥 사용하지말.. 공감수 0 댓글수 0 2022. 1. 13.
HTML Color 이름 모음. AliceBlue, AntiqueWhite, Aqua, Aquamarine, Azure, Beige, Bisque, Black, BlanchedAlmond, Blue, BlueViolet, Brown, BurlyWood, CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenRod, DarkGray, DarkGrey, DarkGreen, DarkKhaki, DarkMagenta, DarkOliveGreen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkSlateBlue, DarkSlateGra.. 공감수 0 댓글수 0 2022. 1. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.