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

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 및

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

---

전개

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

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

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

---

Vercel에 무료로 배포

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

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

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

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

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

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

---

최종 메모

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

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

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

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