biud436/initialeditor

자체 개발한 2D 게임 엔진의 맵을 편집할 수 있게 해주는 웹 기반 맵 에디터(Tilemap Editor)입니다.

🧳 Github Stats

🔨 Tech Stack

Backend: NestJS, Node.js, TypeORM, Docker, Redis, AWS EC2, Linux(Ubuntu)

Database: MariaDB

Frontend: React, React Native, SWR, React Query, Styled Components, MUI

Languages: Typescript, Javascript, Ruby, C#, C++

initialeditor's Issues

리액트로 변경한 후, 메뉴가 제대로 닫히지 않는 문제가 있습니다

지금까지 프론트엔드 환경은 5번의 변화가 있었습니다.

바닐라 자바스크립트 -> 제이쿼리 -> 뷰 -> 리액트 -> Next.js

뷰까지는 제대로 동작했으나, 리액트로 넘어온 후부터 메뉴가 제대로 닫히지 않는 문제가 있습니다.

디버깅 환경을 갖춘 후, 제대로된 분석이 필요합니다.

I will be going to change State Management Library as `mobx`

I'll change the state management library as mobx, because I'll be going to import a many of class components without converting with functional component to react hooks.

For reducing my work time, I will be going to connect between class components and react hook efficiently.

Mobx is pretty good library, it has a best structure for OOP.

원형 툴 갑자기 동작 안함.

드래그 영역은 사각형 툴에서 힌트를 얻을 수 있습니다

InitialEditor/packages/tilemap.ts

Line 576 in 41b34be

(mouse.x - mouse.startX) / this._tileWidth,

tileset marker's range can be calculated using startX variable in mouse

refactor: 모노 레포로 변경 필요

packages에 있는 파일들은 별도의 설정을 가집니다. 또한 빌드도 따로 해야 합니다. 따라서 분리를 하는 것이 좋아보입니다. 렌더링 부분은 react boiler plate를 yarn 워크스페이스로 추가하여 이동시켜 빌드하는 것이 좋아보입니다.

typedi로 의존성 주입

typedi라는 라이브러리를 활용하여 의존성 주입을 관리하는 시스템을 추가해볼까 합니다.

Remove Nextron(Electron)and Webpack

We will remove the Electron due to compatiblilty issue and will port to the browser. NextJS is good stuff, but SSR is not need in currently in the Map Editor

chore: migrate as pixi.js v7

We need to migrate a new pixi version.

try to below link:

https://github.com/pixijs/pixijs/wiki/v7-Migration-Guide

컨트롤러와 모델, 뷰모델 폴더와 부속 파일들 제거하기

뷰로 변환함에 따라 컨트롤러와 모델, 뷰모델 폴더는 필요 없게 되었습니다.

빠른 시일 내에 제거 바랍니다.

리액트에서 창 띄우기와 툴바 연동 작업 필요

뷰를 완전히 제거하였기 때문에 창 로직을 새로 구상해야 합니다.

최상위 노드에만 이벤트 추가

이벤트를 많이 설정하면 이벤트 루프에 영향을 주므로 최상위 노드에만 설정하고 전파에 주의한다.

• 최상위 노드의 이벤트에서 데이터셋이나 타겟 태그 네임 등으로 이벤트를 구분할 수 있다.
• 데이터셋 내용은 카멜케이스로 받아서 관련 모델을 생성할 수 있다.
• 모델을 창 컨트롤러로 전달하면 관련 창(뷰)을 띄울 수 있게 한다.
• 데이터와 렌더링을 원천적으로 분리한다.
• 최대한 바닐라 자바스크립트를 사용한다.

mvc 패턴으로 변경

[TODO] Backend : Node Express -> Nest.js / FrontEnd : Vue.js

To-do list

• Backend : Node Express -> Nest.js
• FrontEnd : Vue.js + Vuex

Remove legacy code like jQuery

InitialEditor/packages/TilesetCanvas.ts

Lines 75 to 95 in cc8158c

	this._canvas = $("<canvas />", { id: "tileset-canvas" })
	.attr("width", canvasWidth)
	.attr("height", canvasHeight)
	.css({
	padding: "0",
	margin: "0",
	});
	this._parent.prepend(this._canvas);
	this._parent.css({
	width: "100%",
	height: "60%",
	});
	/**
	* @type {CanvasRenderingContext2D}
	*/
	this._context = (this._canvas.get(0) as HTMLCanvasElement).getContext(
	"2d"
	)!;
	const ctx = this._context;

I have to remove a legacy code like jQuery in the packages. the package library has to access something elements such as canvas and menu items without v-dom directly. so I have to replace corresponding code using document.createElement(). and it is a lot of mission in there.

변경점: 타입스크립트 패키지를 별도의 패키지로 분리

SSR (서버 사이드 렌더링)이 되지 않는 타입스크립트 패키지를 웹팩을 통해 별도로 빌드하였습니다. initial-eidtor.js 스크립트는 useEffect가 호출된 이후에 동작하며 결과적으로는 Next.js에서 기존 스크립트를 이용하여 맵에디터 구동이 가능하게 되었습니다.

기존 DOM 접근 부분은 최대한 제거하는 방향으로 선회 해야겠습니다.

    useEffect(() => {
        window.$ = jQuery;
        window.onMounted(() => {
            if (window.app) {
                alert("시작되었습니다");
                window.app.on("openWindow", openWindow);
            }
        });
    }, []);

