React/Rails 최종 부트캠프 프로젝트

Flatiron School에서의 마지막 프로젝트를 위해 저는 제가 가장 좋아하는 비디오 게임 중 하나인 Apex Legends를 중심으로 웹 애플리케이션을 구축하기로 결정했습니다. 플레이어가 자신의 스쿼드에 추가할 팀원을 찾을 수 있는 매치메이킹 애플리케이션입니다. 개념은 간단합니다. 플레이어는 로비를 만들고, 보고, 참가를 요청할 수 있습니다.

로비에는 호스트의 게이머태그와 게임 모드, 상대 시간, 플랫폼, 요구 사항, 지역 및 관심 있는 플레이어가 표시됩니다. 현재 로비 및 요청은 생성만 가능하며 업데이트 또는 삭제는 불가능합니다.

향후 버전에는 인증, 프로필 페이지, 실시간 게임 통계 등 더 많은 기능을 추가할 계획입니다. 현재 플레이어는 만들고 볼 수만 있습니다.

레일스 API

백엔드는 Ruby on Rails을 API로 사용합니다. 이 섹션은 구축이 상당히 간단했습니다. React Frontend의 ​​HTTP 요청을 처리하려면 Rack CORS 미들웨어가 필요했고 JSON 렌더링을 필터링하려면 fast_jsonapi gem이 필요했습니다. 내 모델이 설정되면 요청에 대한 경로를 만들었습니다.

초기 디자인

프런트엔드를 사용하기 전에 Figma를 사용하여 웹 디자인을 만들었습니다. 나는 방향 감각이 필요했고, 이 참조를 갖는 것은 프로젝트의 ReactJS 부분에 도달할 때 큰 이점이었습니다. 필요한 구성 요소의 수와 스타일을 지정하는 방법에 대해 아주 잘 알고 있었습니다. 테마용 글꼴도 다운로드했습니다.

내 디자인은 다음과 같습니다.

ReactJS

내 프런트엔드는 ReactJS 프레임워크를 활용했습니다. 저는 'create-react-app'을 사용하여 프로세스를 시작했습니다. 이 섹션에는 특히 초기 설정에 대해 움직이는 부분이 더 많았습니다. 현재 상태에는 2개의 컨테이너와 10개의 구성 요소가 있습니다. react-redux , react-router-dom , tailwindcss 등 다양한 패키지를 사용했습니다.

리덕스 반응

Redux를 사용하면 애플리케이션이 저장소 또는 전역 상태에서 데이터를 읽을 수 있습니다. 데이터를 업데이트하기 위해 작업을 저장소로 보낼 수 있습니다.

이 규모의 애플리케이션을 위해 Redux를 구성한 것은 이번이 처음이었습니다. 거기에서 나는 꽤 많은 장애물에 부딪쳤고 설정을 완전히 이해하기 위해 많은 자료를 참조해야 했습니다. 검토 후 스토어, 액션, 리듀서를 별도의 파일로 나누기로 결정했습니다. 각 모델에는 고유한 감속기와 작업 파일이 있습니다. 이렇게 하면 나중에 모든 것을 쉽게 읽고 업데이트할 수 있습니다. 구성 요소에 대한 특정 작업이 필요할 때마다 작업 파일에서 함수를 가져왔습니다.

리액트 라우터

내 애플리케이션에는 적절한 구성 요소를 참조하는 경로와 개별 로비에 대한 동적 경로가 필요했습니다. 이를 통해 여러 뷰가 있는 단일 페이지 애플리케이션(SPA)을 유지할 수 있었습니다. 페이지는 기본적으로 다시 로드되지 않습니다.

설정은 매우 간단하고 이해하기 쉬웠습니다. 모든 구성 요소/경로가 동봉된 라우터 태그가 있습니다. 각 경로에는 경로와 구성 요소가 있습니다.

<Router>
        <div className='bg-wraith bg-center bg-top bg-cover bg-no-repeat bg-fixed pb-16'>
              <Nav />
              <Route exact path="/" component={Home} />
              <Route exact path='/about' component={About} />
              <Route exact path="/lobbies" component={LobbiesContainer} />
              <Route path="/lobbies/:id" component={Lobby} />
        </div>
</Router>

테일윈드 CSS

Tailwind가 재미있는 부분이었고, 알아내는 과정도 즐거웠습니다. 스타일 유연성 때문에 Bootstrap과 같은 다른 프레임워크보다 Tailwind를 선택했습니다. Tailwind 구성 파일은 쉽게 사용자 지정할 수 있습니다. 일반 CSS를 작성하는 것과 같았지만 클래스 속성을 사용했습니다.

이 간단한 설정...

<div className='card shadow-2xl bg-gray-500 bg-opacity-50 text-gray-200 p-10'>
            <div className="font-semibold text-xl tracking-wider uppercase"><h2><Link to={`/lobbies/${id}`}>{gamertag}</Link></h2></div>
            <div className="text-sm"><p>{gamemode} • 30 min</p></div>
            <div className="flex mt-2">{platformType()} {micRequired()}</div>
            <div className="text-sm mt-2"><p>{region} • {skillLevel}</p></div>
            <div className="text-sm mt-4 btext-white"><p>{description}</p></div>
            <div className="mt-8 inline-block float-left">
                <svg className="w-6 h-6 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>

                <span className='text-sm ml-1 mt-0.5'>7 Interested</span>  
            </div>
            <div className="mt-6 inline-block float-right">
                <Link to={`/lobbies/${id}`}>
                    <button className='flex bg-red-600 hover:bg-red-500 text-white hover:text-white py-2 px-3 text-sm uppercase'>
                    View Lobby
                    </button>
                </Link>
            </div>
</div>

반응형 카드를 만들었습니다...





스타일은 내가 Figma를 사용하여 만든 모형과 거의 동일합니다. 이것은 아마도 내가 이전 프로젝트에서 만든 목업에 가장 근접한 것일 것입니다.

마지막 인덱스 페이지를 살펴보겠습니다. 위의 모형과 비교하십시오.



코드에 뛰어들고 싶습니까? 레포here를 확인하십시오.