[원티드 프리온보딩 챌린지 5월] 모노레포 개념 정리&강의 후기

원티드 프리온보딩 프론트엔드 챌린지 5월
모노레포 개념 정리&강의 후기

 

 

프리온보딩 프론트엔드 챌린지 5월 | 원티드

 

 

모노레포는 이름만 몇 번 들어봤는데 개념이 잡히지 않았던 내용이었다. 마침 매달 듣던 원티드 프리온보딩 과정의 5월 주제가 모노레포이기에 얼른 신청했다. 지난 타입스크립트 강의도 유익하게 잘 들었기에 프리온보딩 챌린지는 항상 믿고 듣는다. 첫 주차에는 모노레포가 어떤 개념인지, 어떤 장점을 가지고 있는지 이론을 머리에 집어넣었다. 마지막 주차에는 깃허브 액션과 터보레포 사용법을 알아보고, 오픈 소스를 분석했다. 이 글에서는 강의를 들으며 배운 모노레포에 관한 지식과, 강의 후기를 적어보려 한다.

 

 

---

 

 

🔖 모노레포 개념

모노레포(단일 저장소)는 여러 프로젝트의 코드가 동일한 저장소에 저장되는 소프트웨어 개발 전략이다. 단일 저장소에는 여러 개의 독립적인 프로젝트가 포함될 수 있으며, 여러 개의 개별 프로젝트를 잘 정의된 관계를 통해 하나의 레포에 담은 방식이다. B2C, B2B, 어드민을 통합할 수 있다. 

 

초기 환경 설정이 어렵고 오래 걸린다는 단점이 있지만, 한 번 환경을 잘 구축해두면 이후에 편리하다. 함수를 분리해서 모듈화하여 사용하는 것처럼, 모노레포에서는 프로젝트를 패키지로 나누어 관리한다. 예를 들어 달력 기능을 구현하는 유틸리티 함수를 구현하고, 이를 패키지화해서 다른 프로젝트에서 라이브러리처럼 사용할 수 있다. 

 

모노레포와 폴리레포의 구조

 

모노레포의 문화적 의의

모노레포를 도입하면 동료와 상호작용하고 성장할 수 있다는 장점이 있다. 하나의 레포이기 때문에 주인 의식이 생겨서 다같이 개선될 수 있다. 코드를 잘 작성하는 동료의 코드를 보면서 배울 수 있고, 엔지니어 사이의 교류가 활발해진다. 모노레포가 즐겁게 일할 수 있는 개발 환경을 만든다.

 

 

테스트 코드의 중요성

리팩토링을 해야 소프트웨어의 기대수명이 늘어난다. Nextjs 등 버전이 업그레이드 되었을 때 업그레이드하는 팁은 테스트 코드를 작성하는 것이다. 

• 테스트는 프론트에서 다 작성하며, 회사에 따라 QA팀에서 E2E 테스트를 진행하기도 한다.
• 주로 jest, 테스팅 라이브러리를 사용한다.
• 유닛 테스트의 경우, 테스트 코드를 작성하기 어려우면 챗GPT에 코드를 붙여넣고 '아래 코드 테스트 커버리지 100%로 작성해줘' 등으로 명령할 수 있다. 구체적으로 작성할수록 결과가 좋은데, '라이브러리는 jest를 사용한다' 등을 적어주면 좋다. 챗GPT는 영어가 더 잘 먹히기 때문에 영어로 명령하는 것이 더 좋은 효과를 낼 수 있다.
• cicd에서 시간이 오래 소요될 경우, 개선이 필요할 수 있다.
  • vitest를 사용하면 빠르다.(vitest는 웹 ui로 제공해서 보기 편리)

 

 

 

🔖 모노레포의 변천사

1. 모놀리식(monolithic) 애플리케이션
2. 멀티레포 (=폴리레포)
3. 모노레포

 

모노레포의 변천사

 

 

📌 모놀리식 애플리케이션

우선 '모놀리식'의 단어 뜻을 살펴보자. 모노리스 Monolith 라는 명사에 -ic를 붙여 형용사화 한 것이 모놀리식이다. 모노리스는 '하나의 돌 '이라는 의미로, 여러 재료가 섞인 것이 아니라 한 덩어리의 석재로 이루어졌을 때 모노리스라고 부른다. 예시로는 호주의 울룰루나 이집트의 스핑크스 등이 있다. <2001 스페이스 오디세이> 영화에 등장하는 커다란 검정색 돌기둥도 모노리스라고 부른다. 

 

🔗 위키피디아 Monolith 검색결과

🔗위키피디아 모노리스 (스페이스 오디세이) 검색결과

 

모놀리식 애플리케이션이란 위의 <모노레포 변천사> 이미지에서 보이듯 이렇게 큰 하나의 돌기둥 모양에 모든 것을 집어넣어 만든 설계 방식이라 할 수 있다. 전체적으로 변화의 흐름이 이해가 잘 안 되어서 일상 예시로 바꾸어봤다. 모놀리식 애플리케이션은 모듈화 없이 설계된 애플리케이션 방식이다. 대규모 음식을 만드는 경우를 떠올릴 수 있다. 모든 것을 한 솥(레포)에 넣고 사용하기 때문에 빠른 환경 구축이 가능하지만, 관심사별로 분리가 되어있지 않기 때문에 하나의 변경이 다른 서비스에 영향을 주고, 서비스별로 배포를 할 수 없다. 

 

