⚛️ React

언틸 서비스 초기에는 회원가입시 프로필 이미지를 oauth에서 제공하는 url을 그대로 저장해 사용했었다. (지금은 따로 s3에 저장하고 있습니다. 🥲)때문에 해당 주소가 유효하지 않게 되면 아래와 같이 엑박이 발생했다.<img src="https://image.until.blog/morethanmin/article/1726644394473.png" alt="until-1368">이런 문제를 해결하기 위해서는 img 태그의 onError를 적절히 사용해주면 된다.상황에 따라 아예 <code spellcheck="false">display:none</code> 을 걸어주거나, 대체 이미지를 보여줄 수도 있다. 언틸에서는 기본 아바타를 보여주는 방식으로 대응했다. 아래는 예시이다.<pre spellcheck="false"><code class="language-typescript">const Avatar = forwardRef&lt;HTMLDivElement, Props&gt;(
 (
 { type = 'user', size, src, loading = false, ...props },
 ref,
 ) =&gt; {
 const [isError, setIsError] = useState(false)

 if (loading)
 return (
 &lt;Skeleton /&gt;
 )

 if (!src || isError) {
 return (
 &lt;div
 ref={ref}
 css={[wrapperStyle, sizeStyle]}
 className={className}
 onClick={onClick}
 {...props}
 &gt;
 &lt;CgUserlane /&gt;
 &lt;/div&gt;
 )
 }

 return (
 &lt;div
 ref={ref}
 css={[wrapperStyle, sizeStyle]}
 {...props}
 &gt;
 &lt;Image src={src} fill alt="avatar" onError={() =&gt; setIsError(true)} /&gt;
 &lt;/div&gt;
 )
 },
)

export default Avatar</code></pre>

언틸 서비스 초기에는 회원가입시 프로필 이미지를 oauth에서 제공하는 url을 그대로 저장해 사용했었다. (지금은 따로 s3에 저장하고 있습니다. 🥲)때문에 해당 주소가 유효하지 않게 되면 아래와 같이 엑박이 발생했다.이런 문제를 해결하기 위해서는 img 태그의 onError를 적절히 사용해주면 된다.상황에 따라 아예 display:none 을 걸어주거