목표 하나의 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에 대한 지식을 진지하게 얻지 않으면 계속해서 난항을 겪을 것이라 생각했기 때문입니다. 따라서 이에 대한 공부 결과를 포스팅할 생각입니다.

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

목표 Valina.js, React.js, Vue.js 중 적절한 라이브러리 탐색할 예정입니다. 노드를 그리고 에지를 연결하기 쉬운 방식이 무엇일지 알아낼 계획입니다.

목표 - 웹에서 시각적인 방향 그래프를 보여주기 위한 지식 습득 계획 회차 목표 세부내용 1회차 Valina.js, React.js, Vue.js 중 적절한 라이브러리 탐색 Valina.js, React.js와 Vue.js의 지식을 고루 습득 2회차 그래프를 그리기 위한 객체 설계 그래프의 vertex와 edge를 구성 3회차 그래프의 동작을 보여주기 위한 시각화 설계 색, 애니메이션, 곡선 edge 등 4회차 간단한 그래프 알고리즘 시각화 DFS 시각화 해보기 5회차 간단한 그래프 알고리즘 시각화 BFS 시각화 해보기 6회차 Github Page를 통해 배포해보기 관련 내용을 포스팅 세부 계획 - 토이프로젝트를 위한 최소한의 지식만 습득할 예정 - 그래프를 그리면서 알게된 내용 포스팅