데브코스 67일차 TIL : Next.js 및 데이터시각화를 구성하는 요소, D3

이런저런 프로젝트의 기술스택으로 자주 보였던 Next.js를 배우게 되다니, 우연히 길에서 유튜버를 마주친 것 마냥 내적 친밀감이 느껴졌다. 파일, 폴더 생성만으로도 간단하게 라우팅이 된다는 것이 매력적인 나만의 연예인,,

Next.js

동적라우팅, useRouter 훅

[id].tsx 와 같이 대괄호로 감싸주면 동적 라우팅 가능

import { useRouter } from "next/dist/client/router"; 를 통해 {router.query.id} 값을 보여줄 수 있는데, posts 폴더에 [id].tsx 를 만들었다고 쳤을 때, 주소가 localhost:3000/posts/1 일때는 1, localhost:3000/posts/2 일때는 2가 나타난다.

그 외에도 pathname 등 동적라우팅의 다양한 값 받아올 수 있음

Next.js에서 emotion 사용

emtion을 사용할 때 emotion 홈페이지에서 babel설정의 Next.js 세팅을 .babelrc에 복사붙여넣기 하면 편리하게 사용 가능

---

데이터 시각화

• 데이터 시각화는 데이터 기반 시각화, 분석 기반 시각화가 있으며, 디자인은 심미성 40%, 명료성 60%이 적절하다.

범주에 순서가 있다면 막대그래프가 유리하며, 여러 데이터셋을 시각화하려면 색과 막대를 동시에 사용하는 것이 좋다.

데이터시각화 참고사이트

컬러팔레트
색각이상자 배려

SVG로 도형 그리기

<svg width "500px" height="500px">

• 원 <\circle cx="100" cy="50" r="20" /> 이때 기본값은 px이며, px를 붙여도 사용 가능하다.
• 타원<\ellipse cx="50" cy"25" rx"40" ry="20" />
• 직사각형 <\rect x="0" y="0" width="100" height="20" />
• 모서리가 둥근 사각형
• 다각형 <\polygon points="100, 0 50, 50 150, 50" />
• 선 <\line x1="0" y1="0" x2="200" y2="50" stroke="black" />
• Path <\path d="M 0 50 q 50 -50 100 0 l 100 0" /> 등속성을 이용하여 복잡한 그림 가능
• 문자 <\text x="10" y="25" font-size="20">SVG 문자

<\/svg>

D3.js

• Data-Driven Documents 데이터 기반으로 DOM-을 다루는 라이브러리
• 다양한 데이터 포맷과 import를 제공하며, HTML,SVG 웹 표준 기술을 다양하게 사용한다.
• 데이터와 DOM element를 결합하는 역할을 한다.
• 각각의 데이터 포인트를 SVG element와 결합하여 시각적 형태와 위치를 조절한다.