inutes에서 프로젝트에 대한 관리자 패널 만들기
- DDD원래의
- 2024-12-22 03:38:10485검색
Kottster는 개발자가 관리 패널을 빠르게 구축하고 배포하는 데 도움이 되는 무료 도구입니다. 단 5분 만에 모든 기능을 갖춘 관리 패널을 생성하여 클라우드에 배포하고 팀과 공유할 수 있습니다.
Kottster로 앱을 빌드하면 React 및 Node.js 환경을 사용하여 풀 스택 앱을 만들기 위한 웹 프레임워크인 Remix에서 실행됩니다.
이 기사에서는 Kottster 앱을 만들고, 데이터베이스에 연결하고, 특정 테이블에 대한 페이지를 생성하고, 어디서나 호스팅하는 방법을 보여 드리겠습니다.
프로젝트 만들기
시작하기 전에 Node.js(v20 이상)가 컴퓨터에 설치되어 있는지 확인하세요.
새 프로젝트를 만들려면 다음 명령을 실행하세요.
npx @kottster/cli new
프로젝트 이름, JavaScript를 사용할지 TypeScript를 사용할지, 사용할 패키지 관리자를 묻는 메시지가 표시됩니다. 그 후에는 시작하는 데 필요한 모든 것이 포함된 새 프로젝트 폴더가 생성됩니다.
로컬에서 앱을 시작하려면 생성된 폴더를 열고 npm run dev:
를 실행하세요.
앱이 로드되면 로그인 페이지가 표시됩니다. Kottster에 가입하려면 “계정 만들기”를 클릭하세요. 가입 후 앱 이름을 입력하고 “앱 만들기”를 클릭하세요. 그러면 앱이 생성되고 로그인됩니다.
모든 것이 설정되면 '시작하기' 페이지가 표시됩니다:
데이터베이스 연결
시작하기 페이지에서 데이터베이스 유형을 선택하고 연결 세부 정보를 입력한 후 “연결”을 클릭하세요.
이렇게 하면 필요한 패키지가 설치되고 프로젝트 폴더의 데이터베이스에 연결된 데이터 소스가 있는 파일이 생성됩니다.
앱이 자체 호스팅되면 자격 증명은 항상 비공개로 유지되며 Kottster 도구는 데이터베이스에 액세스할 수 없습니다.
페이지 생성
데이터베이스를 연결하면 "페이지 생성" 탭이 표시됩니다:
이 페이지는 데이터베이스 테이블의 데이터를 보거나 관리하는 페이지를 빠르게 만드는 데 도움이 됩니다.
'삽입 허용' 또는 '업데이트 허용'을 활성화하면 기록 추가 및 업데이트 양식을 사용할 수 있습니다. "삭제 허용"을 활성화하면 기록 삭제 기능이 추가됩니다.
선택을 완료한 후 "페이지 생성"을 클릭하세요. 이 도구는 자동으로 페이지 파일을 생성하고 사이드바 메뉴를 새 항목으로 업데이트합니다.
페이지 작동 방식
관리자 패널의 각 페이지는 app/routes 디렉토리에 있습니다. 이러한 페이지는 기본적으로 UI와 API 역할을 모두 수행하는 Remix 경로이며 원하는 대로 사용자 정의할 수 있습니다.
Kottster 앱의 각 페이지 파일은 페이지 자체를 나타내는 React 구성 요소
특정 데이터베이스 테이블에 대한 페이지를 생성하면 다음이 포함됩니다.
- createTableRpc 함수를 호출하는 Remix 액션입니다. 이 함수는 테이블의 동작을 제어하고 해당 기능을 활성화합니다.
- <테이블> 액션에 정의된 createTableRpc 설정과 밀접하게 연결된 구성 요소입니다.
"users" 테이블에 대해 생성된 페이지의 예:
npx @kottster/cli new
createTableRpc 및
