ReactPress: 효율적인 개발을 위한 pnpm을 사용한 Monorepo 접근 방식

ReactPress GitHub: https://github.com/fecommunity/reactpress

ReactPress: 효율적인 개발을 위한 pnpm을 사용한 Monorepo 접근 방식

현대 웹 개발 영역에서 종속성과 프로젝트 구조를 관리하는 것은 확장 가능하고 유지 관리 가능한 코드베이스를 유지하는 데 중요합니다. React와 Node.js로 구축된 오픈 소스 출판 플랫폼인 ReactPress는 이 프로세스를 간소화하기 위해 pnpm을 사용하는 모노레포 접근 방식을 채택합니다. ReactPress가 어떻게 pnpm의 모노레포 기능을 활용하여 개발 효율성을 향상하는지 살펴보겠습니다.

모노레포란 무엇인가요?

모노레포(모놀리식 저장소)는 단일 저장소 내에서 여러 프로젝트 또는 모듈을 관리하는 소프트웨어 개발 방식입니다. 이 접근 방식은 종속성 관리를 단순화하고, 코드 재사용을 촉진하며, 프로젝트 유지 관리성을 향상시킵니다. ReactPress는 단일 저장소 전략을 채택합니다. 그 이유는 주로 여러 패키지 간의 종속성을 효율적으로 처리할 수 있기 때문입니다.

pnpm 소개

pnpm은 하드 링크와 심볼릭 링크를 활용하여 불필요한 파일 복사를 방지하는 고성능 npm 패키지 관리자입니다. 이렇게 하면 설치 시간과 디스크 공간 사용량이 크게 줄어듭니다. 또한 pnpm은 작업 공간을 지원하므로 여러 패키지를 매우 쉽고 효율적으로 관리할 수 있습니다.

ReactPress 모노레포 구현

ReactPress는 전체 프로젝트를 단일 Git 저장소로 구성합니다. 저장소 내부에는 여러 하위 디렉터리가 존재하며, 각각은 개별적으로 개발, 테스트 및 게시할 수 있는 독립적인 npm 패키지를 나타냅니다.

프로젝트 구조

ReactPress 프로젝트 구조는 다음과 같습니다.

reactpress/
├── client/        # Frontend React application
├── server/        # Backend Node.js server
├── config/        # Configuration files and scripts
├── .npmrc
├── pnpm-workspace.yaml
├── package.json
└── ...

• client/ 디렉토리에는 프런트엔드 React 애플리케이션 코드가 포함되어 있습니다.
• server/ 디렉토리에는 백엔드 Node.js 서버 코드가 포함되어 있습니다.
• config/ 디렉토리에는 구성 파일과 스크립트가 들어 있습니다.
• .npmrc 파일은 npm/pnpm의 전역 구성을 설정하는 데 사용됩니다.
• pnpm-workspace.yaml 파일은 작업공간 하위 패키지의 위치를 ​​지정합니다.
• 루트 수준 package.json 파일은 일반적으로 전역 스크립트, 종속성 및 devDependency를 정의합니다.

pnpm 작업공간 구성

ReactPress 루트 디렉터리에서 pnpm-workspace.yaml 파일은 작업 공간 레이아웃을 지정합니다.

packages:
  - 'client'
  - 'server'
  # If there are packages in the config directory that need to be included, they can be listed here too
  # - 'config/some-package'

이는 클라이언트 및 서버 디렉토리가 작업공간 하위 패키지로 처리됨을 나타냅니다.

종속성 관리

모노레포에서는 하위 패키지가 서로 종속될 수 있습니다. 예를 들어 클라이언트 하위 패키지는 서버 하위 패키지에서 제공하는 API에 따라 달라질 수 있습니다. pnpm에서는 아래와 같이 하위 패키지의 package.json 파일에 종속성을 직접 추가할 수 있습니다.

reactpress/
├── client/        # Frontend React application
├── server/        # Backend Node.js server
├── config/        # Configuration files and scripts
├── .npmrc
├── pnpm-workspace.yaml
├── package.json
└── ...

