[TIL] 04.08 webkit autofill

서비스를 유지 보수 중 인풋탕의 자동완성을 이용하면 border 가 사라지고 배경색이 변하는 버그를발견했다. 

검색을 해보니 크롬에서 자동완성을 이용하면 글자색과 배경색이 변하도록 설정이 되어있다고 한다. 그것을 막으려면 아래와 같이 설정을하면 된다고 한다. 

 input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
	 transition: background-color 5000s ease-in-out 0s;
	 -webkit-transition: background-color 9999s ease-out;
     -webkit-box-shadow: 0 0 0px 1000px white inset !important;
     -webkit-text-fill-color: #fff !important;
   }

지금 서비스에 적용이 되어 있었는데 border: 0으로 바뀌고 배경색이 흰색으로 바뀌도록 되어 있었다. 그래서 해당 부분을 삭제해 주니 버그가 해결이 되었다. 

 

useMemo와 useCallback을 언제 써야하는지 그리고 차이점에 대해서 알아보았다. 

보통 최적화 할때 사용이 되는데 최적화가 무조건 좋은것은 아니라는 글을 보았다. (메모리 문제 등으로 ... )

두 함수 모두 memoize 를 적용하기 때문에 엄청 복잡한 연산을 하거나 레퍼런스(메모리값)이 동일할 때 사용하는 것이 좋다고 한다. 

 

두 함수의 차이는 아래와 같은 사용법의 차이 밖에 없다. 

useCallback(fn, deps) 
useMemo(() => fn, deps) 

참고 자료: https://rinae.dev/posts/review-when-to-usememo-and-usecallback