프론트엔드 도구의 전략적 선택: 경량 프레임워크 Vue.js 탐구와 Vue3 적용기
Vue.js를 경량 프레임워크 관점에서 소개하고 실무 적용 사례를 정리했습니다. Vue3 전환, Composition API, provide/inject, Vite 도입 경험도 함께 공유했습니다.
#Vue.js#Vue
70005분
필터 1
빌드가 터졌다: 5년 된 CMS 프로젝트의 Webpack4 → Vite 전환
5년 된 CMS의 Webpack4 빌드가 CI에서 OOM으로 무너져 Vite로 전환했습니다. 전환 후 빌드와 개발 서버가 크게 빨라지고 설정도 단순해졌습니다.
#Webpack#Vite
78005분
Vite에서 CSS 우선순위를 지키는 법: 우아한공방의 문제 해결기
Vite에서 CSS 우선순위를 지키는 법: 우아한공방의 문제 해결기
Vite와 Vanilla Extract의 빌드 흐름을 추적해 CSS 우선순위가 import 순서에 따라 뒤바뀌는 원인을 파악했습니다. 뱅코멘트 기반 정렬 플러그인으로 청크를 재조합해 일관된 스타일 순서를 보장했습니다.
#Vite#CSS
145005분
FE News 25년 11월 소식을 전해드립니다!
FE News 25년 11월 소식을 전해드립니다!
FE 분야의 최신 소식을 React, LLM 보안, 웹 암호화, 도구체인, 아키텍처 관점에서 정리했습니다. 각 주제의 핵심 변화와 의미를 한 번에 살펴볼 수 있습니다.
#React#LLM
109005분
하나의 프론트엔드 코드로 멀티 환경 운영하기
하나의 프론트엔드 코드베이스로 여러 환경을 운영하기 위해 분기 구조를 재설계했습니다. Route와 Component는 설정화·자동화하고, Logic은 단순 플래그로 유지해 생산성과 DX를 개선했습니다.
#AST#ESLint
222005분
오!라방 라이브커머스 클라우드 비용 절감 프로젝트
오!라방 라이브커머스 클라우드 비용 절감 프로젝트
오!라방은 트래픽 집중 패턴에 맞춰 ELB+ECS를 CloudFront+S3 서버리스로 전환했습니다. 또한 Next.js를 Vite로 바꿔 번들 크기와 클라우드 비용을 함께 줄였습니다.
#AWS#cloud
56005분
Playwright로 하는 Component Test와 E2E Test Coverage
Playwright로 컴포넌트 테스트와 E2E 테스트를 병행해 고객센터 채팅의 핵심 사용자 여정을 검증했습니다. 80% 커버리지를 달성하며 크로스 브라우징과 모바일 환경 안정성을 확보했습니다.
#Playwright#E2E
132005분
ESBuild를 위한 HMR, 직접 만들기
프론트엔드 개발 경험을 높이는 HMR의 원리와 번들러별 구현 방식을 비교했습니다. ESBuild 기반 번들러에 HMR을 직접 붙인 과정을 통해 실시간 반영과 상태 유지를 구현했습니다.
#ESBuild#HMR
123005분
SPA 환경에서의 버전 업데이트를 위한 모두싸인의 최신 버전 업데이트 기능 구현기
SPA에서 구 버전 리소스가 계속 유지되는 문제를 해결하기 위해 최신 버전 업데이트 기능을 구현했습니다. version.json 폴링과 버전 비교로 강제·선택 업데이트를 분기하고 전환율까지 측정했습니다.
#React#Vite
65005분
Vite를 이용한 FrontEnd프로젝트
Vite는 React뿐 아니라 여러 프레임워크를 지원하며 빠른 프로젝트 생성과 실행을 강점으로 소개했습니다. CRA보다 가볍고 구조가 익숙해 프런트엔드 개발에 효율적으로 활용할 수 있다고 설명했습니다.
#Vite#React
77005분
FE News 24년 11월 소식을 전해드립니다!
FE News 24년 11월 소식을 전해드립니다!
FE News 24년 11월 소식으로 ViteConf, Next.js Conf, 번들러 영상, Node.js와 Bun 벤치마크를 소개했습니다. 네이버 FE 엔지니어들이 매월 엄선한 기술 소식 공유 프로젝트도 함께 안내했습니다.
#Vite#Next.js
16005분