TwentyTwentyOne

Github page로 포트폴리오 웹페이지 만들기 Project들을 만들어 가면서 업데이트를 하겠지만, About페이지를 완성하면서 포트폴리오 웹페지 만들기의 기본적인 글은 마무리 되어가는 느낌입니다.About 페이지에서 남은 부분은 skill에 해당하는 그래프 부분입니다.총 6개의 스킬에 대한 숙력도를 나타내는 원그래프를 그려 나타내는 것입니다.이 부분을 구현하기 위해서 SVG를 통해 Arc와 Text Component를 사용합니다.이렇게 만들어진 Arc + Text component를 skillset이라는 Component로 만들고, meta.js에 정의한 skillset object를 map으로 돌려 완성합니다.추가적인 animation이나 스타일은 styled-component를 이용합니다.svg..

[Project][SVG] Arc 를 그려보자! SVG 로 Arc를 그리기 위해서는 path를 사용해야합니다. path의 d 속성에는 여러개의 명령어가 있는데, 그중 M 과 A 를 이용해 그려보는 react 용 Arc Component를 만들어 봅니다. https://developer.mozilla.org/ko/docs/Web/SVG/Tutorial/Paths A 명령어 원호를 그릴수 있는 명령어인 A는 A rx ry x축-회전각 큰-호-플래그 쓸기-방향-플래그 x y 로 이루어져있습니다. rx 는 x축 반지름 ry 는 y축 반지름 입니다. 큰-호-플래그 는 180도를 기준으로 중심각을 결정합니다. M 명령어 M 명령어는 Move To 호를 그릴 시작 좌표를 지정해줍니다. Arc Components Ar..