🚧

[WIP] Algorithm Graphic

subtitle

알고리즘은 해야겠고, 그래픽은 하고 싶고

stacks

•

Typescript

◦

타입 체킹

•

React, gatsbyJS

◦

개츠비 static site generation이 next.js보다 퍼포먼스가 더 좋다고 해서 사용해봄

•

Tailwind-css, Emotion

◦

Atomic css 써보고 싶어서. 대신 atomic css는 가독성이 떨어져서 재사용하는 컴포넌트는 @emotion/styled 로 semantic하게 관리

•

D3

◦

Network Graph 렌더링

•

Jest

◦

알고리즘 테스트

TODO

BFS, DFS

BFS 알고리즘, 테스트 코드 작성

DFS 알고리즘, 테스트 코드 작성

Graph Visualization

D3로 network graph 만들기

Graph Search 애니메이션 추가 (노드 방문할 때마다 색깔 바뀌게)

D3 in React

d3와 react 모두 DOM의 렌더링을 조작한다. d3는 DOM에 새로운 엘리먼트를 추가하거나 속성을 바꾸는 등 직접적으로 DOM을 조작한다. react는 가상 DOM을 만들어 props나 state가 바뀌면 DOM에 변경사항을 업데이트한다.

이 글의 글쓴이 의견에 따르면 react, d3를 같이 쓰는 가장 좋은 방법은 react에서는 정적인 컴포넌트, 즉 d3 차트에 그릴 컴포넌트들을 react에서 렌더링하고 d3는 애니메이션을 조작하도록 하는 것이라고 한다.

react만 쓰면 가독성은 좋은 대신에 d3의 transition을 쓰지 못하고, d3만 쓰면 가독성이 좋지 못하고 하나의 태그 안에서 모든 것을 조작해야하기 때문에 컴포넌트의 구조화를 기대할 수 없다. 그러므로 애니메이션 부분을 제외한 컴포넌트 렌더링은 react로, 그 외에 엘리먼트의 위치를 업데이트하거나 형태를 변형시키는 등 필요한 부분만 d3로 조작한다.

Typescript: type vs interface

•

https://pawelgrzybek.com/typescript-interface-vs-type/

interface는 Object 타입으로 제한된다

•

반면 type은 원시 타입(string, null)로 바로 표현될 수 있다.

•

type은 interface나 type을 사용해서 새로운 타입을 만들 수 있다.

type info = string | { name: string };
TypeScript
복사

2. interface는 합쳐질 수 있지만 type은 그렇지 않다

•

같은 이름의 interface를 여러번 선언하면 합쳐질 수 있다.

•

같은 이름의 type을 여러번 선언하면 컴파일 에러가 난다.

interface DudeInterface {
  name: string;
}

interface DudeInterface {
  age: number;
}

const pawel: DudeInterface = {
  name: "Pawel Grzybek",
  age: 31
};
TypeScript
복사

3. type은 computed type을 key로 사용할 수 있다.

•

computed type이란 평가된 타입을 말한다. 예를 들어 [key in Keys] 는 Keys 타입의 키들 중 하나로 평가된다. 대신 평가된 타입을 키로 쓸 때는 대괄호 안에 써줘야 한다.

•

interface에서는 computed type을 키로 쓸 수 없다.

type Keys = "firstname" | "surname"

type DudeType = {
  [key in Keys]: string
}

const test: DudeType = {
  firstname: "Pawel",
  surname: "Grzybek"
}
TypeScript
복사

References

•

javascript로 network graph 그리기

•

오픈소스: algorithm-visualizer

•

css-graph-node (Collatz Graph)

•

위키: 콜라츠 추측

•

d3 - network graph basic

•

react, d3 ecosystem

•

how to use d3 in react

•

d3, react step by step tutorial

•

d3 - force layout

•

d3가 노드를 링크하는 방법: 데카르트 좌표계

•

고정된 graph