모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [2/2]
미리캔버스 프론트엔드 모노레포의 CI/CD와 배포 구조를 설명했습니다. 빌드 아티팩트 분리와 Module Federation, manifest 기반 독립 배포, 관측 지표를 함께 다뤘습니다.
#모노레포#CI/CD#TypeScript
10500
모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [2/2]
태그
Webpack 기술 블로그 글
Webpack 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.
전체 20개최신 20개 표시
관련 태그
최신 게시글
20개 표시
Nx에서 Bun 더 잘 사용하기: Nx 18 -> 21 마이그레이션
Nx와 Bun 조합을 Nx 18에서 21.4 이상으로 마이그레이션하며 lock file 감지·파싱 문제를 해결했습니다. Bun의 텍스트 lock file 전환으로 CI와 빌드 효율, 도구 호환성을 함께 개선했습니다.
#Nx#Bun#webpack
000
Nx에서 Bun 더 잘 사용하기: Nx 18 -> 21 마이그레이션
Nx 18에서 Bun을 쓰면 lock file 감지와 파싱 문제로 마이그레이션이 꼬일 수 있었습니다. Bun 1.2.x와 Nx 21.4+로 올려 `bun.lock`을 쓰자 빌드와 CI가 안정화되었습니다.
#Nx#Bun#webpack
5900
빌드가 터졌다: 5년 된 CMS 프로젝트의 Webpack4 → Vite 전환
Webpack 4 기반 CMS의 OOM 문제를 순환 참조와 구조적 한계 관점에서 분석했습니다. Vite 전환으로 빌드 시간·번들 크기·개발 서버 시작 속도를 크게 개선했습니다.
#Webpack#Vite#React
000
빌드가 터졌다: 5년 된 CMS 프로젝트의 Webpack4 → Vite 전환
5년 된 CMS의 Webpack4 빌드가 CI에서 OOM으로 무너져 Vite로 전환했습니다. 전환 후 빌드와 개발 서버가 크게 빨라지고 설정도 단순해졌습니다.
#Webpack#Vite#React
8400
우리 팀엔 자바스크립트 상차만 하는 프런트엔드가 있었다
프런트엔드의 index.html을 백엔드에서 분리해 독립 배포 구조로 전환했습니다. S3, CloudFront, Lambda@Edge를 활용해 성능과 운영 효율을 함께 개선했습니다.
#React#TypeScript#webpack
5100
우리 팀엔 자바스크립트 상차만 하는 프런트엔드가 있었다
대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 2. 모듈 페더레이션 PoC
모듈 페더레이션 PoC로 Next.js 기반 마이크로프론트엔드의 런타임 통합 방식을 살펴보았습니다. 다만 원격 모듈 설정 자동화와 타입 안전성, SSR 구현 난이도는 추가 해결이 필요했습니다.
#Module Federation#micro frontend#Next.js
13000
ESBuild를 위한 HMR, 직접 만들기
프론트엔드 개발 경험을 높이는 HMR의 원리와 번들러별 구현 방식을 비교했습니다. ESBuild 기반 번들러에 HMR을 직접 붙인 과정을 통해 실시간 반영과 상태 유지를 구현했습니다.
#ESBuild#HMR#React Native
13400
B2B 물류 스쿼드 백오피스 프론트엔드 성능 개선
신규 백오피스의 SPA 성능 저하를 코드 스플리팅, Nginx 압축, 정적 캐싱으로 개선했습니다.\n브라우저 API 캐싱과 Vuex를 함께 사용해 로딩 시간과 중복 호출을 줄였습니다.
#Vuex#AWS#Webpack
3100
화면 성능 저하, 어떻게 개선할까?
배포 후 화면 성능 저하의 주요 원인과 개선 방법을 정리한 글입니다. 네트워크 속도, 정적 리소스 캐시, 이미지 최적화로 렌더링 속도를 높이는 방안을 소개했습니다.
#성능#cache#Webpack
2700
번들러 마이그레이션(Webpack to Vite)으로 빌드 속도 높이기
Webpack에서 Vite로 번들러를 옮겨 빌드 속도를 높이는 내용을 다뤘습니다. Vite의 빠른 개발·빌드 경험과 인기 배경을 소개했습니다.
#Vite#Webpack#Vue.js
3100
Webpack 빌드에 날개를 달아줄 Esbuild-Loader
Webpack의 Babel-Loader와 Terser를 Esbuild 기반 구성으로 교체해 빌드 시간을 비교했습니다. 개발·프로덕션·CI 환경에서 Esbuild 적용 시 상대적인 빌드 시간 단축을 확인했습니다.
#Webpack#esbuild#Babel
000
Webpack 빌드에 날개를 달아줄 Esbuild-Loader
Webpack의 Babel-Loader와 Terser를 Esbuild-Loader·Minify로 교체해 빌드 시간을 비교했습니다.\n개발 서버와 CI 프로덕션 빌드에서 Esbuild 조합의 유의미한 단축 효과를 확인했습니다.
#webpack#esbuild#Babel
2100
Webpack 빌드에 날개를 달아줄 Esbuild-Loader
Webpack Module Federation 도입 전에 알아야 할 것들
Webpack Module Federation의 원격 모듈 통합 원리와 핵심 용어를 설명했습니다. 독립 배포의 장점과 타입·환경별 경로 관리의 제약을 함께 짚었습니다.
#Webpack#Module Federation#마이크로 프런트엔드
000
Webpack Module Federation 도입 전에 알아야 할 것들
Webpack Module Federation의 원격 모듈 로딩 구조와 컨테이너 구성 요소를 설명했습니다. 독립 배포의 장점과 타입·환경별 경로 관리의 제약을 함께 짚었습니다.
#Webpack#Module Federation#마이크로 프런트엔드
2500
Webpack Module Federation 도입 전에 알아야 할 것들
크롬 확장프로그램 개발⛏️ 회고
크롬 확장프로그램을 Vue와 Chrome API로 개발하고 배포한 과정을 회고했습니다. 검수 과정에서 권한, HTTPS, CSP, 리소스 처리 같은 실무 이슈를 정리했습니다.
#Chrome Extension#Vue.js#JavaScript
1300
크롬 확장프로그램 개발⛏️ 회고
Webpack Dev Server를 이용한 개발 환경 구성 Part1
Webpack Dev Server로 프론트엔드 단독 개발 모드를 구성하는 방법을 설명했습니다. Axios와 stub 파일, before 훅을 활용해 백엔드 없이도 API 응답을 모사했습니다.
#Webpack#Webpack Dev Server#Axios
700
Webpack Dev Server를 이용한 개발 환경 구성 Part1
Webpack dev server를 이용한 개발 환경 구성 Part2
Webpack Dev Server의 proxy로 모든 요청을 백엔드에 우회시키고, HTML 응답에만 번들 스크립트를 주입하는 dev 모드를 구성했습니다. 이를 통해 SPA와 서버 템플릿을 함께 테스트하면서 CORS 없이 배포 유사 환경을 만들었습니다.
#Webpack#Vue.js#Hot Module Replacement
500
Webpack dev server를 이용한 개발 환경 구성 Part2
webpack, TypeScript, Mithril을 사용하는 프로젝트 생성 튜토리얼
TypeScript와 Mithril 프로젝트에 맞는 webpack 설정 구성을 단계별로 설명했습니다. 기존 설정을 활용하기 전에 webpack의 기본 구성을 이해하는 데 초점을 맞췄습니다.
#webpack#TypeScript#Mithril
1400
비트윈 PC 버전 개발기
웹 기술과 CEF를 결합해 브라우저 엔진 내장형 PC 애플리케이션을 개발했습니다. 서버에는 WebSocket을 추가하고 React·Webpack으로 웹 앱 복잡도를 관리했습니다.
#WebSocket#CEF#React
2700
