아래와 같은 것을 한번 만들어 보려고 합니다. ![circle.png](https://steemitimages.com/DQmeEb8Gzqfvp3ncPFACTDQd8MzRz3m2SY6m99jeTtqLfwA/circle.png) 가장 쉬운 방법은 하나하나를 SVG 로 만들어서 뿌리면 됩니다. 첫번째 "1" 을 SVG 파일로 만들어 봅니다. // circle 에 fill color 가 text 에 1이 들어갑니다. ~~~~ ~~~~ 위 파일을 1.svg 로 저장하고 카피/페이스트로 10개를 따닥 만들어서 ~~~html

< img src='1.svg'/>< img src='2.svg'/>< img src='3.svg'/>< img src='4.svg'/>< img src='5.svg'/> < img src='6.svg'/>< img src='7.svg'/>< img src='8.svg'/>< img src='9.svg'/>< img src='10.svg'/>

~~~ 이렇게 첫번째 줄이 완성될 수 있습니다. 그런데, 만일 10이 아니라 100, 1000 이런식으로 숫자가 늘어난다면, 그리고 두번째 라인처럼 색깔도 마구 변할 수 있다면, 또한 동그라미 안에 A, B, C 도 넣고 싶고, ㄱ, ㄴ, ㄷ 도 넣고 싶어요. 어떻게 하면 될까요? 우선 서버측에서 svg generator 를 하나 만들어 주면 될 것 같아요. 그리고 브라우저에서는 아래와 같이 img src 를 지정하면 되지요. ~~~html < img src='/svg/?color=black&text=1' /> ~~~ 이렇게 하면 우선 1.svg, 1.svg ..... 이런 파일들이 완전히 사라집니다. 그리고 A, B, C 넣는 것도 문제 없고, 색깔도 문제 없고, 크기도 마음대로 변화시킬 수 있습니다. 서버 프로그래밍을 해 본 분이시라면 어렵지 않은 일입니다. Response 에서 content_type 을 "image/svg+xml" 로 지정해야 하는 것만 주의하시면 됩니다. 완벽히 해결된 것 같은데, 아직 문제가 많아요. 서버단에서 해결하는 경우에 트래픽이 증가합니다. 동그라미 100개 그린다고 하면, 서버에 100번 접속해야 하는 거죠. 그래서 브라우저에서 해결할 수 있습니다. 2편에서는 Vanilla javascript 에서 어떻게 처리할 수 있는지 알아보고 3편에서는 React 에서 어떻게 처리할 수 있는지 알아보도록 하겠습니다. 2편만 이해하면 React 는 그냥 날로먹기입니다. 감사합니다.