kitsu web 다운로드 - kitsu web 소스 코드 다운로드

kitsu web

웹사이트 데이터

1.0.0

다운로드

키츠 웹 앱

이것은 우리의 클라이언트 저장소입니다. kitsu에 대한 React.js 응용 프로그램이 포함되어 있습니다.
도구, 모바일, 서버 및 API 문서 리포지토리를 확인하십시오.

기여

당신이 이것을 읽고 있다는 사실은 아마도 당신이 Kitsu 웹 응용 프로그램에 기여하는 데 관심이 있다는 것을 의미 할 것입니다. 그렇다면 환영합니다! 시작하기가 매우 쉽고 우리는 당신을 도와 드리겠습니다. 궁금한 점이 있으시면 #Dev 채널의 불화에 대해 주저하지 마십시오!

풀 요청을하기 전에 StyleGuide를 읽고 미래의 개발자를 위해 코드베이스를 깨끗하고 일관성있게 유지하십시오.

달리기

상당히 현대적인 node.js 버전이 필요합니다. 확실하지 않은 경우 활성 LT가 최상의 옵션 일 것입니다. 우리의 배포는 활성 LTS를 사용하지만 현재 버전에서 모든 것이 원활하게 실행되도록 노력합니다.

노드가 있으면 다음을 실행하십시오.

npm install (설치 종속성)
npm run dev (기본 포트 3000)

이제 http://localhost:3000 방문하면 Kitsu 응용 프로그램이 표시됩니다!

기본적으로 개발 모드에서 이것은 API의 staging.kitsu.io (사전 생산 환경)에 연결되므로 매주 모든 것이 지워질 것입니다. VITE_API_HOST=https://kitsu.io/ .env 파일로 설정하여 필요한 경우 생산에 연결하도록 이것을 변경할 수 있습니다. 이것은 일반적으로 필요하지 않지만 스테이징에서 완전히 작동하지 않는 것들이 있습니다.
앞으로 우리는 이것을 Kitsu-Tools Dev 환경에 더 잘 통합 할 계획입니다.

코드베이스 탐색

기본 프로젝트 구조는 과거에 React and Vite를 사용한 대부분의 개발자에게 친숙해야하지만 Kitsu는 큰 응용 프로그램이며 익숙한 것보다 더 많은 구조를 가지고 있습니다.

진입 점

Vite는 "진입 점"에서 시작하는 응용 프로그램을 컴파일합니다. 우리의 경우에는 3 개의 "빌드 대상"에 걸쳐 4 개가 있습니다.

BUILD_TARGET=client - 메인 키츠 (v4) 웹 앱
- index.html - Kitsu 웹 응용 프로그램의 주요 진입 점
- oauth2-callback.html -OAUTH2 제공 업체 (대부분 나노 아우스 대의원)의 콜백 핸들러의 진입 점.
BUILD_TARGET=server -Kitsu 웹 앱의 서버 측 렌더링 버전
- server.js - Kitsu 웹 앱의 주요 진입 점
BUILD_TARGET=library - 마이그레이션 중 V3 Ember 앱에 노출되는 Kitsu (V4) 웹 앱의 구성 요소 라이브러리.
- src/entry-ember.tsx -Ember 응용 프로그램에서 액세스 할 수있는 내보내기

응용 프로그램 소스 코드

src/assets/ - 아이콘, 일러스트레이션 및 애플리케이션에서 수입 한 애니메이션과 같은 정적 자산. 이들은 출력 디렉토리에 복사 한 것이 아니라 가져와야하며 다양한 플러그인으로 컴파일하는 동안 처리 할 수 있습니다.
src/components/ - 공통, 재사용 가능한 구성 요소
src/pages/ - 구성 요소 전체 페이지를 렌더링합니다
src/layouts/ - 재사용 가능한 페이지 구조를 제공하는 구성 요소
src/contexts/ - 구성 요소 간 상태를 공유하기위한 컨텍스트를 반응합니다
src/initializers/ - 앱 부팅 중에 실행되는 명령 코드 (가능한 경우 피하십시오. 앱 구성 요소에서 후크를 선호하십시오)
src/constants/config.ts - 런타임에 응용 프로그램에 구성을 노출시킵니다
src/graphql/ - 생성 된 스키마 유형, 스칼라 및 URQL 교환과 같은 GraphQL 지원 코드.
src/hooks/ - 응용 프로그램의 맞춤형 반응 후크
src/locales/ -우리가 지원하는 모든 로케일에 대한 데이터 (번역, 날짜 FN 로케일 등)
src/errors/ - 모든 오류 서브 클래스
src/styles/ -응용 프로그램 전체 스타일 (구성 요소에만 국한되지 않음). 대부분 구성 요소 스타일에 사용되는 변수 형태입니다.

주요 라이브러리

언어 : TypeScript
프레임 워크 : React (우리는 어느 시점에서 preact로 전환 할 수 있습니다)
Bundler : Vite
테스트 : Vitest
라우팅 : 라우터 v6에 반응합니다
GraphQL 클라이언트 : GraphCache가 활성화 된 URQL
스타일 : PostCS에 의해 처리 된 CSS 모듈
국제화/현지화 : React Intl
시간 : 날짜 -FN

일반적인 개발 워크 플로우

Codegen 실행

npm run codegen

.gql 파일을 변경하거나 새 번역 키를 추가하면 npm run codegen 실행하여 올바르게 작동하도록해야합니다. GraphQL CodeGen은 모든 쿼리에 대한 TypeScript 파일을 생성하고 Intl Codgen은 구성 요소에서 모든 번역 키를 추출합니다.

런닝 스토리 북

npm run storybook

우리는 스토리 북을 사용하여 구성 요소를 문서화합니다. 추가 한 새로운 구성 요소를 문서화하십시오.

실행 테스트

npm run test:unit # Runs unit tests (vitest)
npm run test:unit:watch # Opens vitest in watch mode
npm run test:e2e # Runs e2e tests (cypress)

우리는 두 개의 테스트 스위트가 있습니다.

단위 테스트
- 바이스트, 농지 호환 테스트 프레임 워크에 의해 구동됩니다
- 매우 빠릅니다
- 가짜 dom에서 실행됩니다 (실제 브라우저가 아님)
- .test.ts(x) 파일의 코드에 인접한 저장
엔드 투 엔드 테스트
- 헤드리스 브라우저 테스트 프레임 워크 인 Cypress로 구동됩니다
- 느리게
- 실제 브라우저 (Chrome, Firefox 등)에서 실행됩니다.
- cypress/ 에 저장

대부분의 경우 Vitest로 코드를 테스트하는 것이 좋습니다. 훨씬 더 좋은 경험이며 더 빨리 실행됩니다. 즉, 때로는 End-to-End에서 전체 워크 플로를 테스트해야합니다.