Dot24 리액트에서 도넛 차트를 만들어보자 리액트에서 도넛 차트를 만들어보자 목차 도넛 차트 Canvas? DIV? SVG? stroke-dasharray stroke-dashoffset 직접 만들어보기 애니메이션 keyframes 도넛 차트 Canvas? DIV? SVG? 도넛 차트는 Canvas, DIV(html, css), SVG 등 크게 3가지 방법을 사용하여 만들 수 있습니다. 각각의 특징을 간단하게 살펴보면, Canvas를 이용한 방식의 특징은 비트맵 영역을 활용하는 것입니다. 즉, 자바스크립트 코드로 화면 위에 픽셀을 그려 넣는 방법입니다. 이와 같은 방식은 픽셀을 다루게 되어 도형의 크기에 따라 해상도를 따로 고려해야 하는 단점이 있습니다. 다음으로 DIV를 이용한 방법입니다. DIV로 도넛 차트를 그리는 경우, 원을 나타내기 위해.. 2021. 11. 10. SVG viewBox SVG viewBox 목차 SVG란 viewBox란 의미 기본 예시 위치 조정 예시 확대, 축소 예시 SVG란 SVG에 대해서 간단하게 알아보자. SVG란 Scalable Vector Graphics의 약자로 확장 가능한 벡터 그래픽, 다시 말해 크기를 확대하거나 축소할 수 있는, 수학적 함수를 이용해 도형이나 선을 그려서 표현한 그래픽이라고 할 수 있다. 여기서 수학적 함수를 이용해 도형이나 선을 그려서 표현한이라는 의미는 우리가 수학 시간에 배웠던 좌표평선 위의 그려져 있는 그래프 정도로 이해할 수 있다. SVG는 이런 방식을 차용함으로써, 우리가 흔히 알고 있는 jpg, png, gif와 다르게 확대해도 선명도가 떨어지지 않는다. 또한, 도형이나 선으로 구성되어 있어 파일의 용량이 상대적으로 작다... 2021. 10. 24. Git) Git Command 모음 Git Command 모음 자주 사용해서 기억하려고 작성. 공식 문서 참조 목차 커밋 메시지 수정 브랜치 삭제 브랜치 이름 변경 커밋 메시지 수정 링크 브랜치 삭제 Remote 브랜치 git push origin --delete [브랜치명] Local 브랜치 git branch -d [브랜치명] // 브랜치에 변경 사항이 없는 경우 삭제하는 방법 git branch -D [브랜치명] // 브랜치에 변경 사항이 있는 경우 삭제하는 방법 삭제하는 게 확실하다면 깔끔하게 git branch -D [브랜치명]을 사용하자. 브랜치 이름 변경 Local 브랜치 git branch -m [변경 전 브랜치명] [변경 후 브랜치명] 해당 브랜치로 checkout 된 상태에서 진행했다. 2021. 10. 20. 우테코 프로젝트에서 Github Actions를 이용한 배포 자동화 우테코 프로젝트에서 Github Actions를 이용한 배포 자동화 팀 프로젝트 백중원에서 프론트앤드 배포 인프라로 AWS의 S3와 CloudFront를 사용하고 있다. 하지만 배포 과정에서 자동화가 적용되지 않은 상태라, 실제 서비스에 사용되는 main 브랜치나 develop 브랜치가 최신화될 때 매번 수동으로 S3에 객체를 업로드하고 있었다. 객체 자체를 업로드하는 과정이 복잡한 것은 아니지만, 매번 최신 객체가 업로드되어 있는지 확인해야 하고 이로 인해 추가적인 커뮤니케이션의 비용이 든다. 따라서 Github Actions를 사용하여 배포 자동화를 적용하게 되었다. 배포 자동화가 이루어지면 다음과 같은 플로우로 배포가 진행된다. 이번 글에서는 5, 6번과 관련된 부분을 다룰 예정이다. 이해를 돕기 .. 2021. 9. 23. 이전 1 2 3 4 ··· 6 다음
