대기업이 Nx를 사용하는 이유는 무엇입니까? Monorepo 도구는 5분 안에 빠르게 설정할 수 있습니다.

모노레포 소개

ES6, SCSS 전처리, npm, 프런트엔드 프레임워크, CI/CD, Docker 등을 포함하여 최근 몇 년 동안 프런트엔드 기술이 빠르게 발전했습니다. 소규모 애플리케이션을 완성하려면 위에 나열된 기술 외에도 비교적 크고 복잡한 플랫폼을 유지해야 할 수도 있습니다.

Monorepository는 아키텍처 개념입니다. Mono(하나) repo(리포지토리)의 문자 그대로의 의미로 보면 이(Monorepo) 아키텍처는 동일한 코드 기반에 많은 양의 프로그램 코드를 넣어 관리한다는 것을 알 수 있습니다. 기존 분리 개념 대신 Monorepo를 채택한 최초의 회사 중 하나입니다.

자세한 내용은 다음 문서를 참조하세요.

모노레포를 정말 이해하시나요? 대규모 프런트엔드 아키텍처를 소개하는 5분

Nx 소개

Nx는 빠르고 효과적이며 확장성이 뛰어난 Monorepo 도구이며 다음과 같은 기능을 가지고 있습니다.

1. 세 가지 주요 프런트엔드 프레임워크를 지원합니다.뷰, 리액트, 앵귤러

2. 백엔드 프레임워크 지원:익스프레스, 네스트, 넥스트

3. Monorepo 프레임워크용

4. 다양한 유형의 테스트를 지원합니다.사이프러스, 제스트

Nx 프론트엔드 프레임워크 개념

Nx는 잘 알려진 프로그램 편집기인 Visual Studio Code와 디자인 철학이 매우 유사한 프런트 엔드 프레임워크입니다. Visual Studio Code에서는 확장 기능을 설치하지 않고도 뛰어난 개발 경험을 얻을 수 있습니다. Nx는 유사한 원칙을 따르며, 핵심 기능은 모호함 없이 간결하고 명확하여 개발을 더욱 명확하게 만듭니다.

Nx의 핵심 기능에는 프로젝트 관리, 작업 실행, 코드 생성 및 종속성 분석이 포함됩니다. 이러한 기능을 통해 개발 팀은 보다 효과적으로 협업하고 대규모 프런트 엔드 프로젝트를 관리하며 코드 품질과 일관성을 보장할 수 있습니다. Nx를 사용하면 구성 및 도구 혼동에 대한 걱정 없이 프런트엔드 프로젝트를 쉽게 생성, 유지 관리 및 확장할 수 있습니다.

Visual Studio Code의 확장과 유사하게 Nx는 플러그인 키트(플러그인)도 지원하므로 프로젝트의 다양한 요구 사항에 따라 적절한 플러그인 키트를 선택할 수 있습니다. 이러한 유연성 덕분에 Nx는 소규모 애플리케이션부터 대규모 엔터프라이즈 수준 애플리케이션까지 다양한 프런트엔드 프로젝트에 적합합니다.

다음으로 간단한 Nx 프로젝트를 만들어 보겠습니다. 먼저 Nx를 설치하고 새 프로젝트를 생성해야 합니다. 그런 다음 Nx의 명령줄 도구를 사용하여 구성 요소, 서비스 및 기타 코드 파일을 생성할 수 있습니다. Nx는 또한 프로젝트 시작 프로세스의 속도를 높이기 위해 사전 정의된 프로젝트 템플릿을 제공합니다. 특정 요구 사항에 맞게 프로젝트 구조와 구성을 쉽게 사용자 정의할 수 있습니다.

Nx는 또한 구성, 테스트 및 배포 프로세스를 자동화하는 데 도움이 되는 강력한 작업 실행 기능을 제공합니다. 이는 프로젝트 신뢰성과 안정성을 보장하고 개발 효율성을 향상시키는 데 도움이 됩니다.

