반응형 2022/089 안드로이드, 아이폰 크로스 브라우징 IOS와 안드로이드의 css 기본값 차이를 정리한 것은 아니다. 그냥 오늘 있었던 일을 말한다. qa중이었다. 내 핸드폰에서는 글씨가 검은색으로 잘 보이는데, 아이폰을 가진분들한테는 글씨가 파란색으로 보인다고 하셨다. 처음부터 파란색이어서 원래 파란색인줄 아셨다고 했다. 한참을 찾아보는데 10년차 백엔드개발자분이 이런 말씀을 해주셨다. 시스템의 기본 설정값을 폰트 색상으로 사용하고 있는 듯 합니다. 그런데 ios계열은 기본 시스템 버튼 색상이 파란색이고 그 외는 검은색이라 그런 것으로 판단됩니다. 색깔만 지정해주면 될 것 같네요 그렇다. color가 없었기에 각 시스템의 기본 설정값으로 보이는 것이었다. color : black을 추가해주니 해결되었다. 또다른 문제가 있었다. 나의 화면에서는 다음과 같이.. 2022. 8. 26. flex 안쓰고 요소 중앙정렬 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 위와 같이 하면 된다. 먼저 차례대로 해보자. 1. 부모요소에 position:relative주기 position:absolute를 가진 요소는 상위요소들중 가장 가까운 relative를 가진 요소를 기준으로 위치를 잡기 때문 ㄴ .containor { position: relative; background-color: blue; height: 100%; } 그럼 다음과 같이 된다. 2. 자식요소에게 position:absolute주고 left,right로 위치시키기 이제 여기서 자식 .color에게 position,left,right값을 부여한다. .color { wid.. 2022. 8. 24. Functional update of setState -> state의 변화가 state를 참조하지 않게 됨 이렇게 숫자가 혼자서 계속 올라가는 것을 만드려면 어떻게 해야 할까?? 시도하다보면 useEffect를 쓰는 쪽으로 생각이 흘러간다. 처음에는 다음과 같이 작성하였다. useEffect(() => { setInterval(() => { setCount(count); }, 1000); }, [count]); return ( {count} setCount(initialCount)}>Reset setCount((prevCount) => prevCount - 1)}>- setCount((prevCount) => prevCount + 1)}>+ ); 그러니 이러한 버그가 나타났다. 그래서 clean-up함수를 추가해주었다. (clean-up함수가 언마운트시가 아니라, 업데이트시 실행된다는 것을 알 수 있음, 참고.. 2022. 8. 13. useEffect의 cleanUp 함수에 대한 착각 : unmount시 발생하는 것이 아니다! useEffect의 cleanUp 함수에 대한 착각 : unmount시 발생하는 것이 아니다! 들어가기에 앞서 결론부터 말하자면 공식문서에 나와있다 실제 실험을 통해 페이지 이동(unmount)이 안되어도 setInterval을 정리하여 버그를 차단함을 알 수 있었다. 1. clean-up 없을 때 import { useEffect, useState } from "react"; const initialCount = 0; function FrequentlyChangableDependencyInEffect() { const [count, setCount] = useState(initialCount); useEffect(() => { setInterval(() => { setCount(count); }, 10.. 2022. 8. 12. 이전 1 2 3 다음 반응형
