리액트에서 이미지를 다루는 방법
CRA에선 어떻게 이미지를 처리하는가? 10KB미만의 이미지 파일은 data URI의 형태로 변환되어 html에 포함된다. url-loader가 이미지 파일을 만나면 data URI 형태로 변경해주기 때문에 가능한것이다. 이렇게 하면 http 요청수를 줄일 수 있고, bmp, gif, jpg, jpeg, png에만 적용되고 svg는 제외된다. 물론 10KB라는 수치도 변경이 가능하다고 한다. data URI란 간단히 말하면 작은 크기의 파일을 문서내에 인라인으로 포함하기 위해서 사용된다. 아이콘을 base64로 인코딩하여 data URI형태로 문서에 인라인 하는 방식을 많이 사용한다. SVG는 왜 제외 됬는가? 이슈 내용을 살펴보면 CRA가 버전 0.8로 업데이트 되면서 url-loader를 사용하여 1..
React
2020. 3. 19. 14:55
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- return type
- useEffect
- await
- storybook
- Polyfill
- design system
- server side rendering
- typescript
- es6
- promise
- javascript
- async
- computed
- reflow
- Babel
- state
- type alias
- reducer
- atomic design
- rendering scope
- Next.js
- mobx
- reactdom
- react
- Action
- props
- webpack
- useRef
- react hooks
- hydrate
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
글 보관함