요즘 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..