JavaScript 디자인 패턴 학습, 제 2판

14장. React.js의 애플리케이션 구조

이 작품은 AI를 사용하여 번역되었습니다. 여러분의 피드백과 의견을 환영합니다: [e-mail]

소규모 취미 프로젝트( )를 만들거나 새로운 개념이나 라이브러리를 시도할 때 개발자는 계획이나 정리 체계 없이 폴더에 파일을 추가하기 시작할 수 있습니다. 여기에는 CSS, 헬퍼 컴포넌트, 이미지, 페이지 등이 포함될 수 있습니다. 프로젝트가 커지면 모든 리소스를 위한 단일 폴더는 관리가 불가능해집니다. 상당한 크기의 코드베이스는 논리적 기준에 따라 애플리케이션 폴더 구조로 정리해야 합니다. 파일과 애플리케이션 구성 요소를 어떻게 구조화할지는 개인/팀에서 결정할 수 있습니다. 또한 일반적으로 사용되는 애플리케이션 도메인과 기술에 따라 달라질 수 있습니다.

이 장에서는 주로 프로젝트가 성장함에 따라 프로젝트를 더 잘 관리하는 데 도움이 될 수 있는 React.js 애플리케이션의 폴더 구조에 중점을 둡니다.

소개

React.js 자체는 프로젝트 구조화에 대한 가이드라인을 제공하지는 않지만 일반적으로 사용되는 몇 가지 접근 방식을 제안합니다. 복잡성이 추가된 프로젝트의 폴더 구조와 Next.js 애플리케이션에 대해 논의하기 전에 이를 살펴보고 장단점을 이해해 보겠습니다.

높은 수준에서는 두 가지 방법으로 React 애플리케이션에서 파일을 그룹화할 수 있습니다:

기능별 그룹화

모든 애플리케이션 모듈, 기능 또는 경로에 대한 폴더를 만듭니다.

파일 유형별로 그룹화

다양한 유형의 파일을 위한 폴더를 만듭니다.

이 분류에 대해 자세히 살펴보겠습니다.

모듈, 기능 또는 경로별로 그룹화

이 경우 파일 구조는 비즈니스 모델 또는 애플리케이션 흐름을 반영합니다. 예를 들어 전자상거래 애플리케이션을 사용하는 경우 제품, 제품 목록, 결제 등의 폴더가 있습니다. 제품 모듈에 명시적으로 필요한 CSS, JSX 구성 요소, 테스트, 하위 구성 요소 또는 헬퍼 라이브러리는 제품 폴더에 있습니다:

common/
  Avatar.js
  Avatar.css
  ErrorUtils.js
  ErrorUtils.test.js
product/
  index.js
  product.css
  price.js
  product.test.js
checkout/
  index.js
  checkout.css
  checkout.test.js

기능별로 파일을 그룹화하면 모듈에 변경 사항이 있는 경우 영향을 받는 모든 파일이 같은 폴더에 배치되고 변경 사항이 코드의 특정 부분으로 로컬라이즈된다는 장점이 있습니다.

단점은 모듈 간에 사용되는 공통 구성 요소, 로직 또는 스타일을 주기적으로 식별하여 반복을 피하고 일관성과 재사용을 촉진해야 한다는 점입니다.

파일 유형별 그룹화

이 유형의 그룹화에서는 CSS, 컴포넌트, 테스트 파일, 이미지, 라이브러리 등에 대해 서로 다른 폴더를 만들 수 있습니다. 따라서 논리적으로 관련된 파일은 파일 유형에 따라 다른 폴더에 저장됩니다:

css/ global.css checkout.css product.css ...