Nx React Standalone 사용 리뷰

 

---

 

프로젝트가 커지면 어떻게 해야 효율적으로 관리할지가 항상 고민입니다. 현재 작업하고 있는 프로젝트가 여러개의 프로젝트로 분리될 수 있음에도 불구하고 하나의 repo에서 관리되고 있고, 오랜 시간 지나면서 코드가 뒤죽박죽 섞여버렸습니다. 그래서 재설계를 진행하면서 효율적인 관리 방법으로 monorepo를 사용하였습니다.

 

Monorepo의 장점은 간단히 말해 같이 사용하거나, 비슷한 프로젝트를 관리하기 쉽다 입니다. 이에 대한 내용은 아래 링크에서 아주 잘 설명되어있습니다. 꼭 참고하시기 바랍니다.

https://d2.naver.com/helloworld/0923884

 

Monorepo 도구로 Nx를 채택하였습니다. 그 중에서 React Standalone 방식을 사용하였습니다. 여러개의 프로젝트를 하나의 monorepo로 묶지만, 이 프로젝트들은 하나의 React 앱에서 사용하기 때문입니다. 굳이 monorepo로 만들어야 하나하는 고민을 하면서 찾게된 아주 좋은 방법입니다.

 

Nx React Standalone 방식의 가장 큰 장점은 affected 기능인 것 같습니다. 수정사항이 있는 부분만 테스트하고, 빌드하여 CI 시간은 확실히 줄일 수 있습니다. 그리고 VSCode에서 Nx Console Extension을 사용하면 CLI가 아닌 GUI 방식으로 Nx 명령어를 사용할 수 있습니다.

 

빌드시에는 dist 폴더에 root 프로젝트에서 사용하는 프로젝트들만 빌드 됩니다. 배포시에는 dist 폴더에 빌드된 root 프로젝트 이름의 폴더에 있는 index.html을 타겟으로 하면됩니다.

 

저는 이 방식을 사용하여 React State Management 도구 비교 사이트를 만들고 있습니다.

https://devcon.zakklee.com/