간단히 말해서, Nx는 강력하고 유연한 프런트엔드 프레임워크로서 개발 팀이 프런트엔드 프로젝트를 보다 쉽게 관리하고 뛰어난 개발 경험을 제공할 수 있도록 단순성과 사용자 정의 가능성에 중점을 두고 있습니다. 개인 개발자이든 대규모 팀이든 Nx는 고품질 프런트 엔드 애플리케이션을 구축하는 데 도움을 줄 수 있습니다.

NX 빌드

새로운 Nx 환경 생성

독자는 다음 명령을 통해 새로운 Nx 작업 환경을 만들 수 있습니다.

npx create-nx-workspace@latest

생성이 완료되면 사전 설정도 선택해야 합니다. 독자의 참조를 위해 아래에 여러 Nx 사전 설정도 제공됩니다.

작업공간(타입스크립트)

npx 생성-nx-작업 공간 –preset=core

반응하다

npx create-nx-workspace –preset=반응

Next.js

npx 생성-nx-작업 공간 –preset=next

모난

npx create-nx-workspace –preset=angular

풀스택 — Angular 및 Nest.js

npx 생성-nx-작업 공간 –preset=angular-nest

백엔드 — 익스프레스

npx 생성-nx-작업 공간 –preset=express

기존 프로젝트에서 Nx 환경을 생성합니다.

기존 프로젝트에 Lerna 또는 Yarn 모노레포가 있는 경우 다음 명령을 사용하여 npx add-nx-to-monorepo를 생성할 수 있습니다.

이미 React App 프로젝트가 있는 경우 다음 명령을 사용하여 Nx를 빌드할 수도 있습니다.

npx cra-to-nx

Nx CLI 설치

개발자 경험을 향상시키려면 글로벌 Nx CLI를 설치하는 것도 권장됩니다.

npm 설치 -g nx

Nx 폴더 구조

다음은 공식 Nx 문서를 예로 사용한 간단한 예입니다.

Nx 프로젝트에는 일반적으로 다음 폴더가 있습니다.

 

1. myorg/는 자신의 대규모 Nx 프로젝트 이름입니다.

2. /apps/는 다양한 프로젝트를 저장하며 모든 프로젝트의 주요 진입점이기도 합니다. 이 폴더의 모든 프로젝트는 가능한 한 경량이어야 합니다. 반대로 더 큰 파일과 재사용 가능한 코드가 있는 프로그램은 라이브러리에 배치하고 각 프로젝트에 로드하는 것이 좋습니다.

3. /libs/에는 모든 라이브러리 프로젝트가 포함됩니다. 내 작업을 예로 들어 다음과 같은 몇 가지 공통 기능을 모듈화하여 여기에 저장하겠습니다.

4. /tools/에는 일반적으로 사용되는 코드 스크립트가 포함되어 있으며 매개변수도 이 폴더에 배치될 수 있습니다. 예: 데이터베이스 설정 및 스크립트

5. /workspace.json은 대규모 Nx 프로젝트의 모든 소규모 프로젝트를 나열합니다.

6. /nx.json은 Nx CLI에 따라 구성되며, 이 파일을 통해 Nx에 캐시해야 할 내용이나 실행 방법도 알려줍니다.

7. /tsconfig.base.json은 전역 TypeScript를 설정하고 각 라이브러리에 별칭을 생성하여 TypeScript 또는 JavaScript 로드를 지원합니다.

결론

위는 Nx에 대한 간략한 소개로, Monorepo 프레임워크의 도구일 뿐만 아니라 Nx가 지원하는 기능도 설명합니다. 또한 현재 사용자 상황에 따라 Nx 환경을 구축하는 데 사용되는 명령도 있습니다.

현재 외국 회사에 근무하고 있으며 Nx 도구를 사용하여 직장에서 여러 프로젝트를 관리하고 있습니다. 개인적으로는 코드의 재사용성이 향상되는 것 외에도 다른 팀의 엔지니어들과 협업하고 논의할 수 있는 기회가 더 많아졌다고 생각합니다.

인용하다

 

https://github.com/nrwl/nx