DOM 접근 문제로 도저히 통합되지 않았으며 현재 패키지에서 통합할 수 있는 유일한 방법은 웹팩을 통해 별도의 스크립트로 빌드하여 마운트된 이후에 스크립트를 실행하는 것이었습니다.

하지만 이렇게 하면 리액트를 사용하는 목적을 상실하게 됩니다. 그러나 프로그램 동작이 최우선이므로 동작을 방해하지 않는 선에서 디커플링이 가능한 부분만 디커플링을 해나가도록 하겠습니다.

캔버스 부분은 사실상 디커플링이 불가능합니다.

fix: Shotcut, MenuCommand 등 몇몇 데코레이터 변경 필요

스캐너(Scanner)기반의 저장이 아니라 Reflect.defineMetadata로 변경하여야 합니다.

스캐너 기반의 코드는 현 단계에서 불필요한 코드입니다.

레이어 그룹 추가

(Feature) Adding a new system menu on Mac / 맥 전용 시스템 메뉴

The menu system like Windows Style will have to remove on the MacOS.

innerHTML로 구현된 창을 modal 또는 createElement 방식으로 변경

문제점

• innerHTML은 스크립트 태그가 동작하지 않기 때문에 <img> 태그의 onload를 이용하여 스크립트를 인젝션하고 있는데 이는 보안에 좋지 않음.
• 현재 구조는 Model / ViewModel / View / Controller로 창 하나를 만드는 데 4개의 클래스를 만들어야 한다. 개인 프로젝트 크기에서는 이러한 클래스 갯수를 감당하기가 힘들다. 이렇게 하면 5년이 지나도 만들지 못할 것이다. 규모 축소 및 개선 필요.

궁극적인 방향

• React나 Vue.js 같은 모던 웹 프레임워크에서는 별도의 DOM 렌더러가 있고 상태 관리에 유용함.
• 굳이 일렉트론을 쓸 필요가 없음. 서버가 없어도 HTML5의 FileReader를 이용하여 base64로 내보낼 수 있고 이를 캔버스에서 그대로 활용할 수 있음.

해결책

• React나 Vue.js를 이 참에 배워서 구현해보는 것이 최선책.
• 창을 index.html 에 처음부터 모두 생성하는 모달 방식은 온라인 한글이나 네이버 워드에서도 사용하고 있다. 그러나 요즘에는 리액트처럼 동적으로 생성하는 방식이 인기이며 구글 문서나 성능을 요구하는 프로젝트에서는 사용되고 있지 않다.

react + next + electron으로 개발 환경 다시 세팅중

개발 환경을 변경 중에 있습니다.

https://github.com/biud436/InitialEditor/tree/next

더 나은 환경을 위해 뷰에서 리액트로 옮기는 작업을 하고 있습니다.

상태 관리는 리코일을 쓸 예정이며, 안타깝지만 제이쿼리도 완전 제거가 불가능하여 공존합니다.

현재는 UI 구현이 우선 목표입니다.

jquery 추가

창을 항상 위에 고정하는 기능 토글 메뉴 추가

메뉴 중에 창을 항상 위에 고정하는 기능을 토글하는 메뉴를 추가해야 할 것 같습니다.

하지만 어려움이 있습니다.

전부 웹이기 떄문에

메뉴 또한 바닥부터 전부 웹이라 별도의 UI 메뉴 폼이 없으며, Font Awesome 등을 활용하여 �체크 박스를 표시하는 방법으로 가야 할 듯 합니다.

리코일을 통해 현재 열린 창 관리하기

뷰에 익숙하지만 리액트로 바꾸게 된 계기는 단순합니다. 리액트는 많이 쓰기 때문이며 개발 환경 구성이 잘 되어있습니다. 뷰의 경우, 손수 구현을 해야 했으며 대체적으로 핫 리로드도 되지 않아 개발에 어려움이 많았습니다.

리액트 + 타입스크립트 포팅 결과 대체적으로 그리는 부분은 잘 동작하고 있습니다. 하지만 리액트로 바꾸면서 이전 브랜치의 커밋 히스토리를 가져올 수가 없는 상황입니다.

또한 아직 제이쿼리를 다 걷어내지 못하였습니다. 그리고 상단 메뉴는 기존에는 뷰 라우터 기반으로 라우팅을 했었는데,

리액트에서는 리코일 등을 통해 현재 띄워진 창의 이름을 리코일 상태 값으로 가져오고, 타입스크립트를 통해 동적으로 태그를 만들어낼 수 있으므로, 상태 값을 구분하여 현재 창에 맞는 창 태그를 띄워줘야 할 것으로 보여집니다.

대략적으로, 리코일 아톰에는 다음과 같은 값이 저장되어야 합니다.

• 창이 열려있는지 여부
• 현재 열려있는 창의 이름 (PascalCase)

refactor: electron-react-boilerplate로 마이그레이션 필요

Nextron에서 Electron + React + TS + Webpack로 변경한 결과, 기존에 타입스크립트로 작성된 일렉트론 시작점(엔트리 포인트)가 웹팩 빌드에 많은 오류가 발생하였으며 여러 시도 끝에 빌드까진 성공했지만 모듈 로드가 되지 않는 현상이 있습니다.

바퀴를 재발명하지 말고 기존의 코드 베이스를 electron-react-boilerplate 프로젝트에 맞춰야 잘 동작할 것으로 보여집니다.

Removing the file called `WindowCreator`

The file named WindowCreator.ts contains the class called WindowCreator.

it is pretty legacy file and it is connected with a many of files.

Now days, its file is unnecessary.

Settting up the `next-i18next`