- react의 key는 stable, predictable, unique 해야한다. 무한 slide를 구현하며 양쪽 끝에 동일한 asset이 입력되기 때문에 id가 겹치는 문제가 발생했다. 이를 간단하게 해결하고 싶어 index + Math.random을 사용했으나 3가지 조건을 모두 만족시키지 못했고, eslint에서도 error가 발생한다. 따라서 unique한 키를 생성하기 위해 uuid를 사용하는 것도 지양해야 한다. uique id를 사용하게 되면, 렌더링마다 매번 새로운 키를 생성하기 때문에 diff 알고리즘의 최적화 로직을 온전히 사용할 수 없게 된다.
- browser의 timer api가 제공하는 ID는 1이상의 값을 사용한다.
출처:
https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers
- useRef의 초기값이 null|undefined 임에 따라 발생하는 문제는 callback ref를 사용하자.
useRef로 엘리먼트를 취득하여 해당 엘리먼트의 width를 통해 중앙 정렬을 시켜야하는 문제가 있었다. 수식으로 (innerWidth - $el.getBoundingClientRect().width) / 2를 하면 정확이 엘리먼트를 제외한 나머지 여백의 길이를 구하여 반으로 나누었기 때문에 translateX로 해당 값을 입력하면 중앙 정렬이 가능하다. 그런데 ref는 초기값이 없기 때문에 didMount 시 정렬이 불가능 하다. 이를 해결하는 방법으로 didMount시 강제로 다시 랜더링이 일어나게 만들어야 해서, (useRef, useEffect, useState) 이렇게 세가지 훅을 사용해야한다. 이유는 useRef로 엘리먼트를 취득해야하며, useEffect로 didMount시점을 파악해야하고, useState로 강제 랜더링이 일어나게 만들어야 하기 때문이다.
callback ref를 사용하면 이를 한번에 해결해준다. undefined 임을 고려하여 강제로 두번 호출한다.
출처: https://reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs
- mouseEvent 의 clientX, screenX, pageX
- clientX: viewPort(현재 보이는 브라우저 창) 내의 X값
- screenX: 모니터를 기준으로 하는 X값
- pageX: 웹 문서의 최상단(좌측)을 기준으로한 X값
- text-overflow: ellipsis 적용하기
- 엘리먼트가 반드시 %와 같은 비례 단위가 아닌 px 처럼 고정 단위로 입력되어야 한다.
- overflow:hidden과 text-overflow:ellipsis이 텍스트가 입력된 태그에 설정되어야 한다.
- white-space:nowrap으로 줄바꿈이 일어나지 않게 해야 한다.
참고: https://medium.com/@surbhisoni241/why-css-text-overflow-ellipsis-not-working-968814b43370
Front 💔 End