모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [2/2]
미리캔버스 프론트엔드 모노레포의 CI/CD와 배포 구조를 설명했습니다. 빌드 아티팩트 분리와 Module Federation, manifest 기반 독립 배포, 관측 지표를 함께 다뤘습니다.
#모노레포#CI/CD#TypeScript
8000
모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [2/2]
태그
모노레포 기술 블로그 글
모노레포 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.
전체 17개최신 17개 표시
관련 태그
최신 게시글
17개 표시
모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [1/2]
모노레포를 유지하면서도 모놀리스화를 막기 위한 프론트엔드 계층 구조와 규칙을 설명했습니다. 공통 패키지 남용을 줄이고 의존성과 변경 전파를 제어하는 방법을 정리했습니다.
#모노레포#CI/CD#refactoring
5300
모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [1/2]
CMS 모노레포 개선기: 빌드 시간 단축부터 번들 최적화까지
모노레포 CMS의 빌드 파이프라인을 개선해 배포 시간을 14분에서 8분으로 줄였습니다. 병렬 빌드, 캐시 최적화, 안정성 보강과 번들 최적화까지 함께 다뤘습니다.
#Next.js#Spring Boot#모노레포
9700
CMS 모노레포 개선기: 빌드 시간 단축부터 번들 최적화까지
pnpm 모노레포에서 React 19 마이그레이션하기: 숨겨진 호이스팅 레이어가 만든 타입 충돌 트러블슈팅
pnpm 모노레포에서 React 18과 19를 공존시키며 발생한 타입 충돌을 트러블슈팅했습니다. 호이스팅 차단과 packageExtensions 주입으로 잘못된 React 타입 참조를 해결했습니다.
#pnpm#React#TypeScript
12000
pnpm 모노레포에서 React 19 마이그레이션하기: 숨겨진 호이스팅 레이어가 만든 타입 충돌 트러블슈팅
그때는 맞고 지금은 틀리다. Yarn Berry에서 pnpm으로 패키지 매니저 전환기
카카오페이가 Yarn Berry에서 pnpm으로 전환한 배경과 검증 과정을 공유했습니다. 메모리 스파이크를 해결하고 배포 효율과 도커 이미지 크기도 개선했습니다.
#pnpm#Yarn Berry#Next.js
16900
모노레포 환경에서 i18next 다국어 시스템 구축하기
모노레포 프론트엔드에서 i18next와 Lokalise를 연동해 다국어 시스템을 구축한 과정을 공유했습니다. 동적 import를 넘어 정적 import와 빌드 타임 언어 분리로 번들 크기와 로딩 시간을 줄였습니다.
#i18next#React#GitHub Actions
9400
모노레포 환경에서 i18next 다국어 시스템 구축하기
대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 3. Nx를 활용한 마이크로프론트엔드
Nx를 활용해 모노레포에서 마이크로프론트엔드를 구축하는 방법을 소개했습니다. 빌드타임 통합과 런타임 통합을 예시 코드로 비교하며 Nx의 장점을 설명했습니다.
#Nx#모노레포#마이크로프론트엔드
12700
모노레포 소개 및 도입기
모노레포와 멀티레포의 차이와 도입 사례를 비교하며, 프로젝트 특성에 맞는 구조 선택 기준을 정리했습니다. 또한 빌드 최적화와 초기 설정 자동화를 통해 개발 생산성을 높인 경험을 소개했습니다.
#모노레포#Turborepo#Nx
12400
모노레포 절망편 – 14개의 레포로 부활하기까지 걸린 1년
모노레포 확장으로 생긴 충돌과 복잡도를 줄이기 위해 14개 레포로 분리한 과정을 정리했습니다. 패키지 정리와 체계 재설계로 빌드 성능과 CI 속도를 개선했습니다.
#모노레포#polyrepo#CI/CD
2300
대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 1. 마이크로프론트엔드 너 뭐야?
마이크로프론트엔드의 개념과 통합 방식, 장단점을 정리했습니다. 빌드 타임과 런타임 중 어떤 선택이 적합한지 기준도 함께 살펴봤습니다.
#마이크로프론트엔드#Module Federation#Nx
4900
pnpm을 사용한 모노레포로 프론트엔드 생산성 늘리기
더스윙 프론트엔드팀이 20여 개 어드민을 pnpm 모노레포로 통합한 배경과 과정을 소개했습니다. 맥락 전환과 배포 복잡도를 줄이고 생산성과 코드 일관성을 높인 사례입니다.
#pnpm#모노레포#GitHub Actions
2200
쏘카 프론트엔드 모노레포 - Part1. Code Generator로 프로젝트 세팅 자동화하기
쏘카 프론트엔드 팀이 멀티레포의 중복과 유지보수 문제를 해결하기 위해 모노레포와 Code Generator를 도입했습니다. 이를 통해 프로젝트 세팅 시간을 80% 이상 줄이고 코드 일관성과 온보딩 효율을 높였습니다.
#모노레포#Turborepo#Code Generator
2700
Node.js 라이브러리 배포 파이프라인에 플러그인 시스템 도입기
100개가 넘는 라이브러리를 관리하기 위해 배포 파이프라인에 플러그인 시스템을 도입한 사례를 소개했습니다. 공통 코어는 유지하면서 레포별 요구사항을 독립적으로 확장하는 구조를 설명했습니다.
#node.js#모노레포#plugin
1900
200여개 서비스 모노레포의 파이프라인 최적화
토스 프론트엔드의 대규모 모노레포 CI/CD 최적화 사례를 소개했습니다. 병렬 파이프라인과 사전 복제, SSR 번들링으로 빌드와 배포 시간을 크게 줄였습니다.
#모노레포#CI/CD#Docker
2200
코드, 어떻게 관리하세요?
모노레포로 서비스 레포와 패키지 레포를 통합한 경험을 공유했습니다. turborepo, Changesets, GitHub Actions로 빌드와 배포를 자동화하고 불편한 점도 함께 개선했습니다.
#모노레포#turborepo#pnpm
6100
Yarn Classic에서 Pnpm으로 전환하기 with TurboRepo
TurboRepo 모노레포에서 Yarn Classic의 유령 의존성 문제를 해결하기 위해 Pnpm으로 전환한 과정을 다뤘습니다. workspace 설정, 배포 환경 대응, 캐시 최적화로 설치 속도와 의존성 관리가 개선되었습니다.
#pnpm#TurboRepo#모노레포
5500
모노레포 이렇게 좋은데 왜 안써요?
여러 레포지토리로 분산된 프론트엔드 서비스를 모노레포로 통합한 사례를 소개했습니다. 공통 컨벤션과 패키지 공유로 생산성과 유지보수성이 크게 향상되었습니다.
#모노레포#yarn#React
3500
