렉스 체스란?

반응형

웹 개발 및 오픈 소스 체스의 세계에 오신 것을 환영합니다!

렉스 체스(Redux Chess)는 체스랩이 GitHub에서 개발한 임베디드형 체스 보드이다. 이것은 모든 사람이 환영받는 포괄적인 오픈 소스 프로젝트입니다. 관례에 의한 코딩 덕분에 새로운 기능을 추가하기 쉽지만, 기여자들은 또한 무언가를 부수고 실수로부터 배우도록 장려된다.

Redux Chess는 사용이 간편한 체스 보드로서 React 응용 프로그램에 다음과 같은 다양한 기능을 제공합니다.

• 체스 게임 분석
• 추가 스터디를 위해 FEN 문자열 및 PGN 이동 텍스트 로드
• 이미지 다운로드
• 친구를 초대하여 체스 두기
• 경험적 접근 사진 찍기

 

그리고 더 많이!

경험적 접근 사진은 다음과 같은 몇 가지 평가 기능을 통해 보드의 진행 상황을 보여줍니다. 재료, 중심, 연결성, 공간, 압력, 왕 안전 등.

체스 게임은 균형으로 짜여질 수 있다는 것을 알고 있었나요? 화이트의 경우 +1이 최상의 평가이고 블랙의 경우 -1이 최고의 평가이며, 0과 같은 평가 기능은 오프셋 또는 균형을 의미합니다.

 

이 체스 플러그인에 대한 매력적인 사실은 Redux라고 불리는 디자인 패턴을 사용하여 작성되었기 때문에 큰 힘을 들이지 않고 확장할 수 있다는 것입니다.

아시다시피, Redux는 잘 알려진 소프트웨어 설계 패턴인 게시-구독(또는 펍-서브) 패턴에 크게 의존하는 응용 프로그램 상태를 관리하기 위한 오픈 소스 자바스크립트 라이브러리입니다. 또한 앱의 데이터를 중앙 집중화하기 위해 싱글톤 스토어가 구현됩니다. 이러한 방식으로 UI 구성 요소에서 데이터를 분리할 수 있습니다.

Redux Chess는 가능한 한 가벼운 체스판을 의미하며 NPM 레지스트리에서 NPM 패키지로 설치할 수 있다.

$ npm i @chesslablab/redux-chess

포괄적인 오픈 소스 커뮤니티입니다.

 

Redux Chess는 GitHub의 ChessLab 조직에 의해 개발되고 있습니다. 이것은 웹 개발과 체스를 배우고자 하는 모든 사람들이 환영하는 포괄적인 오픈 소스 커뮤니티입니다.

현재로서는 이러한 저장소에서의 기여가 기대됩니다.

• /redux-ches는 체스 서버에 연결된 리액트 체스 보드입니다.
• /php-chess는 PHP를 위한 체스 라이브러리이다.
• /ches-server는 PHP Chess를 사용하는 체스 서버입니다.
• /data는 데이터베이스를 관리하고 모델을 교육하기 위한 도구를 제공합니다.

그나저나, 이 체스랩 저장소는 핵토버페스트 2021에 참가했으니, 당신의 첫 번째 홍보에 겁먹지 마세요. 기고자들은 물건들을 부수고 실수로부터 배우도록 격려 받는다.

멋진 것을 만들어 봅시다!

 

기여 지침을 읽어보십시오.

ChessLab 저장소에 기여하려면 기여 지침을 먼저 읽어보십시오. 각 리포지토리에는 그 방법을 설명하는 README.md 파일이 있습니다. 간단히 말해서, 미결 이슈를 살펴보고 다음 이슈에 대해 이 의견을 남기십시오.

아니면, 자유롭게 새로운 것을 키우세요.

새 분기의 명명 규칙은 다음과 같습니다.

issue/n-the-title-of-the-issue

 

예:

issue/176-display-files-and-ranks-on-the-chessboard

따라서 마스터에서 새 분기를 체크아웃할 경우 다음과 같이 입력합니다.

$ git checkout -b issue/176-display-files-and-ranks-on-the-chessboard

디렉토리 구조

 

