# monorepo

heisje

서론 TurboRepo로 monorepo 프로젝트를 구축 중에 webstorm에서 git clone으로 프로젝트를 새로 열었다.. 근데 프로젝트 인식이 안되서 파일을 수정할 때마다 경고표시가 뜬다. 수정해보자. 에러 아래와 같이 노란색으로 표시되면서 폴더가 보이지 않는다. 해결법 webStorm의 설정/디렉터리에서 콘텐츠 루트 추가를 선택한다. monorepo root폴더를 찾아 열어준다. ![](https://velog.velcdn.com/images/heisje/post/35c7b643-b9a7-4f93-80

ninthsun91

pnpm 혹은 yarn berry으로 모노레포 프로젝트를 사용하다보면 심심치 않게 등장하는 에러다. 원인 원인은 간단하다, 의존성을 hoisting하여 평면적으로 설치하여 관리하는 npm이나 yarn과는 다르게, pnpm은 간접적인 의존성, 즉 X라는 의존성을 설치했을 때 X가 의존하는 Y들은 .pnpm이라는 경로 아래에 따로 설치하고 심볼링크를 통해 접근한다. 이 때문에 간혹 Y에 있는 타입을 사용하려할 때 타입스크립트에서 경로를 찾아가지 못하는 문제가 발생하곤한다. 그리고 이 문제는 tsconfig에서 "declaration": true 설정을 하는 경우에만 발생한다. 단순히 실행코드에서는 타입스크립트의 컴파일러가 함수의 매개변수나 리턴값 등을 찾아가면서 타입을 추론해주지만,

yjw8459

lerna로 CHANGELOG 생성 lerna를 사용하여 MonoRepo의 CHANGELOG를 자동화 한다. MonoRepo 구조 lerna로 관리할 프로젝트는 packages 하위에 위치한다. @docs/note, @webapp/todo lerna를 통한 CHANGELOG를 생성하면, 변경 사항에 따라 각 하위 패키지 별로 별도의 버전을 생성한다. CHANGELOG 자동화를 위한 commintlint, husky 설치 commitlint husky conventional-commit을 위한 commitlint와 이를 git hook에서 사용하기 위해 husky를 설치해야한다. Git Hook git에서 특정 이벤트 (commit, push, etc)가 발생했을 때, hook을 통해 특정 스크립트를 실행할 수 있도록 도와준다. husky.config.ts 파일 작성 commitlint.confi

yjw8459

NX 확장 가능한 모노레포를 위한 도구 프레임워크의 성격이 짙다 기존 모노레포의 워크 플로우를 개선하거나 도와주는 툴이 아닌, 모든 워크 플로우를 탑재한 워크 스페이스, 저장소를 생성해서 써야 한다. CLI로 많은 기능을 제공 특정 패키지 또는 여러 패키지의 스크립트를 실행하는 기능 현재 커밋을 기준으로 영향을 받는 패키지에 대해서만 실행할 수 있는 기능 제공 MonoRepo 안에 Next.js, NestJS, React 등 여러 프레임워크 사용 가능 해치를 벗어나는 순간 어렵다. NX는 MonoRepo를 관리하는 plugin들을 제공하며 빠르게 project를 구성할 수 있도록 한다. Dependency Graph, StoryBook, Testing-Library 등 기능을 제공한다. Dependency Graph

yjw8459

Yarn Workspace NodeJS에서 MonoRepo를 관리하는 대표적인 방법으로 Lerna & Yarn Workspace Lerna는 각 패키지들을 배포하고 버전 관리하는 역할을 한다. yarn은 각 패키지 간의 의존성 관리 역할을 한다. lerna 로도 의존성 관리를 할 수 있지만, 패키지 관리 시 이슈가 존재해서 각 도구가 서로 잘하는 역할만 하도록 설정한다. 디렉터리 구성 lerna.json 프로젝트 lerna 구성 package.json 하위 프로젝트들이 공통으로 사용할 dependencies 선언 프로젝트 전체를 대상으로 하는 script packages 하위 프로젝트들이 담길 상위 디렉터리 수동/lerna create 패키지명 으로 자동 생성 모두 가능 패키지 추가 삭제 project1에 패키지를 추가하고 싶은 경우 : yarn workspace project1 add [

dmswl98

틀릴 수 있음 주의 😅 turborepo 환경에서 chromatic으로 storybook을 배포하는 실습 과정을 그대로 나열한 글입니다. > 💥 먼저 해당 레포에 storybook이 설치되어 있어야 합니다. chromatic 우선 chromatic 페이지에서 로그인 후, chromatic 설정을 원하는 레포를 선택한다. 특정 organization이 보이지 않는다면 하단에 Check permissions를 눌러 해당 organization 접근을 허용시키면 된다. chromatic 설치 루트에서 터미널에 아래 명령어를 실행시킵니다. pnpm --filter [설치할 repo] add -D chromatic > 예시:

ninthsun91

프로젝트 트리 ©generated by Project Tree Generator turborepo에서 위와 같은 구조의 풀스택 프로젝트를 만들 때, types에 공용 타입들을 정의하고 각 워크스페이스에서 export 없이 글로벌로 타입을 사용해서 쓰려한다. types 워크스페이스 설정 types 디렉토리를 만들고, 초기화를 하고, 필요한 패키지를 설치한다. 그리고 tsconfig를 base.json에서 가져온다. package.json main과 types 경로를 빌드한 이후로 잡아줘야한다. types 작성 필요한 타입들을 작성해 넣는다.

cyheum

이미지 출처 새로운 프로젝트를 시작하기 앞서서 프로젝트의 구조를 어떻게 짤지 고민을 많이 하게 됐다. 3가지의 프로젝트를 진행하는데 비슷한 ui와 같은 api를 쓰는 것들이 많았고 자주쓰는 hook 들과 style들을 각각의 프로젝트마다 붙여넣는 것은 생각보다 비효율적인 것 같았다. 그래서 모노레포라는 것을 들어는 봤지만 깊이 알지는 못해서 자료를 찾아봤다. lerna yarn workspace nx npm workspace rush 등등 모노레포를 위한것들이 꽤나 많이 있었다. 그중에서 lerna와 yarn workspace를 같이 사용해서 모노레포를 구성하였다. yarn 설치 Lerna 설치 먼저 이렇게 yarn과 lerna를 설치해 주었다. 그리고 루트에 있는 packag

ckstn0777

Overview 저번 시간에 Module Federation 글에 연장선으로 이번 시간에는 Monorepo에 대해 알아보도록 하겠습니다. 모노레포 또한 대규모 웹 애플리케이션 개발 시 자주 언급되는 방법론인거 같습니다. 그만큼 토스, 라인 등 여러 회사에서 채택되어 사용되고 있습니다. 저는 대규모 애플리케이션을 경험할 일이 없었고, 지금 알아보고자 하는건 모노레포로 설계하고 개발하는 것은 어떨지 알아보는 단계에서 작성한 글입니다. 다소 부족한 글이지만 그냥 아는대로 작성해보도록 하겠습니다. Monorepo 란? 모노레포를 설명하기 위해 모놀리식? 멀티레포? 와 같이 비교해서 알아보면 좋을 거 같습니다. ![

kandy1002

곧 참여할 프로젝트가 Turborepo와 pnpm을 활용한 모노레포로 구성되어 있기 때문에, 이전까지 Turborepo에 대한 개념을 짚고 넘어가고자 아티클을 작성하게 되었다! Turborepo Turborepo는 Vercel에서 인수한 JS/TS 기반의 모노레포 빌드 시스템이다. 최근 화두가 되었던 MSA와 여러 개의 MSA를 효율적으로 관리하기 위한 방법으로 모노레포가 떠오르게 되었는데, turborepo를 통해 이를 효율적으로 구축하는 방법에 대해 알아보자. Vercel과 Turbo가 말하는 Turborepo의 역할은 모노레포 환경 내에서 개발자가 개발에 더 집중할 수 있도록 빌드 도구를 제공하는 것에 있는데, 다양한 툴을 활용한 고급 빌드 시스템을 구축하는 일련의 복잡한 과정들을 Turborepo가 대신 수행해 줌으로써 개발자가 온전히 개발에 더 집중할 수 있도록 도와준다. Turborepo의 특징 Turborepo 공식문서에서 말하고 있는 Turbor

3dayc

Issue maimovie 프로젝트를 담당하고 있는데, 기존에 구축되어 있던 환경, 빌드, 배포 등 전반적으로 복잡한 내용이 많아서 회사 내에서 공유할 목적으로 문서화 작업을 진행하고자 한다. Problem 마이무비 프로젝트는 총 3개의 리포지토리에서 관리되고 있음 마이무비 영문 1개(maimovie) 마이무비 국문 2개(monorepo-maimovie, maimovie-ko) 국문버전을 모노레포 방식으로 점진적으로 전환(nuxt.js > next.js)하고 있어 리포지토리가 2개 국문 중 main, notice, privacy, terms 페이지만 Next.js(monorepo-maimovie), 나머지 페이지는 Nuxt.js(maimovie-ko) 국문(Nuxt.js) 소스코드를 로컬에서 띄우면 나오는 첫페이지는 **에

youseon__

Monorepo란 ⭐ 여러개의 개발 프로젝트를, 잘 정의된 관계를 통해서 하나의 Repo에 담은것 새 project를 만드는데 편리 쉽게 다른 project에 기여 가능 monorepo와 monolith repo는 다름. Monolithic은 project 끼리 분리가 안되있고 거대하지만 Monorepo는 repo만 하나 일 뿐 project끼린 분리가 잘 되어 있다. 페이지를 구분 없이 섞어서 구성하고 마구잡이로 참조해 독립이라는 느낌이 안드는 모듈화 없는방식이 Monolitic Repository라고 한다면, Monorepo는 페이지가 같은 리포지토리에 있지만 확실히 구분을 짓는다. 서로 패키지처럼 참조하도록하고 코드 내부에는 참견하지 않도록 구성한다. ⭐ 핵심은 모듈화 각 기능을 모듈로 잘 분리함으로써 캡슐화를 이룰 수 있다 기능이 잘 분리되어있으므로 대규모 프로젝트에서 수많은 코드를 들춰봐야 하

easymean

pnpm workspaces를 사용하여 React TS & tailwindcss를 적용해보자. monorepo 설정 구조 설계 프로젝트마다 다르지만 보통 두 타입의 구조가 존재한다고 한다. package centric 오픈소스 코드(Angular, React, Vue 등)에서 자주 사용하는 구조로 재사용가능한 패키지를 개발/배포하는데 중점이 둔다. 보통 package 폴더가 있고 npm과 같은 public registry에 게시되는 것이 특징이다. app centric 기업에서 일반적으로 사용하는 구조로, 어플리케이션이나 제품의 개발이 주 목적이다. apps,

youngkiu

npm workspaces - https://docs.npmjs.com/cli/v7/using-npm/workspaces yarn workspaces - https://classic.yarnpkg.com/lang/en/docs/workspaces/ lerna - https://lerna.js.org/ turborepo - https://turbo.build/ 참고) https://d2.naver.com/helloworld/7553804 https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo

eunseo814

모노레포 모노레포란? 버전 관리 시스템에서 두 개 이상의 프로젝트 코드가 동일한 저장소에 저장되는 소프트웨어 개발 전략, 분리된 모듈들은 모노레포에서 여전히 독자 프로젝트로 존재하지만 저장소는 같은 곳을 사용한다. 모노레포의 특징 프로젝트 간의 관계 단순히 여러 프로젝트가 하나의 저장소를 사용한다고 해서 모노레포 구조라고 부르기에는 부족하다. 흔히 모노레포에서는 프로젝트 사이에 의존성이 존재하거나 같은 제품군이거나 하는 정의된 관계가 존재한다. 모노레포가 해결하는 멀티레포의 문제 더 쉬운 프로젝트 생성 모노레포에서는 저장소 생성 및 커미터 추가 과정이 필요 없고, 개발 환경, CI/CD, 빌드, 게시 등의 과정에 기존 DevOps를 이용하므로 새 프로젝트 생성에 대한 오버헤드가 없다. 더 쉬운 의존성 관리 의존성 패키지가 같은 저장소에 있으므로 버전이 지정된 패키지를 npm registry와 같은 곳에

bluejoyq

개요 레퍼런스 정말 감사합니다. https://velog.io/@projaguar/Yarn-3-MonoRepo-with-Typescript-Next.js-Nest-React-Native 특히 이 글을 많이 참조했다. https://techblog.woowahan.com/7976/ https://github.com/adiun/vite-monorepo/tree/main 목적 출처 [https://github.com/Dodecane/klaykit/tree/main/packages](https://github.com/Dodecane/

resyve

MONOREPO와 MULTIREPO, 우리는 프로젝트가 작을 때는 하나의 레포지토리로 프로젝트를 관리하지만, 커지면 커질수록 하나에서 관리할 지 나누어 관리할 지를 정하게 되는데, 프로젝트 내부의 개별 레포지토리에서 관리할 것인지, 하나의 레포지토리에서 관리할 것인지에 따라 이름이 달라집니다 하나의 레포지토리에서 관리하는 것을 MONOREPO, 개별 레포지토리에서 관리하는 것을 MULTIREPO라고 정의합니다 MONOREPO와 MULTIREPO의 장점 | | MONOREPO | MULTIREPO | |:---:|---|---| |          장점 |지속적인 소스의 무결성 보장 : 레포지토리는 항상 모든 서비스가 연동된 올바른 상태를 유지한다 | 강한 오너쉽 확보 : 레포지토리 별로 오너를 지정할 수 있다 | | |**통합된 버

easymean

monorepo란? monorepo란 싱글 레포지토리에 잘 정의된 관계를 가진 여러 다른 프로젝트들이 있는 것을 말한다. 모놀리식과는 다르다! polyrepo 모노레포에 반대되는 개념으로 polyrepo가 존재한다. 폴리레포는 일반적으로 어플리케이션을 개발하는 방법으로, 팀마다 제품마다 혹은 프로젝트마다 레포가 존재하는 것을 의미한다. 그래서 보통 각 레포는 하나의 빌드 결과물과 하나의 빌드 파이프라인을 가지게 된다. 폴리레포를 사용하는 가장 큰 이유는 팀의 자율성이다. 팀에서 자체적으로 어떤 라이브러리를 선택할 건지, 언제 배포할 건지를 정할 수 있기 떄문이다. polyrepo의 단점 복잡한 코드 sharing과 코드 중복 폴리레포 환경이라면 레포지토리 간의 코드를 공유하기 위해서 shared code(

park0eun

모노레포 (monorepo) 버전 관리 시스템에서 두 개 이상의 프로젝트 코드가 동일한 저장소에 저장되는 소프트웨어 개발 전략 모노레포로 운영중인 회사들 : Google, Meta(Facebook), MicroSoft, Uber, Airbnb, Twitter 등.. 👉 모노레포를 사용하는 이유 거대 서비스를 개발할 때, 소스 코드가 모듈화 없이 하나의 프로젝트로 구성된다면, 코드가 서로 직접적으로 의존하며 단 하나의 버전으로 관리되면서 관심 분리(separation of concerns)가 어려워지고, 설계, 리팩터링, 배포 등의 작업을 매번 거대한 단위로 처리해야 하므로 개발상 많은 제약과 비효율적이게 된다. 모노레포는 하나의 기때문에 더욱 효율적으로 관리할 수 있다. 👉 모노레포의 특징 각 프로젝트는 자율성

hwon3814

프로젝트 시작 계기 안녕하세요. 아이웨딩에서 스드메(스튜디오,드레스,메이크업) 스케줄 관리가 생겼고, 스케줄 관리를 서비스운용팀에서만 관리하기 힘들어 협력사와 힘을 합쳐 스케줄 관리를 하기로 하였다. 협력사는 로그인 및 사용이 불편하면 사용을 잘 안한다. >조건 1. '아이웨딩'과 다른 도메인 조건 2. 핸드폰 인증으로만 로그인하는 간편로그인 조건 3. PC버전으로 프로젝트 생성 모든 조건을 고려하고 추후에 협력사가 모든 스케줄을 관리하는 '아이웨딩B'라는 시스템이 도입되면 결국엔 '아이웨딩'과 분리하여 프로젝트를 진행을 해야한다. 모노레포 Init 셋팅 처음 레포는 총3개로 시작을 하고 추후에 아이웨딩(웹뷰), 아이컬러(웹뷰), 아이웨딩B 점점 추가 할 예정이다. 모든 스택은 NextJS로 만들어지기 때문에 쉽게 추가가 가능할 거 같다. 1. 자신이 원하는 경로에 원하는 폴더명 폴더 생성한다. > cd Document > mkdir iweddingB