지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > inutes에서 프로젝트에 대한 관리자 패널 만들기

inutes에서 프로젝트에 대한 관리자 패널 만들기

DDD
풀어 주다： 2024-12-22 03:38:10
원래의
530명이 탐색했습니다.

Kottster는 개발자가 관리 패널을 빠르게 구축하고 배포하는 데 도움이 되는 무료 도구입니다. 단 5분 만에 모든 기능을 갖춘 관리 패널을 생성하여 클라우드에 배포하고 팀과 공유할 수 있습니다.

Kottster로 앱을 빌드하면 React 및 Node.js 환경을 사용하여 풀 스택 앱을 만들기 위한 웹 프레임워크인 Remix에서 실행됩니다.

이 기사에서는 Kottster 앱을 만들고, 데이터베이스에 연결하고, 특정 테이블에 대한 페이지를 생성하고, 어디서나 호스팅하는 방법을 보여 드리겠습니다.

프로젝트 만들기

시작하기 전에 Node.js(v20 이상)가 컴퓨터에 설치되어 있는지 확인하세요.

새 프로젝트를 만들려면 다음 명령을 실행하세요.

npx @kottster/cli new
로그인 후 복사
로그인 후 복사

프로젝트 이름, JavaScript를 사용할지 TypeScript를 사용할지, 사용할 패키지 관리자를 묻는 메시지가 표시됩니다. 그 후에는 시작하는 데 필요한 모든 것이 포함된 새 프로젝트 폴더가 생성됩니다.

Create an Admin Panel for your project in inutes

로컬에서 앱을 시작하려면 생성된 폴더를 열고 npm run dev:

를 실행하세요.

Create an Admin Panel for your project in inutes

앱이 로드되면 로그인 페이지가 표시됩니다. Kottster에 가입하려면 “계정 만들기”를 클릭하세요. 가입 후 앱 이름을 입력하고 “앱 만들기”를 클릭하세요. 그러면 앱이 생성되고 로그인됩니다.

모든 것이 설정되면 '시작하기' 페이지가 표시됩니다:

Create an Admin Panel for your project in inutes

데이터베이스 연결

시작하기 페이지에서 데이터베이스 유형을 선택하고 연결 세부 정보를 입력한 후 “연결”을 클릭하세요.

이렇게 하면 필요한 패키지가 설치되고 프로젝트 폴더의 데이터베이스에 연결된 데이터 소스가 있는 파일이 생성됩니다.

앱이 자체 호스팅되면 자격 증명은 항상 비공개로 유지되며 Kottster 도구는 데이터베이스에 액세스할 수 없습니다.

페이지 생성

데이터베이스를 연결하면 "페이지 생성" 탭이 표시됩니다:

Create an Admin Panel for your project in inutes

이 페이지는 데이터베이스 테이블의 데이터를 보거나 관리하는 페이지를 빠르게 만드는 데 도움이 됩니다.

'삽입 허용' 또는 '업데이트 허용'을 활성화하면 기록 추가 및 업데이트 양식을 사용할 수 있습니다. "삭제 허용"을 활성화하면 기록 삭제 기능이 추가됩니다.

선택을 완료한 후 "페이지 생성"을 클릭하세요. 이 도구는 자동으로 페이지 파일을 생성하고 사이드바 메뉴를 새 항목으로 업데이트합니다.

페이지 작동 방식

관리자 패널의 각 페이지는 app/routes 디렉토리에 있습니다. 이러한 페이지는 기본적으로 UI와 API 역할을 모두 수행하는 Remix 경로이며 원하는 대로 사용자 정의할 수 있습니다.

Kottster 앱의 각 페이지 파일은 페이지 자체를 나타내는 React 구성 요소 를 내보내야 합니다. 이 구성 요소 안에는 모든 콘텐츠를 포함할 수 있습니다.

특정 데이터베이스 테이블에 대한 페이지를 생성하면 다음이 포함됩니다.

  • createTableRpc 함수를 호출하는 Remix 액션입니다. 이 함수는 테이블의 동작을 제어하고 해당 기능을 활성화합니다.
  • <테이블> 액션에 정의된 createTableRpc 설정과 밀접하게 연결된 구성 요소입니다.

"users" 테이블에 대해 생성된 페이지의 예:

npx @kottster/cli new
로그인 후 복사
로그인 후 복사

createTableRpc 및

우리 문서의 구성 요소. 또한 공식 문서에서 Remix와 Fullstack 데이터 흐름에 대해 자세히 알아보는 것이 좋습니다.

전개

준비가 되면 Kottster 앱을 배포하여 온라인에서 사용할 수 있습니다. 배포하기 전에 앱이 올바르게 구축되었으며 오류가 없는지 확인하세요.

이렇게 하려면 npm run build를 실행하여 로컬에서 앱을 빌드하세요.

Create an Admin Panel for your project in inutes

오류가 없으면 앱을 출시할 준비가 된 것입니다. 자체 호스팅되므로 원하는 곳에 배포할 수 있습니다. 여기에서 배포 옵션에 대해 자세히 알아보세요.

Vercel에 무료로 배포

이 기사에서는 가장 인기 있는 무료 옵션 중 하나인 Vercel에 Kottster 앱 배포에 대해 설명하겠습니다.

아직 계정이 없다면 vercel.com에서 계정을 등록하세요. 로그인한 후 "새 프로젝트"를 클릭하고 빌드한 앱이 포함된 저장소를 연결하세요.

저장소를 선택한 후 "배포"를 클릭하세요. 잠시 후 귀하의 앱이 무료 Vercel 도메인에 게시됩니다.

Create an Admin Panel for your project in inutes

앱이 활성화되면 앱을 열고 계정에 로그인할 수 있습니다.

그렇습니다! 이제 관리자 패널을 온라인으로 사용할 수 있습니다.

이제 팀과 공유할 수 있습니다. 이렇게 하려면 앱 왼쪽 사이드바에서 "액세스 관리"를 클릭하세요. 그러면 다른 사용자의 이메일 주소를 입력하여 액세스를 설정할 수 있는 페이지가 열립니다.

최종 메모

Kottster 웹사이트 kottster.app에서 Kottster에 대해 자세히 알아볼 수 있습니다

질문이 있거나 도움이 필요한 경우 설명서를 확인하거나 GitHub 저장소를 방문하거나 Discord 커뮤니티에 가입하여 질문하고 피드백을 공유하세요.

읽어주셔서 감사합니다. 프로젝트에 행운이 있기를!

위 내용은 inutes에서 프로젝트에 대한 관리자 패널 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：dev.to
이전 기사：JavaScript의 화살표 함수는 `this` 바인딩을 어떻게 처리하며 해결 방법은 무엇입니까? 다음 기사：JavaScript에서 시간대 간 날짜를 쉽게 변환하려면 어떻게 해야 합니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2439
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2571
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
2175
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
2051
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
2153
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