저는 Redux가 디자인 패턴이자 자바스크립트 라이브러리라고 해도 괜찮다고 생각합니다. 그렇기 때문에 Redux Chess의 폴더 구조는 큰 영향을 받습니다.

└── src
    ├── __tests__
        ├── actions
            |   ├── historyActions.js
    |   └── ...
        ├── components
            |   ├── Board.js
    |   └── ...
        ├── constants
            |   ├── alertActionTypes.js
    |   └── ...
        ├── listeners
            |   ├── wsMssgListener.js
    |   └── ...
        ├── reducers
            |   ├── alertReducer.js
    |   └── ...
        ├── utils
            |   ├── Ascii.js
    |   └── ...
        ├── index.css
    ├── index.js
    ├── setupTests.js
    └── store.js

이미 리액트 및 리덕스의 기본이 편안하다고 느낀다면, 코드베이스에 새로운 기능을 추가하는 것은 채택된 여러 가지 규칙 덕분에 복사하여 붙여넣기 프로세스가 된다.

관례에 따라 코드화합시다.

위키피디아에 따르면:

 

예를 들어, 모든 UI 대화 상자는 정확히 동일한 방식으로 구현됩니다. React 구성요소 파일은 파일 이름이 "Dialog"라는 단어와 접미사가 붙은 src/구성요소/Dialog에 저장됩니다.

└── src
    ├── ...
        ├── components
            |   └── Dialog
                |       ├── CreateInviteCodeDialog.js
    |       ├── DrawAcceptDialog.js
    |       ├── DrawOfferDialog.js
    |       ├── EnterInviteCodeDialog.js
    |       ├── FenDialog.js
    |       ├── HeuristicPictureDialog.js
    |       ├── LoadFenDialog.js
    |       ├── LoadPgnDialog.js
    |       ├── PgnDialog.js
    |       ├── RematchAcceptDialog.js
    |       ├── RematchOfferDialog.js
    |       ├── ResignAcceptDialog.js
    |       ├── TakebackAcceptDialog.js
    |       └── TakebackOfferDialog.js
    ├── ...
    ```

    src/components/Buttons.js의 기본 탐색 버튼과 UI 대화 상자는 동일한 명명 규칙을 따라 저장소로 작업을 전송합니다. 대화상자 작업 이름은 의미 있는 파일 이름이 DialogAction이라는 단어로 접미된 파일의 src/constant에 저장됩니다.다음 예제와 같이 유형 및 모든 작업에는 최소한 두 가지 작업(OPEN 및 CLOSE)이 포함되어 있습니다.

    위의 두 예제의 코드는 관례에 의한 코딩 때문에 거의 같아 보인다.

    # 다 똑같은 거야, 계속 반복하고

    <div class="content-ad"></div>

    리듀서도 마찬가지입니다.

    OPEN 및 CLOSE 동작에 의해 시작된 요청은 실제로 매칭 리듀서에서 구현되며, Redux 패러다임에서는 애플리케이션의 상태만 수정하는 것을 의미한다. 이 방법으로 환원기 로직을 실행하면 대화 상자가 state.InviteCodeDialog.inviteCodeDialog.open 다음 예제와 같이 자동으로 다시 렌더링됩니다.

    리액션은 구성 요소의 상태가 변경될 때마다 해당 구성 요소를 다시 렌더링합니다.

    # 결론

    지금까지 Redux 데이터 흐름과 동기화 데이터를 살펴본 결과 UI 대화 상자를 열고 닫을 때 모든 조각이 어떻게 조화를 이루는지 살펴보았습니다.

    <div class="content-ad"></div>

    코드베이스에 새 대화상자를 추가해야 한다고 가정합시다.

    관례적으로 코딩한 결과, 설계 결정의 상당 부분이 이미 내려졌기 때문에 새로운 기능을 추가하는 데 많은 노력이 필요하지 않습니다. 어떤 경우에는 코드를 복사하고 붙여넣는 것만큼 간단하다.

    plainenglish.io에서 더 많은 콘텐츠를 확인하십시오. 무료 주간 뉴스레터에 가입하십시오. 우리 커뮤니티 Discords에서 글쓰기 기회와 조언을 독점적으로 이용하세요.