Mui Toolpad 로 프로젝트를 배포해보기

 

Mui Toolpad

Mui Toolpad 란?

https://mui.com/toolpad/

chat gpt 피셜

MUI Toolpad는 개발자가 내부 애플리케이션을 더 빠르게 만들 수 있도록 설계된 자체 호스팅, 오픈 소스, 저코드(internal tool builder)입니다. MUI 컴포넌트를 활용하여 사전 제작된 UI 컴포넌트를 드래그 앤 드롭하여 데이터 소스를 연결하고 앱을 신속하게 출시할 수 있습니다. 이 플랫폼은 여러 데이터 소스를 결합하고 툴패드 내에서 직접 JavaScript를 작성하여 분석 대시보드, 관리 패널, 유틸리티 앱을 특히 쉽게 구축할 수 있도록 합니다. Toolpad는 속도와 효율성에 중점을 두고 UI 구축, 백엔드 로직 및 데이터 연결을 단순화함으로써 데이터 집약적인 React 앱을 더 빠르게 구축할 수 있도록 도와줍니다. Toolpad는 로컬 우선 접근 방식으로 설계되었으며 프로 코드 확장성을 지원하여 내장 기능만으로는 부족할 때 JavaScript를 작성할 수 있습니다. 이것은 개발자가 코드에 대한 제어를 포기하지 않고도 애플리케이션을 신속하게 구축할 수 있도록 돕는 것을 목표로 합니다. 모든 구성은 로컬 파일에 저장되어 필요에 따라 편집, 버전 관리 및 배포할 수 있습니다. Toolpad의 주요 기능으로는 캔버스에 사전 제작된 컴포넌트를 드래그 앤 드롭하여 사용자 인터페이스를 쉽게 만들 수 있는 드래그 앤 드롭 UI 빌더, REST API를 신속하게 통합할 수 있는 Postman과 유사한 쿼리 빌더 UI, 외부 React 컴포넌트를 가져올 수 있는 기능이 있습니다. Node.js 백엔드와 직접 통합을 지원하며, 추가 엔드포인트나 패치 로직 없이도 페이지에서 데이터를 사용할 수 있게 합니다. 중요한 점은, Toolpad는 모든 것을 로컬에서 실행하고 구성을 시스템에 저장하고 관리하도록 함으로써 코드를 소유하도록 권장합니다

 

MUI Toolpad는 개발자가 데이터 집약적인 React 앱을 더 빠르게 구축할 수 있도록 돕는 자체 호스팅, 오픈 소스, 로우코드 플랫폼이다.

로우코드 툴을 사용한 이유

나는 BE 개발자이다. 유정 인터페이스가 필요한 프로젝트를 하고싶은데 FE 영역에 대해 깊게알지 못하고, 내가 구현하고자 하는 기능을 만드는데 시간을 쏟아야하는데 ui 에 쏟을 시간이 아까울 것 같았다.

그래서 ui 는 내가만든 기능을 수행할 수 있는 최소한의 틀만 만들고 비즈니스로직에 좀 더 집중하고 싶었다.

 

로우코드 툴로 Mui 를 선택한 이유

• 무료티어가 있다.
• 배포가 쉽다.
• 오픈소스이고, 코드를 자유롭게 검토할 수 있다.
• Node.js 패키지로 제공되어 로컬에서 개발환경을 세팅하기 쉽다.
• 버전관리를 git 을 통해 빠르고 쉽게 할 수 있다.

---

 

프로젝트 개발 과정

( converters 는 내 프로젝트 이름 )

npx create-toolpad-app converters-web

 

 

로우코드툴은 타 툴과 비슷하게 사용하면 됐다.

마크다운으로 페이지 컨텐츠를 조작할 수 있었고, 커스텀 컴포넌트를 만들어 헤더를 개발했었다.

 

 

Actions 에서 Js 함수를 추가하고 ide 에서 해당 Js 함수를 직접 작성할 수 있고. 

 

convert 버튼 클릭 시 직접 만든 함수를 실행하도록 하고, 결과값을 함수의 결과값으로 연결하여 다음과 같이 만들 수 있었다.

 

 

쨔란.

 

이제 배포를 해야하는데 배포는 훨씬 쉽다.

일단 돈을 아끼기 위해서 무료로 배포를 할 수 있고, Mui 의 배포예시 문서에서도 사용하는 Render 라는 서비스를 사용했다.

 

https://render.com/

Cloud Application Hosting for Developers | Render

 

 

음.. 난 이미 배포를 했으므로 스크린샷을 찍기가 애매하다. 그러므로 배포 방법이 담긴 비법서를 남기고 다음단계로..

 

https://mui.com/toolpad/how-to-guides/render-deploy/

Deploy to Render - MUI Toolpad

 

배포를 했다면 도메인을 연결하는것이 인지상정.

 

 

대시보드 - 프로젝트 클릭 - Settings

커스텀 도메인 추가를 누르고 추가하라는 DNS 설정을 추가해주면 된다.

 

나는 CF 를 사용했기때문에 다음과 같이 설정하였다.

 

 

 

후기

무료로 로우코드 개발하고, 무료로 배포하였으니 기분이 너무 좋았다.

mui toolpad 를 사용해서 개발해보니 아직 프로덕션 레벨까진 개발하긴 어렵겠다고 느꼈다.

아직 베타이니 점점 더 많은 기능이 업데이트 되도록 기대한다.