[Korean FE Article] 2023년 SVG-in-JS와 결별

글 링크 : https://github.com/yeonjuan/dev-blog/blob/master/JavaScript/breaking-up-with-svg-in-js-in-2023.md

소개

웹 사이트를 만들 때 SVG 이미지를 어떻게 가져와 사용하시나요? 저는 JSX로 변환해 리액트 컴포넌트로 만들어 사용하곤 했었는데요. 사용하면서 혹시나 런타임 성능에 안 좋지 않을까라는 생각을 하곤 했습니다.
이 글에서는 이런 SVG를 사용하는 방식과 성능에 대한 궁금증을 해결해 주고, 다른 대안을 제시해 주고 있습니다. 이 글이 웹 사이트 성능 개선에 관심 있는 분들께 도움이 되었으면 좋겠습니다.

목차

• 어떻게 svg가 자바스크립트에 포함되게 되나요?

• 성능 딥 다이브: SVG-in-JS가 안티 패턴인 이유

• 메모리 사용

• JS 번들에서 SVG를 제거하는 모범 사례

• 성능 vs 로딩 시간: 인라인을 할 것인가, 말 것인가?

• 정리

• 도구/스니펫

• 각주 & 주석