모놀리식 토마토 페이스트/출처 : 유튜브 Kənd Həyatı <할머니의 비밀 맛있는 토마토 페이스트 레시피>

 

장점	단점
빠른 아키텍처 구축 가능 의존성 라이브러리 버전 통일 관리 비용 절감 공통 코드를 자유롭게 반영	하나의 변경이 다른 서비스에 영향을 줌 관심사 분리가 어려움 서비스별 배포 불가

 

 

📌 멀티레포

모놀리식 애플리케이션에서 관심사 분리가 어렵다는 단점 때문에 멀티레포가 나왔다. 멀티레포는 폴리레포라고 불리기도 한다. 관심사를 모듈화해서 여러 저장소로 구축하는 방식이다. 하나의 솥에서 끓이던 요리를 여러 개의 냄비로 나눠 끓이는 것을 생각하면 된다. 서비스별로 독립된 환경을 가지고 있어서 한 곳에서 변경이 일어나도 다른 서비스에 영향을 끼치지 않는다. 그렇지만 각각의 서비스마다 매번 새로 환경 구축을 해야 하고, 여러 저장소로 나뉘어있다보니 코드 컨벤션을 통일하기가 어렵다. 

 

마이크로 서비스 개념이 등장한다.(멀티레포 ≠ 마이크로 서비스)

 

모노레포와 반대되는 개념이라고 할 수 있다. 

모노레포(Monorepo) ↔️ 폴리레포(Polyrepo)

• 모노레포 : 하나의 레포에 다 집어넣은 것
• 폴리레포 : 하나의 팀이 하나의 레포를 사용하는 것

 

 

멀티레포 슈의 라면가게

 

장점	단점
서비스별 독립된 환경 하나의 변경이 다른 서비스에 영향 주지 않음 서비스별 배포 가능	매번 새로 개발 환경 구축이 필요 일관되지 않은 코드 컨벤션 중복코드 발생 라이브러리 버전 변경에 따른 의존성 관리

 

 

📌 모노레포

여러 프로젝트의 코드가 하나의 저장소에 저장되는 방식이다. 모놀리식의 장점 + 폴리레포의 장점이 합쳐졌다. 단일 레포에서 함께 관리하기 때문에, 불필요하게 매번 새로 환경 세팅하고 중복된 코드를 작성하지 않아도 된다. 관심사 분리와 모듈화가 되어있기 때문에 각 서비스별로 영향을 미치지 않는다. 여러 개의 육수로 즐길 수 있는 분리된 훠궈 냄비나 3구 계란후라이 프라이팬 등을 생각하면 된다. 같은 가스불을 사용하기 때문에 에너지 손실이 적고 관리할 화구가 줄어든다. 그렇지만 각각 독립된 영역이 있어서 원하는 요리를 할 수 있다. 

 

모노레포 훠궈 냄비, 모노레포 프라이팬

 

장점	단점
매번 새로 레포를 생성하고 환경 세팅하는 낭비를 줄임 디자인 시스템을 적용하기 편리 동료의 코드를 볼 수 있어서 팀 단위로 소통이 좋아짐 잘 하는 사람의 코드를 보고 배울 수 있음 본인 담당 프로젝트가 아니더라도 개선의 여지가 있으면 자유롭게 수정 가능	개발 환경을 구성하는 데 리소스가 많이 듦(장점이자 단점) 대규모 리팩토링이 쉬움(장점이자 단점) 코드 관리의 어려움(코드 소유권 문제)

 

 

Monolith vs Microservices

 

Monolith ➡️ Microservice 전환하기

가능한 Monolith을 유지하고, 작은 서비스가 아닌 큰 서비스를 분리하자. 멀티레포는 마이크로 서비스가 아니다. 마이크로 서비스는 서비스들을 모듈단위로 작게 쪼개서 관리하는 방식이다.

 

 

 

🔖 Yarn Berry 모노레포

Yarn Berry와 pnpm은 모노레포를 구성하기 위한 기능을 제공한다. 패키지 매니저에서 워크스페이스라는 기능을 제공하는 것이다. yarn1도 워크스페이스를 지원한다.

 

workspace

Workspaces

워크스페이스란 모노레포 내부의 각각의 프로젝트를 의미한다. 커다란 공유 오피스 안에 A 회사 사무실, B 회사 사무실 등이 있는 것과 같다. 

 

Yarn workspace는 모노레포 작업을 쉽게 만들 수 있도록 돕는다. 여러 프로젝트가 동일한 저장소에 함께 있고, 서로 참조가 가능하다. 하나의 소스 코드에 대한 수정 사항이 다른 프로젝트에 즉시 적용되는 장점이 있다.

 

 

 

