패스트캠퍼스 챌린지 44일차

차트 라이브러리 만들어보기 - 그래픽 시스템 Overview

 

이번 장에서는 그래픽 시스템에 관하여, 개발자를 위한 소프트웨어에 관해 설명한다. 간단한 차트 라이브러리를 만들기위해서 그래픽 시스템을 이용할 것인데 대체적으로 canvas, SVG, WebGL 등이 있다. 각각의 그래픽 시스템들은 차이가 있다.

 

canvas 같은 경우는 2D 그래픽 시스템으로 점과 선으로 이루어져 있다. canvas 태그를 이용한 다양한 API를 사용할 수 있다. 자바스크립트의 함수로 점 찍고 선 그리는 등의 작업을 한다. 점과 선이라고 하면 되게 아무것도 없는 것처럼 보이겠지만 사실 그래픽의 모든 것들은 점과 선으로 이루어져 있기때문에 모든걸 다 가진 것이다.

 

SVG는 벡터 그래픽 시스템으로 캔버스처럼 2D 그래픽 시스템을 다루지만 저 수준의 자바스크립트 api를 가지고 그래픽을 구사하는 것이 아니라 html 태그를 이용하여 구사할 수 있는 스펙이다. 상대적으로 다루기가 쉽다는 장점이 있다. 또한 여러가지의 스펙이 제공되기 때문에 로고나 아이콘, 차트 등의 여러가지를 만들 수 있으며 알고있다면 운영 범위가 넓기 때문에 상용하기도 좋다.

 

WebGL 같은 경우는 3D 그래픽 시스템을 다룬다. 작업을 하다보면 2D 그래픽 시스템으로 할 수 없는 부분이 있다. 2D 그래픽은 대량의 데이터를 그래픽으로 변경 시 성능이 너무 떨어지는 경우나 심하면 제대로된 작동이 안될 수 있다. 그럴 때는 WebGL 같은 3D 그래픽 시스템을 이용하여 GPU를 사용하여 2D 그래픽 시스템으로 할 수 없는 부분을 동작하게 할 수도 있을 것이다.

 

이번 장에서는 SVG를 사용하여 그래픽 시스템을 구사한다.

 

 

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential