목표 하나의 edge를 가진 그래프를 만들고 시각화 해보려 합니다. 결과 하나의 edge는 시작점과 끝점이 있어야하고, 방향을 나타내기 위해 화살표로 만들어야 합니다. 이때 시작점과 끝점은 시작 vertex의 중심에서 끝 vertex의 중심으로 향하는 직선 과, 두 vertex의 교점입니다. 이를 구현하기 위해 점을 회전시키는 함수를 만들어야했고, 이때 사용한 것은 회전 변환 행렬입니다. export class Point { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = y; } static getTanValue(centerPoint: Point, targetPoint: Point): number { let w..

목표 하나의 edge를 가진 그래프를 만들고 시각화 해보려 합니다.

목표 저번주에 이어 계속해서 그래프를 구성해보려 합니다. Edge를 그리는데에 있어, 시작점과 끝점을 어떻게 배치할지를 가지고 고민중이며 이를 해결하는 과정을 결과로 포스팅하려 합니다. 결과 Edge의 시작점이 시작되는 부분과 끝점으로 들어오는 부분까지 같이 정렬하여 모든 점들의 위치를 미리 정해두는 방식으로 하는 중입니다. 처음에는 단순하게 점들을 각 Vertex들 서로의 각도를 가지고 정렬했었는데, 그게 시작은 맞지만, 중간에 처리해야할 것들이 더 많았습니다. 이유는 Edge를 그렸을때 서로 꼬이게되는 상황이 발생했기 때문입니다. 따라서 Vertex의 중심부터 시작점 혹은 끝점까지의 각도를 통해 정렬하면, 최대한 꼬이지 않게 점들을 배치할 수 있다고 판단했습니다. 아직 해결하지 못해 코드는 포스팅 하..

목표 저번주에 이어 계속해서 그래프를 구성해보려 합니다. Edge를 그리는데에 있어, 시작점과 끝점을 어떻게 배치할지를 가지고 고민중이며 이를 해결하는 과정을 결과로 포스팅하려 합니다.

목표 canvas api에 대한 지식을 얼추 얻었기 때문에 vertex와 edge에 대한 구조를 설계할 예정입니다. 회고 vanila.js 만으로는 설계의 한계가 있다고 판단했기 때문에 TypeScript를 활용하여 설계했습니다. 시간이 모자라 우선 Vertex만 구성한 후, 테스트 해봤습니다. Vertex.ts export class Vertex { name: string; x: number; y: number; radius: number; ctx: CanvasRenderingContext2D; targetVertex: Vertex[]; constructor(ctx: CanvasRenderingContext2D, name: string) { this.name = name; this.x = this.y ..

목표 canvas api에 대한 지식을 얼추 얻었기 때문에 vertex와 edge에 대한 구조를 설계할 예정입니다.

목표 원래 목표는 그래프의 vertex와 edge를 구성하는 것이었지만 javascript의 canvas api를 공부하는 것으로 바꾸었습니다. 이유는 canvas api에 대한 지식을 진지하게 얻지 않으면 계속해서 난항을 겪을 것이라 생각했기 때문입니다. 따라서 이에 대한 공부 결과를 포스팅할 생각입니다. 회고 react.js에 대한 지식을 얻고있긴 하지만, 결국 시각적으로 보이는 것은 canvas api가 전신입니다. 따라서 이에 대해 공부하기 좋은 사이트를 발견했습니다. https://developer.mozilla.org/ko/docs/Web/API/Canvas_API Canvas API - Web API | MDN Canvas API는 JavaScript와 HTML 엘리먼트를 통해 그래픽을 그리..

목표 원래 목표는 그래프의 vertex와 edge를 구성하는 것이었지만 javascript의 canvas api를 공부하는 것으로 바꾸었습니다. 이유는 canvas api에 대한 지식을 진지하게 얻지 않으면 계속해서 난항을 겪을 것이라 생각했기 때문입니다. 따라서 이에 대한 공부 결과를 포스팅할 생각입니다.

6.0.0 이상 버전에서 react-router-dom 사용시 nested routes 작성법에 대해 정리하려 합니다. 그 전에 먼저 React Router에 대한 몇가지 내용을 작성하겠습니다. React Router - Route React Router의 Route 컴포넌트는 사용자가 접속한 url을 분석하여 어느 컴포넌트를 보여줄지 정의할 수 있도록 합니다. 예를 들어 "https:// ... /papers"를 보여준다고 하면 위와 같은 식으로 라우팅을 할 수 있습니다. Route는 한가지 경로에 대해 정의할 수 있습니다. 따라서 여러 경로에 대해 정의하려면 여러개의 Route가 필요합니다. 따라서 이를 묶어주는 역할을 하는 컴포넌트가 Routes입니다. React Router - Routes 따라서..

목표 Valina.js, React.js, Vue.js 중 적절한 라이브러리 탐색할 예정입니다. 노드를 그리고 에지를 연결하기 쉬운 방식이 무엇일지 알아낼 계획입니다. 회고 Vue.js와 React.js 등 상태를 관리하기 쉬운 라이브러리를 사용하는 것이 적당하다고 생각했습니다. 각 노드들을 상태로 두고 에지에 대한 정보와 다음 노드들을 관리하기에 적절하다고 판단했기 때문입니다. div태그를 사용해서 노드를 그리기는 쉬웠지만 아무리도 에지를 곡선으로 그리기에는 css를 가지고만 그리기는 힘들다고 생각했습니다. 그러던 와중 유튜브에서 Interactive Developers라는 분의 동영상을 접해 코드를 한번 따라서 작성해보고 Canvas api를 사용하면 에지를 그릴 수 있다는 결론에 도달했습니다. 따라..