본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다
패스트캠퍼스 환급챌린지란?
(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스
초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!
fastcampus.co.kr
https://fastcampus.info/4n8ztzq
오늘도 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!
35일차 공부 시작!
오늘의 강의 주제는 '차트 라이브러리 만들어보기-차트 라이브러리 구현'이다.
(오늘도 마찬가지로 모자이크 처리..)
오늘의 학습 내용
* interval과 setInterval 활용
차트 라이브러리에서 동적 변화나 애니메이션 연출에는 setInterval 함수가 유용하게 사용된다. 특정 시간 간격마다 원하는 동작을 반복 실행할 수 있어서, 예를 들어 그래프의 수치가 서서히 변하거나 값이 점진적으로 증가하는 애니메이션을 만들 때 쓰인다. 다만 setInterval로 생성한 반복은 명확한 종료 시점에 clearInterval을 반드시 호출해서 정리해야 한다. 그렇지 않으면 필요 없는 반복이 계속 남아 있어서 불필요한 메모리 사용이 발생할 수 있고, 이로 인해 성능 문제로 이어질 수 있다. 코드 작성 시에는 항상 setInterval과 clearInterval을 짝지어서 사용하는 습관을 들이는 게 바람직하다.
* svg 기반 2D 그래픽 처리
svg는 html의 태그와 유사한 구조로 2차원 그래픽을 쉽고 효율적으로 그릴 수 있는 웹 표준이다. 기존의 canvas가 함수를 호출하고 픽셀 단위로 이미지를 그리는 방식이라면 svg는 마치 html 문서를 작성하듯이 도형, 선, 곡선 등을 태그로 정의한다. 이런 구조 덕분에 그래픽의 각 요소를 만들고 수정하고 관리하는 것이 더 직관적이다. 또한 svg의 장점 중 하나는 애니메이션 효과 적용이 쉽다는 점이다. 예를 들어 duration, percent와 같은 속성이나 옵션을 이용해서 간단하게 도형의 크기 변화를 주거나 이동을 시킬 수 있고 브라우저가 이를 효율적으로 처리해준다. 개발자는 복잡한 계산 없이도 고급 그래픽 효과를 비교적 쉽게 구현할 수 있다.
* svg의 한계와 기술 선택 기준
svg로 아이콘이나 간단한 도형을 구현할 때는 학습 곡선이 낮고 직접 코드로 관리하기 쉽다. 그러나 그래픽이 점점 복잡해지고 개체 수가 수백, 수천 단위로 늘어나면 svg 태그를 그만큼 많이 생성해야 해서 전체 파일 크기가 커진다. 이로 인해 브라우저 렌더링 속도 저하, 성능 하락 등 문제가 발생할 수 있다. 그래서 svg는 주로 단순한 아이콘, 버튼, 인터페이스의 간단한 시각 요소 제작에 자주 활용된다. 라이브러리 설계나 기술 도입 시에는 그 최종 산출물이 어떤 유형, 어떤 품질의 그래픽을 요구하는지 충분히 고려해야 한다. 만약 복잡한 인터랙티브 그래픽이 많아진다면 svg 대신 canvas나 웹GL 등을 검토하는 것도 필요하다.
svg와 관련해서는 반응형 디자인 구현이 쉽다는 것도 큰 장점이다. 뷰박스(viewBox) 속성을 조절하면 그래픽 크기를 다양한 디바이스에 맞게 유연하게 조절할 수 있다. 그리고 실제 프로젝트에서는 svg를 직접 코드로만 작성하는 것이 아니라 d3.js와 같이 svg를 효율적으로 다루는 외부 라이브러리와 함께 활용하면 작업 생산성과 확장성을 높일 수 있다.
마치며
오늘도 환급 챌린지 37강 공부 완료!!
이번 강의에서는 차트 라이브러리를 구현하기 위하여 interval과 svg에 대한 내용을 다루었다. 워낙 자주 사용하는 요소들이기 때문에 이번 기회를 통해 다시 한 번 정의를 리마인드할 수 있었다.