모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [2/2]
모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [2/2]
미리캔버스 프론트엔드 모노레포의 CI/CD와 배포 구조를 설명했습니다. 빌드 아티팩트 분리와 Module Federation, manifest 기반 독립 배포, 관측 지표를 함께 다뤘습니다.
#모노레포#CI/CD
77005분
필터 1
모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [1/2]
모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [1/2]
모노레포를 유지하면서도 모놀리스화를 막기 위한 프론트엔드 계층 구조와 규칙을 설명했습니다. 공통 패키지 남용을 줄이고 의존성과 변경 전파를 제어하는 방법을 정리했습니다.
#모노레포#CI/CD
50005분
CMS 모노레포 개선기: 빌드 시간 단축부터 번들 최적화까지
CMS 모노레포 개선기: 빌드 시간 단축부터 번들 최적화까지
모노레포 CMS의 빌드 파이프라인을 개선해 배포 시간을 14분에서 8분으로 줄였습니다. 병렬 빌드, 캐시 최적화, 안정성 보강과 번들 최적화까지 함께 다뤘습니다.
#Next.js#Spring Boot
96005분
pnpm 모노레포에서 React 19 마이그레이션하기: 숨겨진 호이스팅 레이어가 만든 타입 충돌 트러블슈팅
pnpm 모노레포에서 React 19 마이그레이션하기: 숨겨진 호이스팅 레이어가 만든 타입 충돌 트러블슈팅
pnpm 모노레포에서 React 18과 19를 공존시키며 발생한 타입 충돌을 트러블슈팅했습니다. 호이스팅 차단과 packageExtensions 주입으로 잘못된 React 타입 참조를 해결했습니다.
#pnpm#React
119005분
그때는 맞고 지금은 틀리다. Yarn Berry에서 pnpm으로 패키지 매니저 전환기
카카오페이가 Yarn Berry에서 pnpm으로 전환한 배경과 검증 과정을 공유했습니다. 메모리 스파이크를 해결하고 배포 효율과 도커 이미지 크기도 개선했습니다.
#pnpm#Yarn Berry
168005분
모노레포 환경에서 i18next 다국어 시스템 구축하기
모노레포 환경에서 i18next 다국어 시스템 구축하기
모노레포 프론트엔드에서 i18next와 Lokalise를 연동해 다국어 시스템을 구축한 과정을 공유했습니다. 동적 import를 넘어 정적 import와 빌드 타임 언어 분리로 번들 크기와 로딩 시간을 줄였습니다.
#i18next#React
94005분
대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 3. Nx를 활용한 마이크로프론트엔드
Nx를 활용해 모노레포에서 마이크로프론트엔드를 구축하는 방법을 소개했습니다. 빌드타임 통합과 런타임 통합을 예시 코드로 비교하며 Nx의 장점을 설명했습니다.
#Nx#모노레포
126005분
모노레포 소개 및 도입기
모노레포와 멀티레포의 차이와 도입 사례를 비교하며, 프로젝트 특성에 맞는 구조 선택 기준을 정리했습니다. 또한 빌드 최적화와 초기 설정 자동화를 통해 개발 생산성을 높인 경험을 소개했습니다.
#모노레포#Turborepo
124005분
모노레포 절망편 – 14개의 레포로 부활하기까지 걸린 1년
모노레포 확장으로 생긴 충돌과 복잡도를 줄이기 위해 14개 레포로 분리한 과정을 정리했습니다. 패키지 정리와 체계 재설계로 빌드 성능과 CI 속도를 개선했습니다.
#모노레포#polyrepo
20005분
대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 1. 마이크로프론트엔드 너 뭐야?
마이크로프론트엔드의 개념과 통합 방식, 장단점을 정리했습니다. 빌드 타임과 런타임 중 어떤 선택이 적합한지 기준도 함께 살펴봤습니다.
#마이크로프론트엔드#Module Federation
47005분
pnpm을 사용한 모노레포로 프론트엔드 생산성 늘리기
더스윙 프론트엔드팀이 20여 개 어드민을 pnpm 모노레포로 통합한 배경과 과정을 소개했습니다. 맥락 전환과 배포 복잡도를 줄이고 생산성과 코드 일관성을 높인 사례입니다.
#pnpm#모노레포
21005분