TIL 2022-04-28 monorepo, global css Nextjs 문제

monorepo

 

레포지토리를 하나로 합침으로써 얻는 장점

 

-> 중복되는 CI/CD 설정, 코드 등을 쉽게 재사용 가능!

-> 편의성이 좋음. 한 폴더 내에서 슉슉 찾기 가능!

-> 중복되는 모듈 하나만 설치 가능! 가벼움!

 

 

단점

-> conflict에 아무래도 더 취약해짐,

-> dependency 문제 해결해야함

 

 

그리고 pnp를 사용하는 yarn berry에서는 잘 지원을 하지 않는듯하다. 최근에 Turborepo에서 나오긴 했는데 바로 이슈 생긴거 보면 시기상조인거 같고.... node_modules를 사용할때 더 효과적인듯

 

yarn, npm에서 기본적으로 workspace라는 기능을 지원해서 이를 사용해 모노레포를 구성할수도 있다.

 

 

혹은 NX, Turborepo, lerna 등의 관리툴을 사용할 수 있음.

 

 

NX에서는 Generator라는 개념을 통해서 반복되는 작업을 자동화할 수 있으며, Cloud Cache를 통해서 팀원 간의 캐쉬 공유를 통해 더 빠르게 빌드할수 있음.

 

또한 플러그인 생태계가 굉장히 활발해서 이를 사용해 도움을 받는것도 가능하다.

 

Turborepo는 Vercel에서 인수하여 최근에 시작한 프로젝트로 NX의 장점들만 가져와서 더 쉽게 설정할수 있게 하는 것이 모토임.

 

그러나 서비스를 시작한지 그렇게 오래되지 않아 아직까지 NX에서 지원하는 기능(Generator)을 지원하지 않거나, NX에 비해서 크고 작은 이슈들이 자주 생김.

 

장점으로는 Next.js, SWR을 서비스하는 Vercel이기에 성장가능성이 엄청 높다는것.

 

 

 

Next.js Global css 문제

 

프로젝트 내부에서 사용하던 디자인 시스템을 외부 라이브러리로 빼는 작업을 하였었음.

 

작은 컴포넌트들을 빼서 프로젝트에 적용하는 작업을 해보았는데, Next.js에서

 

global css cannot be imported from within node_modules

요런 문제가 발생했음.

 

이를 해결하기 위해서는 아예 next.js단에서 css, 그리고 컴포넌트를 별도로 불러와줘야함.

 

대표적으로 antd에서 app.js에 antd.main.css(제대로는 기억안남)을 호출해서 전체 css를 가져오고

 

컴포넌트는 또 컴포넌트만 별도로 가져오는 방식.

 

 

Next.js에서 global css를 import해서 crash생기는 문제를 방지하기 위해서라는데, 너무너무 불편하다.

Gatsby, CRA 등에서는 허용해주는데, config 상에서라도 풀 수 있는 기능이 있어야...