Nx.dev를 이용한 Angular 프로젝트 만들기

 

 

 

 

 

 

Nx.dev는 monorepos 프로젝트를 위한 개발 툴이다. 기존에 Lerna, Git-repo 등 다른 툴로 monorepo를 구성할 수 있었는데, Nx.dev라는 걸 알게되어서 이를 이용해 프론트 개발 환경을 구성해보기로 했다.

 

monorepos 란?

In revision control systems, a monorepo (syllabic abbreviation of monolithic repository) is a software development strategy where code for many projects is stored in the same repository. 
(출처: https://en.wikipedia.org/wiki/Monorepo)

monorepo는 한 repository에 여러 프로젝트를 저장하고 관리하는 소프트웨어 개발 전략 중 하나이다.

 

 

 

 

 

 

 

아래 그림은 mono-repo 외에 monolith, multi-repo에 대한 설명을 알기 쉽게 보여주고 있다.

 

기존에는 주로 프론트/서버 프로젝트를 Multi-repo 구조로 구성했었다. 사실 나는 mono-repo 보다는 multi-repo를 더 선호하는 타입이다. 아무래도 한 레포지터리에 여러 프로젝트가 들어가있다보면 무거워지고, 특히 공동 작업을 할 때 풀받아야되는게 많다보니... 충돌이라도 일어나면 stash에 작업한거 옮기고 풀받고 다시 덮어씌우는 일이 반복되면 너무 귀찮다ㅠㅠ

 

하지만 이번 프로젝트는 서버를 제외한 프론트 + 마크업 프로젝트들만 모아두고 있기 때문에, monorepo 구조로 가도 괜찮을 것 같았다.

그리고 공통으로 사용하는 컴포넌트들은 라이브러리로 빼서 사용해도 될 것 같고..!

 

 

 

 

 

 

Monorepo 프로젝트 만들기

https://nx.dev/angular

Nx: Extensible Dev Tools for Monorepos

Nx.dev에서는 현재 Angular와 React를 이용해 프로젝트를 생성할 수 있는 가이드를 제공하고 있다. 그 중에서 나는 Angular를 선택했다.

 

 

 

Library에서 만든 Component 사용하기

튜토리얼을 통해 공통으로 사용할 코드들을 lib 폴더에 추가한다. 나는 공통 컴포넌트를 관리할 'ui-component' 라는 이름을 가진 컴포넌트 라이브러리를 추가했다.

 

만약, interface와 같은 파일을 여러 프로젝트에서 사용하고 싶다면 아래 튜토리얼을 따라하면 된다.

https://nx.dev/angular/tutorial/07-share-code

Step 7: Share Code

 

만약 Component를 여러 프로젝트에서 사용하고 싶다면 아래 튜토리얼을 따라한다.

https://nx.dev/angular/tutorial/08-create-libs

Step 8: Create Libs

 

 

⚠️
처음엔 monorepo 프로젝트를 튜토리얼을 보고 만들었지만, 라이브러리 추가하는 건 vscode에서 제공하는 Nx console을 이용했다. 그랬더니 라이브러리에 Component를 추가해도, 실제 프로젝트에서 사용하려고하니 보이지 않았다.
구글링해보니 라이브러리 내 컴포넌트를 만들 때, export가 빠져있던게 원인이었다.
{라이브러리 내 컴포넌트명}.module.ts 파일을 열고 아래와 같이 수정하면 정상적으로 나온다.