RADZIONKIT : 강력한 풀 스택 Monorepo 프로젝트를위한 빠른 설정
Radzionkit은 복잡한 설정의 스트레스없이 프로젝트를 시작하려는 개발자를위한 최고의 솔루션입니다. 포괄적 인 Monorepo로 설계된이 제품은 강력한 UI 라이브러리에서 간소화 된 백엔드 서비스에 이르기까지 풀 스택 개발을위한 통합 도구를 제공합니다. Radzionkit을 사용하면 새로운 프로젝트를 시작하고 개발 프로세스 중에 귀중한 시간을 절약하여 원활하고 효율적이며 번거롭지 않은 코딩 경험을 보장합니다. 코딩 문제를 코딩 승리로 변환하는 파트너 인 Radzionkit의 단순성과 효율성의 힘을 수용하십시오.
Monorepo 개요 : Radzionkit의 다양한 패키지 생태계 내부
Radzionkit은 원사 작업 공간을 활용하여 Monorepo 설정을 간소화하여 코드를 lib 와 product 두 가지 1 차 디렉토리로 구성합니다. lib 폴더에는 @lib/utils 또는 @lib/ui 와 같은 일반적인 코드 패키지가 있으며 프로젝트별로 프로젝트별로 프로젝트별로를 운반하지 않고 모든 프로젝트에 쉽게 휴대 할 수 있도록 설계되었습니다. 반면에 product Directory에는 @lib 패키지를 프로젝트의 고유 한 요구에 맞게 통합하고 조정하는 방법을 보여주는 청사진 역할을하는 @product/api 또는 @product/ui-demo 와 같은 예제 구현이 있습니다. 이 사려 깊은 아키텍처는 개발 프로세스를 간소화 할뿐만 아니라 코드의 재사용 성을 향상시켜 프로젝트가 커짐에 따라 프로젝트를 확장하고 수정할 수 없습니다.
lib 패키지
- @lib/utils- 일반적인 작업을위한 유틸리티 기능 모음.
- @lib/ui- 구성 요소, 후크 및 util이있는 다목적 UI 라이브러리.
- @lib/dynamodb- aws dynamodb 작업을위한 유틸리티.
- @lib/dnd- 드래그 앤 드롭 기능을위한 구성 요소 및 유틸리티.
- @lib/codegen- TypeScript 및 JSON 파일 용 코드 생성 유틸리티.
- @lib/국가 - 국가 관련 데이터를 처리하기위한 유형 및 유틸리티.
- @lib/lambda- AWS Lambda 기능으로 작업하기위한 유틸리티.
- @Lib/Analytics -UI- 진폭 분석을 React 애플리케이션에 통합하는 구성 요소.
- @lib/auth- 인증 세션 및 Oauth 제공 업체 용 유형.
- @lib/next -ui- Next.js 애플리케이션을위한 구성 요소 및 유틸리티.
- @lib/subscription -ui- 구독 결제에 대한 구성 요소.
- @lib/구독 - 구독 결제 유형.
- @lib/chain- Web3 및 블록 체인 작업을위한 유틸리티.
- @lib/Chain -Ui- Web3 응용 프로그램의 구성 요소.
제품 패키지
- @Product/App- 다음 .js 응용 프로그램 템플릿.
- @Product/API- 사용자 인증이있는 보일러 플레이트 API.
- @product/api -interface- API와 상호 작용하기위한 인터페이스 및 유형.
- @Product/API -UI- API 상호 작용을위한 후크 및 구성 요소.
- @Product/Config- 제품을위한 공유 구성 패키지.
- @Product/DB- 데이터베이스 관리 및 유틸리티.
- @제품/이메일 - 이메일 관련 서비스 및 유틸리티.
- @product/email -forwarder- 이메일 전달을위한 람다 함수.
- @제품/엔티티 - 제품의 핵심 엔티티 및 모델.
- @product/entities -utils- 엔티티와의 작업을위한 유틸리티 기능.
- @제품/언어 - 언어 지원 및 현지화 유틸리티.
- @Product/Languages-Next-UI -Next.js UI 언어 처리를위한 구성 요소.
- @product/ui -demo -demo ui showasing product 구성 요소.
Radzionkit을 시작하기 : 새 프로젝트 시작
Radzionkit Github 템플릿을 사용하여 프로젝트를 시작하십시오. 필요하지 않은 패키지를 제거하고 @product 아래의 패키지를 앱의 시작점으로 사용할 수 있습니다. 이름 지정 컨벤션이 재사용 가능한 패키지 ( @lib )를 프로젝트 별 코드 ( @product )와 분리하므로 패키지 이름을 바꿀 필요가 없습니다. 템플릿을 복제 한 후에는 yarn 사용하여 종속성을 설치하면 설정이 준비됩니다.
종속성 및 버전 관리
최신 버전의 원사로 업그레이드하려면 다음 명령을 실행하십시오.
모든 종속성을 최신 버전으로 업그레이드하려면 다음 명령을 실행하십시오.
yarn workspaces foreach --all exec yarn up " * "
Radzionkit을 사용한 예
- Radzion의 이력서 : Web3 프론트 엔드 개발자 이력서. GitHub에서 사용할 수있는 소스 코드.
- Pentafret : 기타 음악 이론 도구가있는 웹 사이트. GitHub에서 사용할 수있는 소스 코드.
- 스토리지 : 분산 스토리지 네트워크에 파일을 저장합니다. GitHub에서 사용할 수있는 소스 코드
- 암호화 : cryptocurrency 가격 변동에 대한 경고를받습니다. GitHub에서 사용할 수있는 소스 코드
- GeorgianCitizen : 시험 준비 앱. GitHub에서 사용할 수있는 소스 코드.
- 증가기 : 원격 작업자를 위해 설계된 생산성 툴킷.
Radzionkit Cookbook : 실용적인 YouTube 자습서로 개발 단순화
Radzionkit에 대한 경험을 극대화하기 위해 우리는 일상적인 개발 문제를 해결하기 위해 툴킷의 실제 응용 프로그램을 보여주기 위해 설계된 일련의 YouTube 튜토리얼 인 Radzionkit Cookbook을 편집했습니다. 이 튜토리얼은 초보자부터 숙련 된 개발자에 이르기까지 모든 기술 수준을 수용하고 초기 설정에서 고급 통합에 이르기까지 다양한 주제를 다룹니다. Radzionkit Cookbook 비디오는 귀중한 리소스로, 단계별 지침, 실용적인 팁 및 전문가 통찰력을 제공하며, 개발 프로젝트에서 효율적이고 우아한 솔루션을 위해 Radzionkit의 전체 힘을 활용하는 데 도움이되는 것을 목표로합니다.
- 자동 구동 및 Next.js를 사용하여 분산 파일 관리자 생성
- React & TypeScript로 단일 페이지 이력서를 구축하십시오 (PDF로 내보낼 수 있습니다!)
- 제품의 효과적인 "What 's New"기능을 만드는 방법
- DND-KIT : Kanban Board Tutorial을 사용한 마스터 드래그 드롭
- TypeScript 및 AWS Lambda를 사용하여 비활성 사용자 데이터를 효율적으로 삭제
- 날짜 선택을위한 React 및 TypeScript로 dayInput 구성 요소 만들기
- TypeScript 및 Floating-UI와의 반응에서 사용자 정의 드롭 다운 구성 요소 구현
- Next.js & Amplitude : 효과적인 분석 통합 가이드
- React & Nodejs를 사용하여 커뮤니티 중심 기능 제안 시스템을 구축하는 방법
- AWS에서 손쉬운 이메일 설정 : Lambda 및 Terraform으로 시간과 비용을 절약
- React 및 TypeScript를 사용하여 대화식 시간 추적 보고서 작성
- React에서 효과적인 온 보딩 흐름을 만드는 방법 : 단계별 가이드
- React에서 드래그 앤 드롭 TODO 목록 만들기 : 완전한 자습서
- 처음부터 반응선 차트 구성 요소 생성
- TypeScript Monorepo에서 웹 사이트 방문 페이지 구축 : 개발자 가이드
- TypeScript 백엔드 개발 단순화 : 포괄적 인 가이드
- 외부 라이브러리가없는 정적 Nextjs 응용 프로그램에서 국제화 구축
- Nextjs 메타 태그 가이드 : SEO & PWA 아이콘
- React 및 TypeScript로 재사용 가능한 콤보 박스를 만듭니다
- 동적 반응 구성 요소를위한 자동 생성형 타이프 스크립트 : 깊은 다이빙
- Next.js & node.js로 구독 결제 시스템 구축
- React에서 반응적이고 최소한의 모달 구성 요소를 만듭니다
- NEXTJS + NODEJS 응용 프로그램에 대한 Magic Link 이메일 인증
- NextJS를 사용하여 URL 쿼리 문자열에서 반응 상태 유지
- Nextjs 및 Nodejs와 함께 Oauth 2 인증 (Google & Facebook)의 전체 스택 구현
- Nextjs에서 다른 페이지에 대해 다른 레이아웃을 만듭니다
- UsePersistentState 및 로컬 스토리지와 효율적인 반응 상태 관리
- React 프로젝트에 유용한 CSS Utils- 실용 가이드
- TypeScript 프로젝트의 필수 유틸리티 및 도우미 기능
- 원사 작업 공간, Nextjs, 스타일 구성 요소, 더 예쁘다
- NextJS 정적 앱을 AWS S3 및 CloudFront에 배포
- React, Styled Components 및 HSLA를 사용하여 어두운 및 조명 모드 용 색상 팔레트 설계
- React 용 HSLA 색 형식 : TypeScript, 스타일 구성 요소, 변형, 색상 생성기, 색상 피커
- 고급 반응 버튼 구성 요소 자습서
- 플로팅 UI를 사용하여 툴팁 반응 구성 요소를 화살표로 만드는 방법
- 클릭 보드에 텍스트를 클릭 반응 구성 요소로 복사하십시오
- 팝 오버 메뉴를 부동 UI로 반응하는 방법
- 이모티콘 입력 메뉴를 만드는 방법 이모티콘 마트와 반응 구성 요소
- 호버 효과를 반응하여 컨테이너 오버 플로우로 만드는 방법
- React & Style 범위 입력으로 슬라이더 구성 요소를 만드는 방법
- 다목적 반응 구성 요소를 구축합니다 : 카드 및 패널
- 스택 구성 요소가있는 효율적인 CSS 레이아웃
- React-hook-form usefieldArray가있는 동적 형태
- React Query가있는 무한 스크롤 구성 요소
- React 로의 깊은 다이빙 : useElementsize 후크 및 관찰 크기 조정