들어가며
데이터 시각화에 관심을 가지면서 가장 먼저 어떻게 차트를 구현하는지 찾아보았습니다. JS기반으로 차트를 만드는 건 기본적으로 D3이며, ChartJS를 이용해 쉽게도 구현이 가능하다고 합니다. 그래서 간단하게 공부를 시작하면서 지금 하고 있는 정리 방법에 대해서도 같이 글을 써보려고 합니다!
본격적으로!
D3를 시작하기 전에
필요한 선행 지식
HTML/CSS JAVASCRIPT VSCode 에 대한 기본 지식이 있어야 합니다!
canvas 와 svg에 대해 어느 정도 이해가 가능해야 합니다!
사실 저는 canvas와 svg에 대한 선행 지식이 거의 없습니다. svg는 그나마 프론트 공부를 하면서 사용해본 적은 있으나 직접적으로 svg를 이용해 그려본적은 없습니다. D3는 svg를 이용해서 차트를 그려주는 것인데, 그나마 인강에서 svg에 대해서 어느 정도 다뤄서 인강을 듣는데 문제는 없었습니다.
무엇으로 공부할 것인가?
-
인프런 : 웹 데이터 시각화
멋사 부트캠프의 이점은 인프런 강의 무료 쿠폰을 받을 수 있다는 것입니다. 그 중에서도 다행히 D3도 포함이 되어 있어서 해당 강의로 결정했습니다.
해당 강의 바로가기 > -
D3의 공식문서보다는 예제가 있는 사이트를 추천받았습니다. 공식문서 자체는 어떤 메서드들이 있는지 파악하기엔 좋지만, 직접 사용해서 적용하기엔 상당히 난이도가 있기 때문에 예제들을 보면서 메서드들을 어떻게 쓰는지 코드의 패턴을 파악해가면서 익히는 게 좋을 듯 싶습니다.
D3.js 공식 문서 >
D3.js 예시 사이트 >
어떻게 공부할 것인가?
항상 새로운 내용을 배운다면 이걸 어떻게 정리해서 내 것으로 만들지 고민이 됩니다. 기록을 잘하기 위해서는 더더욱 이런 고민하는 과정이 필요한데, 유튜브 망령으로 돌아다니면서 얻은 노션 정리 방법을 적용해볼까 합니다ㅎㅎ
- 노션을 이용해서 정리를 합니다.
- [키워드]를 적습니다. 이 키워드는 나중에 자료를 찾기 편하게 인덱스를 붙여놓는 것입니다.
- 이제 그 하위 항목으로 여러 페이지를 만드는데, 페이지 하나의 정보엔 핵심적인 내용 하나만 넣는 것입니다.
예시로 [설정]이라는 인덱스는 프로젝트 초기 셋팅과 관련해서 정리해놓는 곳입니다. 이 하위에 vanilla JS로 할지, React로 할지 구분해서 페이지를 만듭니다.
vanilla HTML 페이지 내부입니다. JS로 이름을 바꿔야겠습니다ㅎㅎ
이렇게 해당 인덱스와 함께 페이지를 목차처럼 정리하는 것입니다. 나중에 검색을 할 때도 이걸 이용해서 편하게 하려고 하는 것입니다.
이 정리 방법의 핵심은 바로 프로젝트에 적용할 수 있게 만드는 것입니다! 단순히 기록용이 아니라 실제로 활용할 수 있다는 것에 초점을 둔 것입니다. 공식 문서보다 좀 더 프로젝트에 적합하게 스스로에게 맞게 정리하는 것이고, 어떤 것을 알고 있는지 확실하게 할 수 있는 좋은 방법이라고 생각하여 이번에 적용을 했습니다! 아직 배워가는 중이라 키워드도 계속 바뀌고 새로 생기고 그렇습니다.
D3 시작하기
인강을 시작한다고 D3를 시작했다! 라고 말하기엔 D3는 양이 방대하다고 생각합니다. 그리고 직접 사용하는 것이 시작한다고 말할 수 있다고 생각합니다! 그래서 D3 인강을 보면서 여러 가지 차트를 그려보고, 그걸 응용해서 사이드 프로젝트 하나를 진행해 볼까 합니다.
이미지를 분석해서 색상을 추출하고 그 색상 데이터를 토대로 차트로 그려보는 것입니다!
- 노션 페이지 정리가 어느 정도 안정화될 때까지 코드를 익힙니다.
- 사이드 프로젝트를 진행합니다. 목표는 D3를 프로젝트에 직접 사용해 보는 것입니다.
- 진행한 사이드 프로젝트를 실제 배포하고 피드백을 받습니다!!
이에 대해서 저는 다음의 문제가 있습니다.
- 배포를 직접 해본 적이 없다!
- 이미지에서 색상을 추출해본 적도 없다!
- 이미지를 업로드해서 화면에 그려주는 작업을 해본 적도 없다!
그렇습니다! 하나하나 해보면서 그 과정을 D3 시리즈에 기록해보도록 하겠습니다! 화이팅!!!
결론
시작하기!! 라는 제목을 가지고 있기엔 시작하기가 시작하기 전에 하는 것보다 짧습니다! 정말 이제 막 시작하여 막연한 느낌을 가지고 있습니다. 못해도 고! 일단 고! 몰라도 고! 무모하게 한 번 가봅시다! 무언가를 시작한다는 것에 두려움보다는 무모하게 부딪혀보는 것이 제 장점입니다. 이번에도 일단 부딪혀보려고 합니다. 화이팅~~~!
