Typescript와 Mongez를 사용하여 Clean React Js 프로젝트를 만들어 봅시다. 3부: 프로젝트 앱

지금까지 src/shared 및 src/index.ts를 살펴보았고 워크플로우에 대한 좋은 아이디어를 얻었습니다. 이제 가장 중요한 디렉토리인 apps 디렉토리로 이동하겠습니다.

앱 디렉토리

거기에서 우리는 모든 무거운 작업을 수행하지만 시리즈의 첫 번째 기사에서 언급한 것처럼 보다 조직적인 구조에서 프로젝트는 app 기반입니다. 즉, 각 앱(예: 관리자, 프런트 오피스)을 하나로 그룹화합니다. 작업을 분리하고 구성 요소를 서로 공유할 수 있습니다.

앱 구조

각 앱은 2개의 기본 파일인 ${app}-modules.json 및 ${app}-provider.ts 파일로 구성됩니다.

이러한 파일은 응용 프로그램의 작동 방식을 알려주므로MR 각 파일에 대해 자세히 살펴보겠습니다.

앱 모듈.json

src/shared/apps-list.ts 섹션에서 언급했듯이 app-modules.json은 세 가지 속성을 포함하는 앱 메타 데이터를 정의합니다.

name : 앱 이름을 정의합니다. 앱 디렉토리 이름과 동일해야 합니다.

path : 앱의 기본 경로를 정의합니다. 예를 들어 관리자 앱인 경우 /admin로 설정할 수 있습니다.

modules : 모듈 이름과 해당 이름에 대한 진입 경로를 정의하는 객체 배열입니다. 조금 더 자세히 살펴보겠습니다.

그런 식으로 앱이 잘 구성되어 있고 전체 앱의 기본 경로를 정의했으며 나중에 변경하려는 경우 모듈 파일에서 변경하기만 하면 됩니다.

언급했듯이 앱 이름은 앱 디렉터리에서 앱 공급자를 가져오므로 앱 디렉터리 이름과 동일합니다.

이제 modules 배열과 관련하여 객체의 배열이며 각 객체에는 entry 및 module라는 두 가지 속성이 있습니다.
module 속성은 사용자가 entry 경로에 도달할 때 로드될 모듈 이름을 정의합니다.

그 외에 entry에는 경로의 첫 번째 세그먼트만 필요합니다.

보다 명확하게 예를 들어 보겠습니다. 다음 json 파일은 프로젝트로 생성된 front-office-modules.json 파일입니다.

{
  "path": "/",
  "name": "front-office",
  "modules": [
    {
      "entry": ["/"],
      "module": "home"
    },
    {
      "entry": ["/account", "/login"],
      "module": "account"
    }
  ]
}

modules 속성의 마지막 개체에는 두 개의 항목/account 및 /login가 있습니다. 즉, 사용자가 이러한 경로 중 하나에 도달하면 모듈이 로드되지만 /account는 그것으로 시작하는 모든 하위 경로를 로드할 수 있습니다. .

다음과 같은 경로가 있다고 가정해 보겠습니다.
/account : 사용자 기본 대시보드를 로드합니다./account/settings : 사용자 설정 양식을 로드합니다./account/address-book : 사용자 주소록 페이지를 로드합니다.

이들은 세 가지 경로입니다. 이 모든 경로가 account 모듈을 가리키도록 하려면 entry 속성/account에만 설정합니다.

❌

{
  "path": "/",
  "name": "front-office",
  "modules": [
    {
      "entry": ["/"],
      "module": "home"
    },
    {
      "entry": ["/account", "/account/settings", "/accounts/address-book", "/login"],
      "module": "account"
    }
  ]
}

✅

{
  "path": "/",
  "name": "front-office",
  "modules": [
    {
      "entry": ["/"],
      "module": "home"
    },
    {
      "entry": ["/account", "/login"],
      "module": "account"
    }
  ]
}

이제 사용자가 /로 시작하는 경로에 도달하면 앱이 로드되거나 관리 앱인 경우 /admin 앱 경로 뒤의 다음 세그먼트는 모듈 항목 경로가 되어 로드됩니다. 해당 앱의 모듈.

앱 제공업체

사용자가 /admin로 이동하면 MRR(Mongez React Router)이 앱 공급자를 자동으로 로드합니다. 해당 공급자는 해당 앱의 하위 모듈보다 먼저 로드되는 기본 파일 또는 항목 파일로 간주할 수 있습니다.

As mentioned the app-provider.ts must be written exactly as ${app-directory-name}-provider.ts so the file is loaded correctly.

예를 들어 해당 애플리케이션에 대한 구성만 로드하고, 애플리케이션과 관련된 스타일을 가져오고, 기본 api 기본 경로를 정의하는 등 다양한 방식으로 도움이 됩니다.

다음 문서에서는 모듈 구조와 모범 사례에 대해 설명합니다.

살람.