[Nx 입문] Monorepo를 React로 간단하게 설정하는 방법.

드디어 시작이네!!Qita 자동 달력
올해 나는 한 사람이 25일 동안 기사를 쓰는 것에 도전한다지도..
나는 매일 업무의 전단 개발을 통해 배운 것을 수출하고 싶다!!
오늘의 주제는 "Nx"!!
Nx는
Nx는 React/node입니다.단일 보고서(monorepo)를 통해 js/Anglar의 응용 프로그램을 관리할 수 있는 개발 도구 그룹입니다.
React의 프레임인 Gatsby와 Next.js를 사용할 수 있습니다.
(Type Script와 어울리지 않는 Vue와 Nuxt.js의 모습이 지원되지 않는... 슬프다)
12/2 보충
공식이 아니라면 플러그인이 있는 것 같아!!
외부에서 플러그인을 만들어 자유롭게 확장할 수 있는 것도 Nx의 장점이죠...!
단일 보고서
단일 보고서는 단일 저장소의 약어입니다.
단일 창고에서 여러 응용 프로그램과 프로그램 라이브러리를 관리합니다.
Google과 Uber 등 다양한 서비스를 이용하는 기업·조직에서 많이 이용되고 있습니다.
보고서의 이점

환경 구축(lint,tsconfig), 구축 등 과정을 통일할 수 있다

프로젝트 간에 코드를 공유할 수 있으므로 코드는 DRY(Don't Repeat Yourself: 중복 방지)

보고의 결점

창고 비대화

창고에서 관리하는 모든 서비스의 발표와 합병을 고려해야 한다

참고 자료
▶ 활용해보니 알겠다!보고에 적합한 항목
Nx의 이곳은 대단해!
설치가 간단합니다!
원래 구조물이 보고하는 환경은 다양한 설정이 필요하다.
그러나 Nx는 하나의 명령만 실행하면 단일 보고 환경을 간단하게 구축할 수 있습니다!!
또한 Jest, Cypress, Storybook, ESLit, TypeScript, Pretter, CSS 프레임워크 등 개발에 필요한 도구도 함께 설치할 수 있습니다^
편집기의 확장 기능인 "Nx Connsole"을 사용하여 GUI를 사용하여 Nx 명령을 생성할 수 있습니다.
지령을 외우지 않아도 감각을 쓸 수 있기 때문에 추천합니다.

참고 자료
자동 관리 프로그램 라이브러리와 응용 프로그램의 의존 관계!서둘러라!!
Nx는 TypeScript の path alias와 nx.json の implicitDependencies 등에서 코드를 분석하여 의존 관계를 분석한다.
따라서 변경의 영향을 받을 수 있는 항목만 재건과 재테스트를 할 수 있습니다!
또한 하나의 명령으로 그들의 의존 관계를 조준할 수 있습니다!!

참고 자료
버전 관리도 쉬워요!
Nx에서는 nx migrate라는 명령을 실행하여 종속 패키지가 포함된 컨텐츠를 업데이트합니다.
예를 들어, Next입니다.js의 버전을 최신 버전으로 설정하려면 다음 명령을 실행하십시오
Next.js 버전뿐만 아니라 의존하는 패키지eslint-config-next도 업데이트됩니다.

yarn nx migrate @nrwl/next

참고 자료
Nx 시작
Nx의 구조
Nx는 이러한 카탈로그 설계입니다.

🗂 ワークスペース
　　└ 🗂 apps               - 実行可能なアプリケーション
　　└ 🗂 libs               - ライブラリ(共通の処理やUI、componentなど)
　　└ 🗂 tools              - コードベースで動作するスクリプト
 - 📄 workspace.json     - ワークスペースの設定
 - 📄 nx.json            - プロジェクトの追加情報(依存関係の制御など)
 - 📄 tsconfig.base.json - グローバルなTypeScriptの設定

작업공간 및 응용 프로그램 만들기(초기 설정)
다음 명령을 실행합니다.

npx create-nx-workspace@latest

그리고 몇 가지 질문을 받을 수 있기 때문에 하나하나 대답한다.
작업공간 이름을 먼저 설정합니다.

? Workspace name (e.g., org name)     ›

작업공간과 함께 응용 프로그램을 만듭니다.

? What to create in the new workspace …

empty             [an empty workspace with a layout that works best for building apps]
  npm               [an empty workspace set up to publish npm packages (similar to and compatible with yarn workspaces)]
  react             [a workspace with a single React application]
  angular           [a workspace with a single Angular application]
❯ next.js           [a workspace with a single Next.js application]
  gatsby            [a workspace with a single Gatsby application]
  nest              [a workspace with a single Nest application]
  express           [a workspace with a single Express application]
  web components    [a workspace with a single app built using web components]
  react-native      [a workspace with a single React Native application]
  react-express     [a workspace with a full stack application (React + Express)]
  angular-nest      [a workspace with a full stack application (Angular + Nest)

만들 프로그램의 이름을 결정합니다.

? Application name          › 

Next.js를 선택했기 때문에 CSS 프레임워크도 함께 설치할 수 있습니다.
스스로 설정하지 않아도 돼, 아주 가벼워!

? Default stylesheet format           …
  CSS
  SASS(.scss)       [ http://sass-lang.com   ]
  LESS              [ http://lesscss.org     ]
  Stylus(.styl)     [ http://stylus-lang.com ]
  styled-components [ https://styled-components.com            ]
❯ emotion           [ https://emotion.sh                       ]
  styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]

모든 문제가 완료되면 작업 공간이 생성됩니다.
응용 프로그램 추가/라이브러리 추가nx generate 명령을 실행하여 응용 프로그램과 라이브러리를 추가할 수 있습니다.Nx Console를 사용하면 간단하게 설정할 수 있기 때문에 이 방법으로 설명한다.
1. Nx Console의 GENERATE & RUN TARGET 중에서 선택Generate
2. 매크로 패키지 선택
다운로드한 매크로 패키지 목록 표시
추가할 프로그램과 라이브러리를 선택하십시오.

하면, 만약, 만약...
설치 문서 또는 다음 저장소를 참조하십시오.
3. option 설정
프로그램 라이브러리의 이름이 무엇인지, 어느 차원, 디렉터리에 만드는지 등 세부적인 조작을 드문드문 진행한다.
이 설정에서 자동으로 명령을 생성하고 "Run"단추를 누르면 실행할 수 있습니다!

이렇게 완성!
설정은 아주 아주 아주 아주 아주 아주 아주 아주 아주 아주 아주 아주 짧게 끝!
지금까지 "Nx 입문"!!
내일은 React에 대한 State 관리!
기대해주세요~