SSR 환경에서의 onload

SSR에서 페이지를 처음에 진입했을 때 onload 이벤트가 씹히는 현상이 있다.
이때는 HTMLImageElement의 complete 속성을 사용하면된다.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete

만약 리엑트 컴포넌트에서 이미지 로드에 대한 체크를 하고싶을 때 아래처럼 코드를 작성하면 된다.

//.....

const imgElRef = useRef<HTMLImageElement>(null);
const [imageLoaded, setImageLoaded] = useState<boolean>(false);

const handleLoadImage = () => {
  setImageLoaded(true);
};

useEffect(() => {
  if (imgElRef.current?.complete) {
    handleLoadImage();
  }
}, []);

return <img ref={imgElRef} onLoad={handleLoadImage} />

IOS Input 접근성

IOS에서 input 엘리먼트의 글자크기가 작을 경우 자동으로 zoom in이 된다.
이를 막기 위해선 viewport meta에 다음 속성값을 넣어주면 된다.

<meta name="viewport" content="maximum-scale=1" />

https://makersaid.com/disable-safari-auto-zoom-on-form/