모노레포 전환기
기존 A 프로젝트를 클론하여 B, C, D 프로젝트로 파생시키면서, 약간의 차이는 있지만 기본적인 기능에서 A 프로젝트에 도입되는 것은 다른 프로젝트에도 추가 적용해야 했습니다. 그러나 각기 다른 레포지토리에 위치해 있어, 한 프로젝트에서 수정을 마친 후 다른 프로젝트에서 DIFF를 이용해 동일하게 옮겨주는 작업을 해야 했습니다.
결국 재사용되는 코드를 계속해서 다른 프로젝트에 하나씩 붙여 넣는 작업은 시간이 지남에 따라 프로젝트가 추가될수록 점점 더 많은 시간을 소모하게 되었습니다. 이를 해결하기 위해 코드 재사용 방식을 고민하던 중, 모노레포 방식을 발견했고 이를 지원하는 도구 중 터보레포를 선택하게 되었습니다.
모노레포란?
모노레포(Monorepo)는 여러 프로젝트가 하나의 저장소에 포함되어 관리되는 구조를 의미합니다. 이를 통해 공통 코드를 쉽게 재사용하고, 프로젝트 간의 종속성을 더 쉽게 관리할 수 있습니다.
어떠한 도구를 사용할지?
처음에는 모노레포 도구로 NX를 선택했습니다. NX는 프로젝트 규모가 커지더라도 확장성과 다양한 기능을 제공해 유리하다고 판단했으며, 검색 시 NX 관련 자료가 많아 선택하였습니다.
NX프로젝트 시도 과정 1
NX프로젝트 시도 과정 2
NX를 사용하지 않은이유
기존 프로젝트는 CRA(Create React App)와 SCSS로 구성되어 있었습니다. NX와의 호환성 문제와 프로젝트 구조 변경의 복잡성 때문에 터보레포를 선택하게 되었습니다.
터보레포란 ?
터보레포(Turborepo)는 모노레포를 관리하기 위한 도구로, 여러 프로젝트를 하나의 저장소에서 관리하며 공통된 코드와 설정을 쉽게 재사용할 수 있게 해줍니다.
전환방법
기존 CRA 프로젝트를 클론한 후 VITE로 전환하고 파일 확장자를 .js에서 .jsx로 변경하였습니다.
왜 VITE로 전환하였는가
기존 CRA는 번들링 시 BABEL을 사용하여 최신 JS를 구형 브라우저에서도 호환 가능하게 해주었으나, 터보레포에서는 이를 지원하지 않았습니다. 대체재로 선택한 VITE는 다음과 같은 장점이 있습니다:
HMR(Hot Module Replacement) 제공
애플리케이션을 재시작할 필요 없이 수정된 부분만 갱신합니다.
수정된 모듈만 교체하여 브라우저는 필요한 모듈만 전달받습니다.
빠른 번들링
전통적인 번들러는 소스 코드가 업데이트될 때마다 전체 번들링 과정을 다시 거쳐야 하지만, VITE는 이를 대폭 간소화합니다.
효율적인 캐시 기능
HTTP 헤더를 활용하여 페이지 로드 속도를 높입니다.
304 Not Modified와 Cache-Control: max-age=31536000, immutable을 사용하여 디펜던시의 캐시를 최적화합니다.
