Prisma 2, Chakra UI 및 React로 습관 추적기 구축

Prisma 2 : React App 에서 데이터베이스 상호 작용을 간소화합니다 Prisma 2 (이전 Prisma 2 Preview)는 데이터베이스 관리를 혁신하여 이전 모델로부터 상당한 업그레이드를 제공합니다. 별도의 Prisma 서버가 필요한 Prisma 1과 달리 Prisma 2는 백엔드에 직접 통합되어 라이브러리로 작동합니다. Memory Efficiency를 향상시키기 위해 Rust로 구축 된이 간소화 된 아키텍처는 데이터베이스 상호 작용을 상당히 단순화합니다.

Prisma 프레임 워크는 세 가지 주요 도구 인 로 구성됩니다 광자 : 유형-안전, 자동 생성 데이터베이스 클라이언트, 전통적인 orms를 효과적으로 대체합니다. 리프트 : 부드러운 데이터베이스 스키마 업데이트를 가능하게하는 선언적 마이그레이션 시스템. Prisma Studio :

데이터베이스 관리를위한 시각적 인터페이스를 제공하는 사용자 친화적 인 데이터베이스 IDE.

이 튜토리얼은 Prisma 2, Chakra UI (빠른 UI 개발)를 사용하여 습관 추적 앱 ( "줄무늬")을 구축하고 주 경영을위한 후크를 보여줍니다. 프론트 엔드는 GraphQL 상호 작용에 URQL을 사용합니다 프리즘의 핵심 장점 :

단순화 된 데이터베이스 액세스 :

는 복잡한 SQL 쿼리를 제거하고 응용 프로그램 내에서 데이터베이스 상호 작용을 단순화합니다. Database Agnosticism :

광범위한 코드 수정없이 데이터베이스 시스템 스위칭을 용이하게합니다. 현재 MySQL, Sqlite 및 PostgreSQL을 지원합니다

유형 안전 :
1. 유형-안전 데이터베이스 액세스, 코드 안정성 및 개발자 경험 향상에 자동 생성 된 Prisma 클라이언트를 제공합니다. 시각적 데이터 관리 : Prisma Studio는 데이터베이스 관리를위한 강력한 시각적 인터페이스를 제공합니다. 자동 마이그레이션 (선택 사항) : 리프트 선언 데이터 모델을 사용하여 데이터베이스 스키마 마이그레이션을 단순화합니다.
시작하기 :
2. 이 튜토리얼은 React 및 React 후크에 대한 기본적인 친숙성을 가정합니다. 원사는 패키지 관리에 사용됩니다. 다음 버전이 사용되었습니다 : 노드 v12.11.1
npm v6.11.3 npx v6.11.3 yarn v1.19.1 Prisma2 v2.0.0-preview016.2 반응 v16.11.0

프로젝트 설정 :

1. a streaks-app 디렉토리를 만듭니다 Prisma 2 프로젝트를 초기화하십시오 :
(또는 글로벌 CLI를 사용). JavaScript, GraphQL API 및 SQLITE를 선택하십시오 npx prisma2 init server 내에서 반응 프로젝트를 만듭니다. prisma2 프로젝트 구조는 다음과 같습니다 백엔드 개발 : 백엔드는 GraphQL과 Prisma 2를 사용합니다. 파일은 데이터 모델을 정의합니다 (예 : , 및 필드). 파일은 초기 데이터로 데이터베이스를 채 웁니다. 그래프 QL 서버는 및 streaks-app를 사용하여 설정됩니다. 프론트 엔드 개발 : npx create-react-app client 프론트 엔드는 스타일링에 Chakra UI를 사용하고 GraphQL 쿼리의 경우 URQL을 사용합니다. 구성 요소는 습관을 표시하고, 새로운 습관을 만들고, 습관을 삭제하며, 줄무늬를 증가시키기 위해 만들어집니다. 오류 처리 및 로딩 표시기는 차크라 UI 구성 요소를 사용하여 구현됩니다. create-react-app (백엔드 및 프론트 엔드 설정, 쿼리 및 돌연변이에 대한 자세한 코드 예제는 간결하게 생략되지만 원래 입력에 존재했습니다.) 결론 :

이 튜토리얼은 Prisma 2의 효율적인 데이터베이스 관리, Chakra UI의 간소화 된 UI 개발 및 React의 강력한 기능을 사용하여 강력한 습관 추적기 응용 프로그램을 구축하는 것을 보여줍니다. 결과 응용 프로그램은 유형 안전하고 유지 관리 가능하며 시각적으로 매력적입니다

(원래 입력의 FAQS 섹션은 이미 다루는 일반적인 관행과 개념의 반복이기 때문에 간결하게 생략됩니다.)

위 내용은 Prisma 2, Chakra UI 및 React로 습관 추적기 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!