빌드가 터졌다: 5년 된 CMS 프로젝트의 Webpack4 → Vite 전환
5년 된 CMS의 Webpack4 빌드가 CI에서 OOM으로 무너져 Vite로 전환했습니다. 전환 후 빌드와 개발 서버가 크게 빨라지고 설정도 단순해졌습니다.
#Webpack#Vite
81005분
필터 1
대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 2. 모듈 페더레이션 PoC
모듈 페더레이션 PoC로 Next.js 기반 마이크로프론트엔드의 런타임 통합 방식을 살펴보았습니다. 다만 원격 모듈 설정 자동화와 타입 안전성, SSR 구현 난이도는 추가 해결이 필요했습니다.
#Module Federation#micro frontend
129005분
ESBuild를 위한 HMR, 직접 만들기
프론트엔드 개발 경험을 높이는 HMR의 원리와 번들러별 구현 방식을 비교했습니다. ESBuild 기반 번들러에 HMR을 직접 붙인 과정을 통해 실시간 반영과 상태 유지를 구현했습니다.
#ESBuild#HMR
126005분
B2B 물류 스쿼드 백오피스 프론트엔드 성능 개선
신규 백오피스의 SPA 성능 저하를 코드 스플리팅, Nginx 압축, 정적 캐싱으로 개선했습니다.\n브라우저 API 캐싱과 Vuex를 함께 사용해 로딩 시간과 중복 호출을 줄였습니다.
#Vuex#AWS
19005분
화면 성능 저하, 어떻게 개선할까?
배포 후 화면 성능 저하의 주요 원인과 개선 방법을 정리한 글입니다. 네트워크 속도, 정적 리소스 캐시, 이미지 최적화로 렌더링 속도를 높이는 방안을 소개했습니다.
#성능#cache
26005분
번들러 마이그레이션(Webpack to Vite)으로 빌드 속도 높이기
Webpack에서 Vite로 번들러를 옮겨 빌드 속도를 높이는 내용을 다뤘습니다. Vite의 빠른 개발·빌드 경험과 인기 배경을 소개했습니다.
#Vite#Webpack
22005분
Webpack Dev Server를 이용한 개발 환경 구성 Part1
Webpack Dev Server로 프론트엔드 단독 개발 모드를 구성하는 방법을 설명했습니다. Axios와 stub 파일, before 훅을 활용해 백엔드 없이도 API 응답을 모사했습니다.
#Webpack#Webpack Dev Server
3005분
Webpack dev server를 이용한 개발 환경 구성 Part2
Webpack Dev Server의 proxy로 모든 요청을 백엔드에 우회시키고, HTML 응답에만 번들 스크립트를 주입하는 dev 모드를 구성했습니다. 이를 통해 SPA와 서버 템플릿을 함께 테스트하면서 CORS 없이 배포 유사 환경을 만들었습니다.
#Webpack#Vue.js
4005분
Velopers 추천광고
쿠팡 파트너스
개발자를 위한 인기 상품을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발자#노트북#컴퓨터