React에서 공식문서를 읽고 새롭게 알게 된 사실이 흥미로워 작성하게 된 포스트.
🔎 React에서의 이미지나 글꼴은 CSS와 동일하게 동작한다.
우리는 자바스크립트에서 이런 정적 자산(이미지나 폰트 등)를 가져올 수 있다. 그렇게 하면 웹팩이 해당 파일을 번들에 포함시켜준다. CSS는 import 로 그 경로를 파악해 포함시키지만 이미지나 폰트는 import 경로가 아니라 src이나 href 속성에서 경로를 참고해 번들에 포함시키는 것이다.
🔎 10,000바이트 미만의 파일은 데이터 URI로 반환한다.
이게 정말 새롭게 알게 된 사실인데, 10,000바이트 미만의 이미지를 import하면 경로가 아니라 데이터 URI가 반환된다는 사실이다. 사실 URI가 무엇인지 잘 몰라서 이해를 못했는데 공식문서에서 친절히 링크까지 달아주어서 쉽게 찾을 수 있었다.
... Data URIs, 즉 data: 스킴이 접두어로 붙은 URL은 컨텐츠 작성자가 작은 파일을 문서 내에 인라인으로 임베드할 수 있도록 해줍니다. (...)
//구문
data:[<mediatype>][;base64],<data>(중략 ... )
그러니까 용량이 적은 파일이라면 인라인으로 끼워넣어 작성할 수 있다는 말이다. 그리고 파일 확장자 bmp, gif, jpg, png에 적용된다. 만약 그리고 또 기억해야 할 점은 svg파일에는 react 이슈#1153으로 인해서 이 사항이 적용되지 않는다고 한다. 이 값을 제어하고 싶다면 상세 설정을 보고 환경 변수를 설정하면 된다는데, 10,000바이트 미만의 파일은 정말 정말 드물 것 같긴 하다....ㅋㅋㅋㅋ
참고한 레퍼런스
React 공식문서: Adding Images, Fonts, and Files
React 공식문서: Advanced Configuration
MDN: 데이터 URI
