전체 글61 [TIL] 빡센 주간 서버에서 받는 값이 같은 조건에서 다를 때 :: 같은 조건이 아님.. 클라이언트에서 보내는 값을 확인해야 함 z-index가 동일하고 툴팁 등이 서로 겹칠 때 :: 부모 엘리먼트에 호버 했을 때 더 높은 z-index 값을 주면 됨 (!) line-clamp + offsetHeight, clientHeight 2021. 12. 6. forwardRef react에는 두 종류의 ref가 있다; ref 객체, ref 콜백. 전자는 useRef로 만들어지며 current 프로퍼티를 갖는 객체; RefObject. T는 current에 할당되는 값의 타입이다. 후자의 경우, 엘리먼트에 함수를 넘겨주면 인스턴스가 생성되거나 사라질 때 해당 함수가 콜백된다; (instance: T) => void 둘 모두를 가리키는 건 Ref. ref를 prop으로 넘겨 받기만 한다면 그 컴포넌트는 Ref로 충분. 이 때 ref는 객체일 수도, 함수일 수도 있다. 그러나 해당 Ref를 컴포넌트 내에서 ref Object로 활용하려면 타입의 범위를 RefObject로 좁혀야 한다. 하나 더, 범위를 제한하지 않으면서 ref를 활용하고 싶다면 interface ExampleProp.. 2021. 11. 22. drawer in m.youtube ytm-engagement-panel ytm-engagement-panel-section-list-renderer.engagement-panel-comments-section .engagement-panel-section-list-background.draggable .engagement-panel-container .engagement-panel-section-list-header-wrapper .engagement-panel-content-wrapper ytm-section-list-renderer ytm-single-column-watch-next-results-renderer aria-hidden .player-size { position: relative; width: 100%; padding-.. 2021. 11. 21. hls.js :: 퀄리티 설정 API levels 현재 선택할 수 있는 레벨 배열 [] currentLevel get: 현재 재생 퀄리티 레벨 set: 즉시 현재 퀄리티를 새로운 레벨로 변경. 현재 요청한 fragment이 있다면 취소, 모든 버퍼를 제거, 현재 재생 위치와 요청한 레벨과 일치하는 frament를 불러온다. nextLevel get: 다음 퀄리티 레벨을 가져온다. 아직 버퍼되지 않았다면 -1를 리턴. set: 다음 fragment의 퀄리티 레벨을 설정. 이미 버퍼된 다음 fragment를 제거할 수도 있다. (Trigger a quality level switch for next fragment. This could eventually flush already buffered next fragment.) loadLevel g.. 2021. 11. 19. [UI/UX] px에서 rem으로 최근에 "Why designers should move from px to rem — and how to do that in Figma" 라는 제목의 글을 읽었다. 평소에 관심 있었지만 항상 헷갈렸던 주제였는데 개념에 대한 설명과 실제 업무에서 쓰는 예시와 활용 방법 까지 알려주어서 너무 큰 도움이 되었다. 다음에 회사 디자이너 분들과 꼭 같이 읽고 싶다. 간단하게 정리를 해봤다. px 값의 문제점 절대값, 고정된 물리 값. 브라우저에는 기본값인 루트 폰트 사이즈가 있는데 보통 16px이다. 유저는 설정에서 이를 직접 변경할 수 있고, 시력 장애가 있는 유저의 경우 이 기능이 웹을 이용하는 데 중요할 수 있다. 그런데 px 값을 쓸 경우, 유저가 직접 자신에게 적절한 폰트 사이즈를 선택해도 이를 무시해버.. 2021. 11. 14. [TIR] 거부 1. Arwa Mahdawi, Let them eat space! Elon Musk and the race to end world hunger The government, of course, has already come for the majority of us. The median American household paid about 14% in federal taxes in recent years (that doesn’t include state taxes). Billionaires pay only a tiny fraction of that. ProPublica has calculated that Musk’s “true tax rate” is a minuscule 3.27%. But that’s OK.. 2021. 11. 8. 미래 없는 미래에 대한 생각 매주 더 좋은, 나은 사람이 되는 방법에 관한 짧은 영상들을 보는데 평소에 잘 보지 않는 유형의 영상들이라 무척 흥미롭다. 이 영상들은 공통적으로 오늘보다 '미래'에 더 나은 인간이 되는 것에 포커스가 맞추어져 있다. 원하는 모습을 정말 구체적으로 상상한다든지, 그런 상상을 미래에 현실로 만들기 위해 현재에 해야하는 일들에 과감히 집중하고 몰입한다든지, 부정적인 말을 멈추고 해야할 일을 실천에 옮기든지 여러 삶의 지침들을 때로는 과학적으로도 알려준다. 나도 사실 더 나은 사람이 되고 싶어하는 사람 중 하나고 전혀 몰랐다가 새롭게 알게 되는 지침과 방법들이 많다. 실제로 일상에서 실천해보고도 있고 나에게 도움이 되리라는 것도 믿는다. 그렇지만 이러한 정보를 얻고 실천하면서도 실은 마음 한켠에 항상 무언가를.. 2021. 11. 8. 컴포넌트 렌더링 vs. opacity 어제 도움을 받았던 코드: state 값에 따라 컴포넌트 자체를 렌더링 할지 결정하기 vs. 컴포넌트는 항상 DOM에 위치시키되 state값을 prop으로 내려주어 opacity값으로 화면에 표시할지 결정하기 background-image가 중요한 역할을 하는 컴포넌트였기 때문에 초기에 후자의 방법이 더 적절했다. 전부 마운트 시켜서 이미지를 미리 로드한 뒤 opacity를 조절하면 컴포넌트를 새로 마운트 시키는 것에 비해 이미지 초기 로드 시간에 영향을 받지 않기 때문. 이 때, 부모가 내려주는 props를 자식 컴포넌트에서 useEffect와 useState로 한 번 필터했다. 사실 가장 흔한 패턴 중 하나인 것 같은데 다른 방법은 없는지 궁금해졌음. 2021. 11. 4. Focus fixup rule/document.activeElement = body 단축키 적용 불가 video 엘리먼트에 play() 메소드를 실행하는데 단축키가 적용되지 않는 문제. 포커스를 빼앗긴 것이 원인이었다. document.activeElement를 추적하니 계속 body를 잡는다. 근거를 알 수 없는 황당한 현상. The section Focus fixup rule one was introduced in February 2014 and made a little clearer in November 2016. It describes that focus is returned to when the active element loses its ability to receive focus. https://allyjs.io/tutorials/mutating-active-element... 2021. 11. 2. modal, height, body-scroll-lock 모달 직접 만들다가 아주 쇠약해졌다... 100vh를 남발한 결과, ios safari에서 뷰포트 하단의 주소바 때문에 컨텐츠가 가려지는 동시에 스크롤도 불가능한 문제가 생겼다. vh 단위를 사용할 때 예외 케이스들을 하나씩 처리하는 것보다 실제로 보이는 문서를 기준으로 하는 단위가 더 확실할 것 같다는 조언을 받아 html 구조부터 다시 배워서 적용했다... 모달 // 전체 화면을 차지하는 엘리먼트 - innerHeight만큼의 높이를 갖는다. .container { position: fixed; top: 0; right: 0; left: 0; bottom: 0; } // 부모 요소인 .container의 높이를 갖는다. .modal-wrapper { height: 100%; } // 실제 컨텐츠를 감.. 2021. 10. 26. CSS 애니메이션과 불타는 CPU Do Not Burn Your CPU Working With CSS Animations 120장의 이미지를 불러오기 + css animation을 적용한 placeholder + lazy loading lazy loading이 되기 때문에 첫 10장은 placeholder가 사라지고 이미지가 보이지만 나머지 110장은 infinite loop animation css가 돌아가고 있는 상태 => translateZ(0) ? CSS keyframe animation CPU usage is high, should it be this way? Lastly, not all properties are equal -- box-shadow is much harder for the browser to animate sm.. 2021. 10. 5. 우아한형제들 경력 개발자 인터뷰 리뷰 2021 우아한형제들 경력 개발자 인터뷰 #2편 먼저는 풀스택 개발자는 빠르게 프로토타입이 필요하거나 여러 조직이 협업해야 하는 경우가 종종 발생할 때, 어떤 것이 필요한지 즉시 파악할 수 있다는 장점이 있습니다. 인프라부터 백엔드, 프론트엔드까지 각 스택(Stack)에서 필요한 일이 무엇인지, 어떻게 해야 병렬적으로 진행할 수 있게 되는지, 블로커(Blocker)가 무엇인지 등 계획 단계부터 확인이 가능합니다. 단점을 지적받고 고치기를 요구받는 사람은 고민에 빠져 스스로의 행동에도 제약을 만듭니다. 그로 인해 이전보다 장점을 발휘하기 어려워지므로 자신의 장점은 극대화하고, 단점은 동료들과 서로 보완하도록 해야 합니다. 단점 없는 사람 없고, 그런 단점들을 서로 감싸줄 수도 있어야 해요. 학교 다닐 때도.. 2021. 10. 4. 이전 1 2 3 4 5 6 다음
