<div id="readability-page-1" class="page"><div><h2 id="ssr-환경에서의-onload">SSR 환경에서의 onload</h2>
SSR에서 페이지를 처음에 진입했을 때 onload 이벤트가 씹히는 현상이 있다. 
이때는 HTMLImageElement의 complete 속성을 사용하면된다.
<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete">https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete</a>
만약 리엑트 컴포넌트에서 이미지 로드에 대한 체크를 하고싶을 때 아래처럼 코드를 작성하면 된다.
<pre><code>
//.....

const imgElRef = useRef&lt;HTMLImageElement&gt;(null);
const [imageLoaded, setImageLoaded] = useState&lt;boolean&gt;(false);

const handleLoadImage = () =&gt; {
 setImageLoaded(true);
};

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

return &lt;img ref={imgElRef} onLoad={handleLoadImage} /&gt;</code></pre>
<h2 id="ios-input-접근성">IOS Input 접근성</h2>
IOS에서 <code>input</code> 엘리먼트의 글자크기가 작을 경우 자동으로 zoom in이 된다. 
이를 막기 위해선 <code>viewport meta</code>에 다음 속성값을 넣어주면 된다.
<pre><code>&lt;meta name="viewport" content="maximum-scale=1" /&gt;</code></pre>
<a href="https://makersaid.com/disable-safari-auto-zoom-on-form/">https://makersaid.com/disable-safari-auto-zoom-on-form/</a></div></div>

ginameee.log

Jangchun Lee

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/

2023.04.13

댓글