HOQU의 플랫폼 개발은 복잡한 프로젝트입니다. 우리는 세 가지 다양한 종류의 사용자를 위해 세 가지 앱을 개발해야합니다. 그리고 앱간에 재사용 할 수있는 코드가 있습니다. 개발 속도를 높이려면 애플리케이션을 코드의 기존 부분에서 간단하고 이해하기 쉬운 방식으로 개발하는 것이 중요합니다.
이 기사에서는 HOQU가 코드를 한 곳 (모노 리포지토리)에 저장하여 애플리케이션의 프리젠테이션 파트의 개발을 향상시키고 가속화하는 방법에 대해 설명합니다. 그리고 우리는 Lerna라고하는 JavaScript의 모노 리포지토리로 작업하기위한 도구에 대해 설명 할 것입니다.
모노 리포지토리를 사용하는 것은 여러 리포지토리를 사용하는 것과 다릅니다. 이 경우 전체 코드가 동일한 리포지토리에 있습니다.
리포지토리가 모놀리식으로 간주되는 경우:
리포지토리에는 둘 이상의 논리적인 프로젝트가 있습니다.
이러한 프로젝트는 관련성이 없거나 약하게 연결되거나 3 자 수단으로 연결될 수 있습니다 (예: 종속성 관리 시스템을 통해)
리포지토리는 여러 가지면에서 큽니다:
- 커밋 수.
- 가지 및 / 또는 태그 수
- 파일 수
- 콘텐츠 사이즈 (예 : 폴더 사이즈)
이러한 앱간에 재사용 할 수있는 코드가 많이 있고 React ( React — 사용자 인터페이스 구축을 위한 JavaScript 라이브러리) 생태계는 코드를 모듈화 할 수있는 방법을 제공합니다. 사용자 인터페이스 (UI) 및 로직뿐만 아니라 우리는 전체 앱 페이지를 완전히 재사용하고 있습니다. 우리의 목표는 우리의 애플리케이션을 백 퍼센트 모듈화하는 것이 었습니다. 예를 들면 우리의 UI와 일부 페이지를 봅시다.
가장 많이 재사용되는 컴포넌트 중 하나는 “버튼”이며 UI의 일부로 프로젝트간에 쉽게 공유되어야합니다.
더 복잡한 컴포넌트 중 하나는 “메뉴” 컴포넌트로, 이 앱은 3 가지 우리의 앱 모두에서 널리 사용됩니다.
제휴사 및 판매자를위한 프로필 페이지는 두 앱간에 프리젠테이션과 로직을 완전히 공유합니다.
분명히, UI는 우리의 애플리케이션간에 재사용되지만 더 중요한 것은 볼 수 있듯이 유연성과 개발 속도를 유지하면서 일부 페이지의 모든 로직과 프리젠테이션을 완전히 재사용해야 한다는 것입니다.
이 과제에 대한 간단한 대답은 npm link (npm은 JavaScript의 패키지 관리자 및 세계 최대의 소프트웨어 레지스트리) 또는 yarn workspaces (Yarn는 패키지 관리자입니다. npm 레지스터를 사용하여 npm을 대체하는 것으로 종종 사용됩니다) 을 사용하고 코어 패키지를 앱에 연결하는 것이 었습니다.
이는 동일한 코어 패키지로 앱을 개발할 때 가장 일반적인 방법이지만 다음과 같은 단점이 있습니다:
- 앱 버전 관리가 완전히 엉망이 될 수 있으며 결국 버그 수정 및 다양한 종류의 사용자에 대한 약간의 차이로 인해 코어 패키지를 모든 패키지에 일관성있게 유지하는 것이 어려워 질 수 있습니다.
- 리포지토리를 전환하고 코어 패키지를 변경할 때 수동으로 테스트를 실행해야하므로 4 개의 리포지토리를 개발하는 것이 번거롭고 느려질 수 있습니다. Github 서브 모듈은 부분적인 해결책이지만 커뮤니티에 대한 합의는 짧은 시간 동안 우리가 사용하려고 시도했는데 어려움도 겪지는 않았지만 “그냥하지 마라”입니다.
대부분의 코드를 재사용하는 더 복잡한 대답은 Lerna + yarn workspaces을 사용하는 것이 었습니다. 구글, 페이스북, 트위터 같은 거인들의 경험을 사용하여 우리는 모노 리포지토리 접근 방식을 시도하기로 결정했습니다.
Lerna ( Lerna는 git 및 npm을 사용하여 다중 패키지 리포지토리를 관리하는 작업 과정을 최적화하는 도구입니다) 를 사용하는 것은 우리에게 단순한 선택이었습니다. 왜냐하면 그것은 모노 리포지토리에서 npm 패키지를 관리하기위한 Babel과 React 같은 훌륭한 오픈 소스 프로젝트에서 사용 되었기 때문입니다. 우리는 두 번째 앱의 개발을 마무리 할 때 모노 리포지토리를 방식의 채택을 테스트했습니다. 우리는 모든 것을 담은 코어 패키지를 추출하려고 노력하면서 목표를 설정했습니다. 또한 코어 패키지에서 재사용 할 수있는 부분을 가져 와서 두 가지 앱을 완벽하게 모듈화하는 것을 목표로하고 있으며, 모든 고유 한 구성 요소와 주요 차이점을 앱 패키지에 유지합니다.
모노 리포지토리 구조로 옮겨 가면서 너무 큰 도전을 제시하지는 못했습니다. 그럼에도 불구하고 핵심 패키지를 분리하는 데는 시간이 걸렸습니다 (예 : 수동으로 많은 수의 이름 바꾸기 및 수동 테스트). 앞서 언급 한 두 가지 단점을 모두 완화하면서 다음과 같은 이점을 추가하면서 좋은면이 즉시 명백 해졌다:
- 새로운 개발자를위한 쉬운 부트스트랩 —
lerna bootstrap만 입력하면 종속성이 모든 프로젝트에 대해 yarn 설치를 실행할 필요없이 연결됩니다. 또한 yarn workspaces을 사용하면 프로젝트를 부트 스트랩 할 때 단일 node_modules 폴더를 사용하므로 공간을 절약 할 수 있습니다. - 우리의 모든 설정을 위한 단일 장소입니다. 우리의 모든 설정을 위한 단일 장소입니다. 그것은 린트, 테스트, 빌드 및 배포 우리의 모든 애플리케이션들 — 우리의 루트 폴더를 포함합니다. 모든 명령은
package.json에 포함되어 있으며 lerna를 사용하면 모든 스크립트를 병렬로 실행할 수 있으므로 개발 및 배포 할 때 시간을 절약 할 수 있습니다.
Gitlab CI와 모든 프로젝트의 배포가 자동화되어 있기 때문에 우리 프로젝트의 CI (지속적인 통합)를 구성하는 것도 어려운 작업이 않았습니다. 그러나, 미래에는, 우리의 프로젝트가 성장함에 따라, Travis CI와 같은 고급 옵션으로 이동하는 것을 고려합니다.
결론적으로 모놀리식 소스 컨트롤을 사용한다고해서 분리 할 수없는 코드베이스가 있다는 것을 의미하지는 않습니다. 반대로, 우리는 코드를 모듈화하고 다른 프로젝트간에 더 쉽게 공유 할 수 있습니다.
다음 시간까지!
HOQU 팀
