👻 nodeTypes에 등록할 컴포넌트 만들기필자의 경우에는 컴포넌트 폴더에 reactflow라는 폴더를 만들고 nodes라는 폴더를 생성하여 그 안에 커스텀 노드들을 만들어주었습니다.editorTools에 만들어준 4개의 모형대로 해당 폴더 안에 컴포넌트들을 만들어보겠습니다.네이밍 센스가 부족하여 간단히 test1,2,3,4로 구분하였습니다 😅 🙌🏻 Test1.tsxconst Test1 = React.memo(() => { return ( );});export default Test1;...test2, test3, test4 또한 동일하게 만들어주자.스타일링은 ReactFlow 최상단을 감쌌던 styled-component 안에서 해줄 거 기 때..

🍄 드래그 앤 드롭 구현원리드래드 앤 드랍과 관련하여 리액트에서 다음과 같은 두 개의 이벤트를 활용해보고자 한다.- onDrop : 드래그가 끝난 후, 객체를 놓는 장소에 이벤트 발생- omDragOver : 드래그 시 마우스가 객체 위에 있는 경우 이벤트 발생 두 개의 이벤트에 대한 설명은 다음 링크를 참조 바란다.onDragOver 이벤트 관련 onDrop 이벤트 관련 HTMLElement: drop event - Web APIs | MDNThe drop event is fired when an element or text selection is dropped on a valid drop target. To ensure that the drop event always fires as expected..

🍄 레이아웃을 분리하여 보자!지금까지는 준비된 nodes 와 edges를 Reactflow 에 담아줬다면,이제부터는 툴에서 직접 끌어다가 도형을 그리는 틀을 잡아보려고 한다.기존의 하나의 컴포넌트에서 만들어진 코드를 다음과 같이 두 컴포넌트 영역으로 분리해보고자 한다.EditorTools 에는 간단한 모형 3가지를 두고,해당 모형이 ReactFlowCanvas 에서 자유롭게 생성되도록 작업을 해볼 것이다.먼저 파일을 분리하면서, EditorTools 에 대해 간단한 스타일링을 입히면 다음과 같이 표현해볼 수 있다.🍄 EditorTools.tsximport styled from "styled-components";const EditorTools = () => { return ( "te..

🍄 edge 알아보기edge 에 대한 자세한 속성과 타입에 대한 설명은 다음 링크에서 확인 할 수 있다.https://reactflow.dev/api-reference/types/edgetype DefaultEdge = { id: string; type?: string; source: string; target: string; sourceHandle?: string | null; targetHandle?: string | null; style?: CSSProperties; animated?: boolean; hidden?: boolean; deletable?: boolean; data?: T; className?: string; sourceNode?: Node; targetNo..

🍄 Nodes 알아보기앞서 예시를 보았던 것처럼,Reactflow 에는 반드시 nodes 와 edges 를 넣어줘야 한다.nodes 는 도형, edges 는 선이라고 간단하게 이해하면 된다.nodes 의 타입은 Node[] 인데, 데이터 형태는 다음과 같다.reactflow - node[]의 타입 상세 링크 바로가기export type Nodeextends string> = { id: string; position: XYPosition; data: T; type?: U; sourcePosition?: Position; targetPosition?: Position; hidden?: boolean; selected?: boolean; dragging?: boolean; draggable..

유명한 라이브러리 중 하나인 reactflow를 활용하여 다이어그램 편집 툴을 개발해본 경험을 블로그로 포스팅해보고자 한다.이번 포스팅에서는 전체적인 개요와 라이브러리 설치에 대해 알아보려고 한다. 개요는 다음 링크를 통하여 확인 할 수 있다.https://reactflow.dev/learn Quickstart - React FlowReact Flow quickstart that shows how to install the package, use it and where to find example appsreactflow.dev 먼저, 라이브러리 설치명령어는 다음과 같다.npm install reactfloworyarn add reactflow Quickstart 에 써져있는 예시문을 응용하여 로컬에서 ..

이번 포스팅에서는 간단히 NestJS 폴더 설치하는 방법과 초기 보일러 플레이트 구조에 대하여 설명해보겠다. 🤔 NestJS 가 무엇인지??NestJS는 Backend 프레임워크 중 하나이며, 자바스크립트 환경에서 돌아간다. 자바스크립트 기반으로는 node express가 가장 대표적이지만 NestJS는 express에서 지원하는 기능들을 다 지원받을 뿐 아니라 DI 를 지원해주는 프레임워크이기에 express보다 더 큰 규모에서 많이 쓰인다고 볼 수 있다.무엇보다 스프링 부트의 많은 기능들을 가져와 쓰고 있기에 (70% 정도) 스프링 부트를 하던 사람들이 NestJS 를 접했을 때 상당히 유사하다고들 한다..! ❕들어가기전에 다른 백엔드 프레임워크도 알아보자자바, 파이썬, 자바스크립트의 대표적인 백엔..

이번에는 차트에 click event를 넣어, 클릭하는 index 총합의 데이터를 하단 영역에 보이도록 만들어 볼 것이다.이전 포스팅에 이어 믹스형 차트에서 진행할 것이기에, 처음부터 보고싶은 사람들은 이전 포스팅을 참고하시길 바란다 🙂먼저, ChartJS 에서 안내하는 이벤트 사용법은 다음과 같다. event 참고 문서 - ChartJS Interactions | Chart.jsInteractions Namespace: options.interaction, the global interaction configuration is at Chart.defaults.interaction. To configure which events trigger chart interactions, see events. N..

다른 차트 형태들은 예시가 많이 올라와있어서 비교적 예시가 적은 믹스형 차트에 대해 알아보고, 클릭 이벤트 등등을 적용해보고자 한다.options와 그 외 기본적인 세팅들은 앞선 포스팅들을 참고해 주면 좋다! 먼저 예시 데이터를 어떤걸로 할지 고민하다가 npm trends 사이트의 차트를 응용해 보기로 하였다!react vs vue - npm trends 링크 참고  npm trends 를 참고하여, react / vue에 대한 line 차트와 두 가지의 합계를 나타내는 총합계에 대한 bar 차트를 혼합하여 표현하고자 한다. 🍄 Mix 형 더미 데이터 넣기기본적인 데이터 구조는 다음과 같이 잡았다.import { Chart } from "react-chartjs-2";import { ArcElemen..

이번에는 ChartJS의 options를 활용하여 차트를 이쁘게 꾸며보겠다.먼저 options 에 대한 설명을 주석으로 달아보겠다.👩🏼‍🏫 기본 옵션const options = { // 기본 설정 spanGaps: true, // 데이터가 중간중간 없을 때 이어 그릴지의 여부 grouped: true, // x축 값이 같은 것끼리 묶일지의 여부 (주로 Line Chart에서) responsive: true, // canvas의 반응형 여부 maintainAspectRatio: false, // 캔버스의 가로세로 비율 유지 여부 // 차트 크기 설정 aspectRatio: 2, // maintainAspectRatio가 true일 때 사용되는 비율 // 애니..