Dashboard
반응형 Dashboard를 제작해보았다.
유튜브 영상을 보며 제작했는데 다양한 css 사용법을 알게된 것 같았다.
지금은 유튜브 영상 제작자의 방식을 그대로 따라한 것이기 때문에 형태가 똑같은데, 이를 바탕으로 좀 더 다른 부분을 추가하거나 바꿔보는 작업을 하면서 더 공부하면 재밌을 것 같다.
제작하면서 느낀 점
전반적인 html, css, js 작성 방식이 어렵다거나 처음보는 내용을 크게 없었다, 그런데 내가 평소 잘 쓰지 않았던 css 문법을 영상 제작자는 자유자재로 쓰는 모습을 보고 확실히 아직 내 실력과 알고 있는 지식이 많이 부족하다는 것을 깨닫게 했다, 나는 css에서 " nth-child " 를 잘 사용하지 않았는데, 이번 dashboard를 만들어 보면서 느낀 점은 "nth-child"를
잘 사용하면 css 작성이 좀 더 수월할 수 있다는 것이었다.
같은 class를 지녔더라도 몇번 째 자식 요소인지를 표기해줌에 따라 색이나 크기, 위치 등을 다르게 지정할 수 있다는 점이 확실히 큰 장점을 가지는 것 같다.
웹 프론트엔드 개발자를 꿈꾸고 사실 html과 css는 한번 공부한 후 제대로 살펴본 적이 없고, 거의 대부분 JS와 리액트만 공부하고 있었는데 이번 작업 과정을 통해 css도 다시 한번 공부하는게 좋을 것 같다고 생각하게 됐다.
그 밖에..
엘리스 교육과정을 통해 팀 프로젝트를 진행했을 때 다양한 데이터 자료를 시각화해서 보여줄 필요가 있었다.
그때 React에서 사용하기 좋은 시각화 라이브러리로 어떤 것을 사용할지 두개 중에 고민을 했던 적이 있다.
그 중 하나가 실제 팀 프로젝트에서 사용했던 "rechart" 이고, 이번 Dashboard를 제작할 때 사용한 것은 "Chart.js"였다.
rechart의 경우 React 라이브러리인 만큼 react 환경에서 바로 사용해볼 수 있는 다양한 예제를 공식 문서와 블로그, 예제 사이트 등을 통해 확인할 수 있었다. 코드 작성 부분에서도 일부 차트를 제외하면 간결한 편이라 사용하기에 어렵지 않았다.
이번에 Chart.js도 마찬가지였는데, Chart.js가 더 간단하거나 비슷하게 느껴졌다.
물론 아직 많은 예제를 봐온 것이 아니기 때문에 다른 차트를 직접 써보면서 확인을 해봐야 제대로 알 수 있고 시각화 자료를 만들어 보는 것은 재미있기 때문에 좀 더 다양한 것을 한번씩 사용해볼 생각이다.
rechart와 Chart.js 둘다 개발자가 사용하기 편하고, 웹 서비스 사용자도 보기 편하도록 디자인이 되어있어서 본인이 더 선호되는 방식을 사용하면 좋을 것 같다.
Dashboard 실행 장면
유튜브 영상을 보면서 제작했기 때문에 완전히 이해하면서 만들었다고 보기 힘들다, 일부분 개선하고 싶은 점도 있기 때문에 공부와 더불어 다른 방식을 추가하거나 개선해가면서 더 만들고 공부해볼 생각이다.
참고 유튜브 주소
'연습 프로젝트' 카테고리의 다른 글
| Landing page (0) | 2022.01.21 |
|---|