프로그래밍 「 자바스크립트 편」React와 Pixi로 Electron 그리기 프로그램 구축하기.js

저는 Dungeondraft의 열렬한 팬이며 항상 테이블탑 게임 그룹을 위한 전투 맵을 만드는 데 사용합니다. 그러나 단점이 있으며, 최근 불행한 충돌로 인해 많은 작업을 잃는 실망스러운 경험을 한 후, 나는 내 자신의 구축에 손을 댈 것이라고 결정했습니다.

나는 이것을 공개적으로 만들 것입니다 - 당신은 진행중인 작업 저장소를 볼 수 있습니다 here . 저는 electron 앱을 만들고 있으며 궁극적인 목표는 Dungeondraft로 완성된 기능을 얻는 것입니다. 나에게 흥미로운 것을 유지하기 위해, 나는 적어도 내 관점에서 가장 쉽게 가장 열심히 일하고 있습니다.

어디서부터 시작해야할까요?

기본적으로 그리기 프로그램은 몇 가지 다른 부분, 즉 도구를 사용하여 일반적으로 레이어에서 픽셀 데이터를 조작할 수 있는 캔버스의 조합입니다. 진행 중인 문서를 프로그램에서 편집 방법을 알고 있는 특수 파일 형식(예: .psd)으로 저장할 수 있으며 문서를 다양한 이미지 형식으로 내보낼 수 있습니다.

기술 스택 선택

기술 스택 선택에 대한 제 기사를 읽지 않으셨다면 다음과 같이 요약할 수 있습니다. 이 프로젝트를 위해 몇 가지 학습 요소를 추가하고 싶었지만 여전히 좋은 진전을 이루고 싶었습니다. 나는 다음과 같이 결정했다.

• Electron — Dungeondraft는 데스크톱 애플리케이션으로 배포됩니다. 저는 주로 웹 개발자이며 데스크톱 API에 대한 일류 액세스는 electron을 좋은 선택으로 만듭니다. 앞으로 웹 전용으로 전환할 수 있지만 지금은 데스크톱을 유지하기로 결정했습니다.
• electron-vite — Vite는 훌륭한 빌드 도구이며 electron-vite는 프로젝트를 빠르게 스캐폴딩할 수 있는 여러 가지 템플릿을 제공합니다.
• TypeScript — 저는 개발자로서 TypeScript를 좋아하는데, 그 이유는 TypeScript가 편집기에 추가적인 수준의 인텔리센스를 제공하여 데이터의 모양이나 타사 라이브러리의 서명과 같은 것을 쉽게 기억할 수 있게 해주기 때문입니다.
• React — 저는 2016년부터 모든 프론트엔드 작업과 프로젝트에서 주로 React를 사용했습니다. Svelte와 Vue는 항상 매력적이지만 빠르게 움직이고 싶고 새로운 프레임 워크를 배우는 것은 큰 움직임처럼 보이지 않습니다.
• Mantine — 새로운 프레임워크를 시도하고 싶지는 않았지만 새로운 UI 구성 요소 라이브러리를 사용해 보기로 결정했습니다. Mantine은 Material UI와 매우 유사하지만 수하물이 적고 설치 공간이 작습니다. 나는 그것을 시도하기로 결정했다.
• 픽시.js — 어려운 선택이었어요. 캔버스의 픽셀 데이터를 처리 할 무언가가 필요했습니다. 원시 canvas2d를 사용할 수도 있고, 종이와 같은 즉시 사용 가능한 다이어그램 작성 엔진을 살펴볼 수도 있고.js SVG 또는 WebGL을 사용하여 직접 롤링할 수도 있고, Construct 또는 Babylon과 같은 게임 엔진을 사용할 수도 있습니다. 나는 과거에 그것을 사용했기 때문에 Pixi와 함께 가기로 결정했고 너무 많은 추가 수하물을 추가하지 않고도 2D에 대해 WebGL에 대한 멋진 추상화를 제공합니다.
• ReactPixi — 또 다른 어려운 선택. 캔버스를 설정하는 방법을 선택할 때 바닐라 Pixi 애플리케이션을 사용하거나 React 통합을 사용하여 React 소품 및 상태를 사용하여 Pixi 캔버스를 제어할 수 있습니다. Pixi 캔버스에 대해 원하는 제어 수준과 React 통합을 선택하여 추가할 "마법" 때문에 이것을 선택하는 데 많은 망설임이 있었습니다. 실제로, 나는 이 결정에 대해 매우 엇갈리고 결국 그것을 찢어버리고 Pixi 캔버스와 React 트리를 분리하게 될 수 있습니다.

기술을 선택했으면 프로젝트를 발판으로 삼고 대략적인 로드맵을 만들고 작업을 시작할 때였습니다.