요즘 NextJS 는 정말 대세 기술이다. 리액트에서도 적극적으로 사용을 권장하는 만큼, React 에 대해 기본적인 지식이 쌓였다면 NextJS 를 공부해두는 것을 추천한다. SPA 을 중심으로 핫했던 CSR 기반 방식에서 Server component를 제공하여 SSR 을 혼합해 사용할 수 있다는 점은 NextJS 의 가장 큰 매력일 것이다. SSR을 지원함으로 JS 번들링 크기를 CSR 방식에 비하여 크게 줄여줄 수 있다.그렇다면, 이번 포스팅에서는 NextJS의 프로젝트 초기 세팅에 대하여 다루어보도록 하겠다. 먼저 터미널에서 다음 명령어를 통해, NextJS 템플릿을 생성한다.yarn create next-app 다음과 같은 추가 설치나 세팅할 옵션들을 고르게 하는데, 아래 이미지처럼 생성하였다..

👻 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 를 접했을 때 상당히 유사하다고들 한다..! ❕들어가기전에 다른 백엔드 프레임워크도 알아보자자바, 파이썬, 자바스크립트의 대표적인 백엔..

서버 내에서 npm run build 를 통하여 배포를 하는 것보다는 로컬에서 해당 명령어를 사용하여 빌드된 파일을 서버 안에 덮어 씌어주는 방법이 더 안정적이라 생각하여 관련 스크립트를 만들게 되었다.로컬의 파일을 서버 내로 전송해주는 명령어가 scp 라고 한다. full command 로는 다음과 같다.scp -i ~/.ssh/[ssh_key] -r [빌드 된 폴더] [서버계정명]@[서버IP]:/[전송해줄경로(절대경로)]예를 들어, ssh 키 명이 test이고, 빌드된 폴더가 /dist 폴더, 서버 내부에 덮어쓸 경로가 /home/project/dist 라고 하면 다음과 같이 적을 수 있을 것이다.scp -i ~/.ssh/test -r ./dist test@0.0.0.0:/home/project프로젝..

이전편에서는 gcp 내 부하분산을 이용하여 로드밸런서 ip 를 발급받는 방법에 대하여 설명하였다.해당 메뉴를 이용하면 인스턴스 그룹에 대한 인증서를 발급받고, backend 의 특정포트로 연결시킬 수 있다. 그런데...개인적으로 로드밸런서 비용이 나가는 것을 참을 수 없었다 (꽤 비싼..🤑)그래서 웹 서버 내에서 nginx로 cerbot 인증서를 발급 받아 로드밸런서 설정을 직접 해주기로 결정하였다! 다음은 내가 참고한 블로그 글들이다.curl: (35) OpenSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443 Nginx에서 SSL 적용해서 https 로 접속 되게 해볼까? 🌈 1) Nginx로 certbot 설치 및 인증서 발급나..