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++
자체 개발한 2D 게임 엔진의 맵을 편집할 수 있게 해주는 웹 기반 맵 에디터(Tilemap Editor)입니다.
Home Page: https://initial-editor.biud436.com
지금까지 프론트엔드 환경은 5번의 변화가 있었습니다.
바닐라 자바스크립트 -> 제이쿼리 -> 뷰 -> 리액트 -> Next.js
뷰까지는 제대로 동작했으나, 리액트로 넘어온 후부터 메뉴가 제대로 닫히지 않는 문제가 있습니다.
디버깅 환경을 갖춘 후, 제대로된 분석이 필요합니다.
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
tileset marker's range can be calculated using startX variable in mouse
packages에 있는 파일들은 별도의 설정을 가집니다. 또한 빌드도 따로 해야 합니다. 따라서 분리를 하는 것이 좋아보입니다. 렌더링 부분은 react boiler plate를 yarn 워크스페이스로 추가하여 이동시켜 빌드하는 것이 좋아보입니다.
typedi
라는 라이브러리를 활용하여 의존성 주입을 관리하는 시스템을 추가해볼까 합니다.
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
We need to migrate a new pixi version.
try to below link:
뷰를 완전히 제거하였기 때문에 창 로직을 새로 구상해야 합니다.
이벤트를 많이 설정하면 이벤트 루프에 영향을 주므로 최상위 노드에만 설정하고 전파에 주의한다.
InitialEditor/packages/TilesetCanvas.ts
Lines 75 to 95 in cc8158c
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 접근 문제로 도저히 통합되지 않았으며 현재 패키지에서 통합할 수 있는 유일한 방법은 웹팩을 통해 별도의 스크립트로 빌드하여 마운트된 이후에 스크립트를 실행하는 것이었습니다.
하지만 이렇게 하면 리액트를 사용하는 목적을 상실하게 됩니다. 그러나 프로그램 동작이 최우선이므로 동작을 방해하지 않는 선에서 디커플링이 가능한 부분만 디커플링을 해나가도록 하겠습니다.
캔버스 부분은 사실상 디커플링이 불가능합니다.
스캐너(Scanner)기반의 저장이 아니라 Reflect.defineMetadata로 변경하여야 합니다.
스캐너 기반의 코드는 현 단계에서 불필요한 코드입니다.
The menu system like Windows Style will have to remove on the MacOS.
<img>
태그의 onload를 이용하여 스크립트를 인젝션하고 있는데 이는 보안에 좋지 않음.온라인 한글
이나 네이버 워드
에서도 사용하고 있다. 그러나 요즘에는 리액트처럼 동적으로 생성하는 방식이 인기이며 구글 문서나 성능을 요구하는 프로젝트에서는 사용되고 있지 않다.개발 환경을 변경 중에 있습니다.
https://github.com/biud436/InitialEditor/tree/next
더 나은 환경을 위해 뷰에서 리액트로 옮기는 작업을 하고 있습니다.
상태 관리는 리코일을 쓸 예정이며, 안타깝지만 제이쿼리도 완전 제거가 불가능하여 공존합니다.
현재는 UI 구현이 우선 목표입니다.
메뉴 중에 창을 항상 위에 고정하는 기능을 토글하는 메뉴를 추가해야 할 것 같습니다.
하지만 어려움이 있습니다.
전부 웹이기 떄문에
메뉴 또한 바닥부터 전부 웹이라 별도의 UI 메뉴 폼이 없으며, Font Awesome 등을 활용하여 �체크 박스를 표시하는 방법으로 가야 할 듯 합니다.
뷰에 익숙하지만 리액트로 바꾸게 된 계기는 단순합니다. 리액트는 많이 쓰기 때문이며 개발 환경 구성이 잘 되어있습니다. 뷰의 경우, 손수 구현을 해야 했으며 대체적으로 핫 리로드도 되지 않아 개발에 어려움이 많았습니다.
리액트 + 타입스크립트 포팅 결과 대체적으로 그리는 부분은 잘 동작하고 있습니다. 하지만 리액트로 바꾸면서 이전 브랜치의 커밋 히스토리를 가져올 수가 없는 상황입니다.
또한 아직 제이쿼리를 다 걷어내지 못하였습니다. 그리고 상단 메뉴는 기존에는 뷰 라우터 기반으로 라우팅을 했었는데,
리액트에서는 리코일 등을 통해 현재 띄워진 창의 이름을 리코일 상태 값으로 가져오고, 타입스크립트를 통해 동적으로 태그를 만들어낼 수 있으므로, 상태 값을 구분하여 현재 창에 맞는 창 태그를 띄워줘야 할 것으로 보여집니다.
대략적으로, 리코일 아톰에는 다음과 같은 값이 저장되어야 합니다.
Nextron에서 Electron + React + TS + Webpack로 변경한 결과, 기존에 타입스크립트로 작성된 일렉트론 시작점(엔트리 포인트)가 웹팩 빌드에 많은 오류가 발생하였으며 여러 시도 끝에 빌드까진 성공했지만 모듈 로드가 되지 않는 현상이 있습니다.
바퀴를 재발명하지 말고 기존의 코드 베이스를 electron-react-boilerplate 프로젝트에 맞춰야 잘 동작할 것으로 보여집니다.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.