위 예에서 프런트엔드 애플리케이션은 일반적으로 HTTP 요청을 통해 백엔드 서버와 통신하므로 클라이언트 하위 패키지는 서버 하위 패키지에 직접적으로 의존하지 않습니다. 그러나 프런트엔드 애플리케이션이 백엔드에서 제공하는 특정 모듈이나 유틸리티 기능을 직접 호출해야 하는 경우(일반적이지 않음) 클라이언트의 package.json 파일에 서버에 대한 종속성을 추가할 수 있습니다.

스크립트와 빌딩

ReactPress의 루트 package.json 파일에서는 전체 프로젝트를 빌드, 테스트 또는 게시하기 위한 전역 스크립트를 정의할 수 있습니다. 예:

packages:
  - 'client'
  - 'server'
  # If there are packages in the config directory that need to be included, they can be listed here too
  # - 'config/some-package'

여기에서는 동시 패키지를 사용하여 클라이언트와 서버 모두에 대한 개발 서버를 동시에 시작합니다. pnpm -w 명령은 지정된 작업 공간 하위 패키지에서 스크립트를 실행합니다.

코드 예

다음은 ReactPress 모노레포에서 하위 패키지를 구성하고 실행하는 방법을 보여주는 간단한 코드 예제입니다.

클라이언트 및 서버 하위 패키지에 각각 React 프런트엔드 애플리케이션과 Express 백엔드 서버를 설정했다고 가정합니다. 이제 다음 명령을 사용하여 전체 프로젝트를 빌드하고 시작할 수 있습니다.

// In client/package.json
{
  "name": "@reactpress/client",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    // Normally, the client communicates with the server via HTTP requests, so it doesn't directly depend on the server package
    // But if the client needs to directly call modules or utilities provided by the server, you can add a dependency like this
    // "@reactpress/server": "workspace:*"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    // Other scripts...
  }
}

// In server/package.json
{
  "name": "@reactpress/server",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.17.1",
    "mysql2": "^2.3.3",
    // Other dependencies...
  },
  "scripts": {
    "start": "node index.js",
    // Other scripts...
  }
}

이 명령은 클라이언트 및 서버 하위 패키지 모두에 대한 개발 서버를 동시에 시작합니다. 다음 명령을 실행하여 클라이언트나 서버를 별도로 시작할 수도 있습니다.

{
  "name": "reactpress",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start:client": "pnpm -w client start",
    "start:server": "pnpm -w server start",
    "build:client": "pnpm -w client build",
    // Define a script to start both the client and server simultaneously
    "start": "concurrently \"pnpm -w client start\" \"pnpm -w server start\""
  },
  "devDependencies": {
    "concurrently": "^6.2.1",
    // Other development dependencies...
  },
  "workspaces": [
    "client",
    "server"
    // If there are packages in the config directory that need to be included, they can be listed here too
    // "config/some-package"
  ]
}

결론

pnpm을 사용한 ReactPress의 단일 저장소 접근 방식은 종속성 관리 및 프로젝트 구조에 상당한 편의성을 제공합니다. 동일한 저장소 내에서 프런트엔드 React 애플리케이션과 백엔드 Node.js 서버를 구성함으로써 ReactPress는 서로 다른 하위 패키지 간에 코드, 구성 및 도구를 쉽게 공유하는 동시에 종속성 관리 및 빌드 프로세스를 단순화할 수 있습니다. 대규모 프런트엔드-백엔드 분리 프로젝트를 개발 중이고 종속성 및 코드 구조를 더 잘 관리하고 싶다면 ReactPress의 단일 저장소 접근 방식은 확실히 따라야 할 가치 있는 예입니다.

GitHub에서 ReactPress 저장소를 자유롭게 탐색하고 pnpm의 단일 저장소 기능을 활용하여 개발 효율성을 높이는 방법을 알아보세요. 즐거운 코딩하세요! ?

위 내용은 ReactPress: 효율적인 개발을 위한 pnpm을 사용한 Monorepo 접근 방식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!