개념증명(Proof of Contept) : 모노리포 및 프라이빗 NPM 저장소 운영

부제: full-cycle 개발(frontend / backend + 테스트/빌드/배포)을 위한 모노리포 구현하기

프론트엔드,백엔드 학습을 위해 여러 미니 프로젝트를 시도 하는 중에
프로젝트를 패키지로 묶어서 함께 관리하고 싶다는 생각이 들었습니다.

이에 gitlab npm packages + lerna + scripty + @ 로 패키지를
효과적으로 통합 관리하는 기법을 익히고자 본 미니 프로젝트를 시작하게 되었습니다.

목차

1. 동기 (Motivation)

2. 프로젝트를 진행하며 새롭게 습득하게 된 것들

3. 회 고 (Retrospective)

1. 동기 (Motivation)

...(닫기)

🔥 모노리포 프로젝트 를 시작하게 된 주요 동기:

• 단일 진실 공급원(single source of truth): ...

• 중앙 통제와 분산 실행 (centralized control and decentralized execution): ...

2. 프로젝트를 진행하는 중에 새롭게 습득하게 된 것들

..(전체닫기)

🍀 프로젝트를 진행하는 과정 중에 습득한 기법들 :

• 상속을 통한 개발 도구 설정의 중앙 통제   (tsconfig.json, .babelrc)

  ..(닫기)

  
  

  • 프로젝트 별로 세부 설정 내용이 크게 달라 지지 않는 타입스크립트 컴파일러, 바벨 트랜스파일러, eslinter 의 경우 설정 상속을 통해 중복을 상당부분 제거할 수 있으면서도 프로젝트 별 세부 설정이 가능합니다.

    
    

    // 파일 경로: 2021_monorepo/subprojects/tsconfig.settings.json
    {
    "compilerOptions": {
        "module": "CommonJS",
        "types": [],
        "sourceMap": true,
        "target": "ES2018",
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "declaration": true,
        "outDir": "dist",
        "rootDir": "src"
    },
    "include": ["src"]
    }
    
    // 파일 경로: 2021_monorepo/subprojects/types/tsconfig.settings.json
    {
    "extends": "../tsconfig.settings.json", // 상속을 통해 공통되는 설정의 중복을 제거한다 
    "compilerOptions": {
        "composite": true,
        "outDir": "dist",
        "rootDir": "src"
    },
    "include": ["src"]
    }

    
    

• Package Iteration, Scoped Execution을 통한 일괄/분산 실행 (lerna, scripty)

  ..(닫기)

  
  

  • lerna는 빌드/테스트/배포 등에 필요한 작업을 효과적으로 처리할 수 있도록 전체 패키지 일괄 실행 및 패키지별 분산 실행 이 가능한 환경을 제공합니다.

    
    

    // 일괄 실행을 위한 package.json 및 scripty
    $ yarn [작업명]
    
    // 파일경로(scripty 설정): 2021_monorepo/scripts/workspace/build.sh
    #!/usr/bin/env bash
    yarn tsc -b subprojects
    

  
  

  • lerna는 빌드/테스트/배포 등에 필요한 작업을 효과적으로 처리할 수 있도록 전체 패키지 일괄 실행 및 패키지별 분산 실행 이 가능한 환경을 제공합니다.

    
    

    // 분산 실행을 위한 lerna 명령어
    $ lerna run [작업명] --scope [패키지명]
    $ lerna exec '[실행 스크립트]' -- scope [패키지명]
    
    // 파일경로(scripty 설정): 2021_monorepo/scripts/subprojects/build.sh
    #!/usr/bin/env bash
    yarn tsc -b
    

  
  

• 라이브러리 (@microsoft/api-extractor 와 @microsoft/api-documentor)를 이용한 문서생성 자동화

  ..(닫기)

  • 라이브러리를 통한 api 명세 추출 및 자동 문서 생성

    
    

    {
        "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
        "mainEntryPointFilePath": "<projectFolder>/lib/index.d.ts", "bundledPackages": [],
        "compiler": {
        },
        "apiReport": {
            "enabled": true
        },
        "docModel": {
            "enabled": true,
            "apiJsonFilePath": "<projectFolder>/../../temp/<unscopedPackageName>.api.json"
        },
        "dtsRollup": {
            "enabled": true,
            "untrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-private.d.ts",
            "betaTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-beta.d.ts",
            "publicTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>.d.ts"
        },
        "tsdocMetadata": {
        },
        "messages": {
            "compilerMessageReporting": {
                "default": {
                    "logLevel": "warning"
                }
            },
            "extractorMessageReporting": {
                "default": {
                    "logLevel": "warning"
                }
            },
            "tsdocMessageReporting": {
                "default": {
                    "logLevel": "warning"
                }
            }
        }
    }

    
    

• gitlab NPM packages repo를 통한 패키지 관리

  ..(닫기)

  
  

  • 24시간 이내 한번만 publish 가능한 Public NPM 리포지토리와는 달리 설치형 gitlab 서버의 package repo는 수시로 배포가 가능합니다.

  
  

  // 설정 파일 경로: 2021_monorepo/subprojects/types/.npmrc
  
  @monorepo:registry=https://gitlab.com/api/v4/packages/npm/
  //gitlab.com/api/v4/packages/npm/:_authToken'="xxxxxxxxxxxxxxxxxxxxx"
  //gitlab.com/api/v4/projects/types/packages/npm/:_authToken'="xxxxxxxxxxxxxxxxxxxx"
  
  // 설정 파일 경로: 2021_monorepo/subprojects/types/package.json
  
  "publishConfig": {
      "@monorepo:registry": "http://192.168.56.102/api/v4/projects/01/packages/npm/"
  },

3. 회 고 (Retrospective)

..(닫기)

︎︎︎︎✨︎ 프로젝트를 진행하면서 깨닫게 된 주관적인 경험 :

• ...

︎︎︎🌻︎ 다음 미니 프로젝트 를 통해 시도해 보고 싶은 것들 :

• ...