전체 글
-
왜 text-overflow ellipsis 가 동작하지 않는거지??물망초. 2021. 8. 21. 02:46
가끔 그럴 때가 있습니다.. 잘 사용하던 친구가.. 동작하지 않을 때가.. 물론 제대로 알고 사용하던게 아니라서 그런 것이겠지요 이번도 그랬습니다. text-overflow: ellipsis; 가 동작을 하지 않는 문제였습니다. 처음에는 mdn text-overflow를 보며 작성합니다. .ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 여기서 문제는 위 코드들이 문제가 아니였어요.. code-sandbox 위와 같은 문제와 넘치는데 ellipsis가 적용되지 않는 문제가 있었어요! 그래서 다시 mdn을 살펴봤습니다. The text-overflow property only affects content that is..
-
2021.06.30Eng 2021. 7. 1. 00:19
curl: 곱슬곱슬하다, 말다, 몸을 웅크리다. twitchy: 실룩실룩, 불안해하는(jittery), 홱 움직이는, 까딱 하는 batty: 약간 제정신이 아닌 fishbowl: 어항, 사방에서 빤히 보이는 것, 프라이버시가 전혀 없는 장소, 유치장 turn out: 나타나다, 뒤 돌다 certainly: 물론입니다. neighbor: 이웃의 tired of: ~에 싫증난 upside-down: 뒤집힌 fur: 털, 모피 faint: 기절하다 far away: 먼 곳에 pointy: 뾰족한
-
자식 요소가 focus 되었을 때 부모도 효과를 받고 싶다면?물망초. 2021. 6. 17. 16:52
간혹 가다 그런 경우가 있다. 자식요소가 focus 되었지만, 효과는 부모요소가 받아야 하는 경우가 있다. 예를 들어 form 내부에서 input 자식 요소가 있어서, 해당 요소가 :focus 되었을 때 부모요소의 border 라던가 background-color가 변경되는 경우가 있다. 이런 경우 지식이 부족했던 나는 isActive 라는 불필요한 변수를 만들어서 제어하려 했다. 꼭 error를 클래스로 작성해서 주는것처럼... 하지만 정말 좋은 방법이 있었는데!!! 바로 :focus-within 이라는 녀석이다. 아래 mdn을 들어가면 간단한 설명과 예시가 있다. 아래 양식의 값을 채워주세요. 이름: 성: form { border: 1px solid; color: gray; padding: 4px; ..
-
jest] react-redux useSelector testing.물망초. 2021. 3. 25. 18:50
문제 발생(jest 테스트 중) react-redux를 사용하는 중에 useSelector를 호출하는 영역에서 아래와 같은 에러가 발생했다. could not find react-redux context value; please ensure the component is wrapped in a 문제 해결을 위해서 찾아보니 useSelector의 mock이 필요할 것으로 판단이 되었다. 그리고 그 mock에는 store도 mock으로 연결되어야할 것 같았다. 문제 해결 import * as reactRedux from 'react-redux' ... let useSelectorMock let useDispatchMock ... useSelectorMock = jest.spyOn(reactRe..
-
e.target vs. e.currentTarget물망초. 2021. 3. 25. 11:28
특정 element를 제어해야하는 경우가 생겼다. value 154,300 대략 위와 같은 형태에서 section 에 onclick이벤트를 적용했다. 그리고 아래와 같은 형태의 함수로 핸들링을 시도했다. const handleSection = (e) => { // something console.log(e.target) } 처음에는 e.target.dataset으로 진행을 했다. 근데 아래와 같이 나왔다.. DOMStringMap {} 당황스러웠는데.. 의도한 건 해당 객체에 indexNumber라는 키가 있어야 했는데... 그래서 찾아보니 결국 e.target vs. e.currentTarget을 보게 되었다... 깨달은 것을 간단 정리로 마무리한다. 아래 두 사항의 기본 전제는 이벤트가 어디에 바인딩..
-
position: absolute의 무서움.물망초. 2021. 2. 2. 23:06
나는 position: absolute를 참 좋아한다. 상위 fixed, absolute, relative, sticky를 만나기 전까지 찾아가는 집요함을 좋아한다. 물론 그로 인해 의도하지 않은 문제를 만날 때도 있지만..... position .. absolute.. position은 5개의 값을 지닐 수 있다. static, relative, absolute, sticky, fixed 이렇게 총 5개를 말이다. 오늘 말하고 싶은 대상은 물론 단 하나 absolute지만 말이다. 그 특징을 알아보고 무서움을 알아보자. 아는 특징이라고 해봐야 딱 두개다... 첫번째! 난 멈추지 않아. fixed, absolute, relative, sticky 를 만날 때 까지는! 얘는 참 어마무시한 아이인데, 무려 ..