Advanced React 프로젝트를 통한 코드베이스 둘러보기 - 조각이 어떻게 맞춰지는가(동영상 포함)

전문적으로 설정된 코드베이스를 살펴보셨나요?

겉모습만으로도 혼란스러울 수 있습니다. 한 번도 본 적이 없는 많은 폴더와 .whatever 파일이 있습니다. 일반적인 create-react-app 폴더에 a folder structure that feels uncomfortably different이 있을 수 있습니다.

└── src/
    ├── components/
    ├── contexts/
    └── hooks/

게다가 일반적으로 무대 뒤에서 많은 일이 벌어지고 있습니다. 예를 들어 도움이 되는 도구가 있습니다.

코드 일관성 유지

코드를 작성하는 동안 잠재적인 버그 감지

기능이 손상될 때 경고하도록 앱을 자동으로 테스트합니다

.

기본 분기에서 깨진 코드가 병합되는 것을 방지합니다.

이것은 도대체 혼란 스러울 수 있습니다. 코드베이스의 서로 다른 부분이 어떻게 얽혀 있는지, 개발자가 로컬 시스템에서 프로덕션으로 코드를 가져오는 방법을 파악하기 어렵습니다. 머릿속에서 조립해야 하는 1000개의 조각으로 된 퍼즐과 같습니다.

물론 가이드가 있으면 좋을 것입니다. 일이 어떻게 돌아가는지 설명해 준 경험이 있는 사람. 그리고 그것은 일반적으로 개발자 작업을 시작할 때 얻는 것입니다(적어도 운이 좋다면). 그러나 그 전에 당신은 혼자입니다. 조각을 맞추려고 고군분투합니다. 또는 단순히 포기합니다.

그래도 좋은 소식이 있습니다. 지난 몇 달 동안 저는 교육 프로그램을 위한 고급 프로젝트에 참여했습니다. 지금 바로 해당 코드베이스를 둘러볼 수 있습니다. 시작하려면 here is the source code .

실제 프로젝트 및 커뮤니티 권장 사항을 기반으로 이 프로젝트를 만들었습니다. 프로젝트는 다음과 같이 구축됩니다.

Bulletproof React에서 영감을 받은 기능 기반 폴더 구조

정적 코드 검사를 위한 ESLint

일관된 코드 서식 지정을 위해 더 예뻐짐

유형 검사를 위한 TypeScript

커밋 전 후크를 위한 허스키 및 린트 스테이징

통합 테스트용 Cypress

단위 테스트용 Jest

구성 요소 설명서용 스토리북

스타일링을 위한 styled-components

지속적인 통합을 위한 GitHub 작업

당신은 이것에 대해 익숙하거나 들어본 적이 있을 것입니다. 어떤 것들은 당신에게 완전히 새로운 것일 수 있습니다.

어쨌든 이 코드베이스 둘러보기는 조각을 맞추는 데 도움이 됩니다. 이 프로젝트에서 사용된 폴더 구조와 도구가 실제로 어떻게 작동하는지에 대한 예를 들어 설명합니다.