🔖 터보레포

터보레포는 모노레포 툴 중에 하나이다. 모노레포 툴은 설정, 구성, 성능 등을 최적화 시켜주는 도구다. 로컬에서 빌드 캐시, 라이브러리 버전 업데이트 자동화 등을 돕는다. Yarn Berry의 워크스페이스를 한 겹 싸고있다고 이해하면 된다. 자바스크립트 진영에서는 러나(Lerna), 터보레포, Nx를 주로 사용한다.

 

모노레포 도구

 

 

설치 방법

Creating a new monorepo

npx create-turbo@latest 명령어를 이용해서 금방 세팅을 마칠 수 있다.

 

 

Yarn Berry vs 터보레포

• Yarn Berry, pnpm : 모노레포를 구성하기 위한 기능을 제공하는 것
• 터보레포, Nx : 모노레포 도구

 

설치가 간단하고 금방 끝나기 때문에 인력이 적고 시간이 없을 때 사용할 수 있다. 신입은 터보레포를 사용해서 프로젝트 할 경우 cicd도 쌓이고, 점차 발전하는 모습을 보여줄 수 있어서 좋다.

 

 

 

🔖 오픈 소스 모노레포 분석

오픈소스는 선생님이다.

 

컴포넌트를 나누는 방법, 스타일링 등을 오픈 소스를 통해 배울 수 있다. 좋은 패턴이 있으면 참고해서 따라해보고 인사이트를 얻을 수 있다. 많이 읽는 연습을 해보고 공부하는 패턴을 찾으면 빨리 성장할 수 있을 것이다. 

 

• package.json을 먼저 볼 것 
• husky, lint staged 참고
• 폴더 구조 : src 폴더 사용 등 힌트 얻기 
• 공통화 처리 : tsconfig등을 어떻게 처리 했는가
• JSDoc : 그냥 보면 어려운데 오픈소스로 보면 이해 잘 됨 (⚠️ 복붙하지말고 직접 타이핑 해야 공부됨)

 

 

 

실습 링크 

🔗 모노레포 : yarn-berry

GitHub - ShinjungOh/monorepo-yarn-berry: Yarn Berry로 구성한 모노레포입니다.

 

🔗 모노레포 : turbo-repo

GitHub - ShinjungOh/monorepo-turbo-repo

 

 

---

 

 

5월은 모노레포를 학습하고 개념을 익혔다. 다른 사람에게 설명할 수 있을 만큼 여러 번 복습했다. 강의도 재미있었다. 특히 멘토님이 강의를 정말 매끄럽게 진행하셨다. 실시간 강의란 생각대로 흘러가지 않고 자꾸 변수가 생기기 마련이다. 원래 이럴 때는 진행자가 조금 당황하거나 흐름이 끊겨도 이상하지 않을 상황인데도 물 흐르듯 강의를 진행하셔서 존경스러웠다. 이것이 시니어의 여유인가...! 강의를 마치고 나서도 다른 참가자 분들이 다 나가실 때까지 배웅해주시는 다정함에 감동받았다.

 

멘토님께서 '지금 다 이해하지 못하더라도 머리에 인덱싱만 해두고 넘어가시라'는 얘기를 여러 번 해주셨는데 위로가 되었다. '이런 게 있구나, 이런 것도 할 수 있구나' 정도만 알면 나중에 필요할 때 검색해서 사용할 수 있다는 내용이었다. 일년 조금 넘는 시간 동안 개발 공부를 해오며 아직도 내가 알지 못하는 것이 많다는 자괴감이 밀려올 때가 있는데, 마침 나에게 딱 필요한 조언이었다.

 

강의 마지막 날은 오픈소스를 뜯어보며 기존의 라이브러리에서 얻을 수 있는 인사이트를 함께 살펴보았다. 항상 어디부터 봐야할 지 감이 오지 않아서 라이브러리를 조금 뒤적거리다 창을 닫곤 했었는데, 이번 시간으로 어디를 어떻게 살펴보면 좋을지 알게 되었다. 모노레포 실습도 차근차근 따라해보니 큰 어려움 없이 잘 되었다. 다음 번 개인 프로젝트에 적용해 볼 생각이다. 

 

강의 시간에 모노레포 내용 말고도 취업 Q&A가 진행되었다. 신입 프론트엔드 개발자가 갖추어야 할 덕목은 자바스크립트, css, 네트워크, http 통신방식 등 탄탄한 기본기이다. 연차가 쌓일수록 결국은 기본기가 중요하다고 하셨다. 회사에서는 '이 지원자가 회사에 왔을 때 열심히 할까 안할까'의 확률을 보고 뽑는 것이기 때문에 깃허브, 블로그 등을 통해 꾸준함을 어필하라고 조언해 주셨다. 취준을 대하는 자세로는 열심히 안 해도 되니까 꾸준히만 해 - 정승제 영상을 알려주셨다. 요새 왠지 해이해졌는데 너무 잘 하려고 스트레스 받느라 아무것도 못하는 것보다 뭐라도 조금씩 꾸준히 해야겠다.