react

요즘 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 에 써져있는 예시문을 응용하여 로컬에서 ..

ssh 키의 경우 rsa 방식으로 공개키/개인키를 만들어준다. GitHub이나 서버 접속할 때, 개인의 공개키를 해당 서버에 등록해 둔 후, 개인키로 복호화하여 접근할 수 있는 방식이다.이번에는 GCP에 ssh 키를 생성하여 등록한 후, 맥북 터미널에서도 GCP에서 생성한 VM 인스턴스에 접근하는 방법에 대하여 포스팅해 보겠다.  ☁️ 1) ssh 키 생성하기다음과 같이 퍼블릭 키와 프라이빗 키를 생성한다.ssh-keygen -t rsa -f ~/.ssh/ssh_key -C "이메일 계정"//간단하게는 단순히 ssh-keygen 후 키가 생성될 때까지 enter 치면 된다. (비밀번호x, 그 외 등등 생성 무시하기)위 경로를 통해 새로 만들었거나, 기존에 있었다면 다음의 명령어로 확인이 가능하다.ls -..

ssh 키의 경우 rsa 방식으로 공개키/개인키를 만들어준다. GitHub이나 서버 접속할 때, 개인의 공개키를 해당 서버에 등록해 둔 후, 개인키로 복호화하여 접근할 수 있는 방식이다.이번에는 GCP에 ssh 키를 생성하여 등록한 후, 맥북 터미널에서도 GCP에서 생성한 VM 인스턴스에 접근하는 방법에 대하여 포스팅해 보겠다. 😎 1) ssh 키 생성하기다음과 같이 퍼블릭 키와 프라이빗 키를 생성한다.ssh-keygen -t rsa -f ~/.ssh/ssh_key -C "이메일 계정"//간단하게는 단순히 ssh-keygen 후 키가 생성될 때까지 enter 치면 된다. (비밀번호x, 그 외 등등 생성 무시하기)위 경로를 통해 새로 만들었거나, 기존에 있었다면 다음의 명령어로 확인이 가능하다.ls -a..

나의 개인 프로젝트이기도 한 커리어허브의 백엔드를 GCP로 올렸었는데, 이번 시리즈부터는 GCP에 가입하고 Nodejs 환경을 세팅하고, 로드밸런서 설정, 배포까지의 모든 기록들을 포스팅해보고자 한다.(여담이지만 프런트의 경우 Netlify로 올렸다...ㅎ) 그럼 바로 들어가겠다!🤟🏻 1) GCP 접속하여 가입해 주고 결제정보 등 등록하기최초로 가입했을 경우, 3개월 간 300 크레디트를 제공해 준다. 🤟🏻 2) 프로젝트 수정하기 / 만들기처음에는 my-first-project로 되어있을 텐데, 하위 경로를 통하여 이름을 편집할 수 있다.시작페이지 > 우측 상단 '더보기' > 프로젝트 설정 > 프로젝트명 수정 프로젝트를 새로 만들고 싶다면 아래 경로에서 만들 수 있다.좌측 '더보기' > IAM 및..