프론트엔드 도구의 전략적 선택: 경량 프레임워크 Vue.js 탐구와 Vue3 적용기
Vue.js를 경량 프레임워크 관점에서 소개하고 실무 적용 사례를 정리했습니다. Vue3 전환, Composition API, provide/inject, Vite 도입 경험도 함께 공유했습니다.
#Vue.js#Vue#Composition API
7200
태그
Vite 기술 블로그 글
Vite 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.
전체 16개최신 16개 표시
관련 태그
최신 게시글
16개 표시
빌드가 터졌다: 5년 된 CMS 프로젝트의 Webpack4 → Vite 전환
5년 된 CMS의 Webpack4 빌드가 CI에서 OOM으로 무너져 Vite로 전환했습니다. 전환 후 빌드와 개발 서버가 크게 빨라지고 설정도 단순해졌습니다.
#Webpack#Vite#React
7900
Vite에서 CSS 우선순위를 지키는 법: 우아한공방의 문제 해결기
Vite와 Vanilla Extract의 빌드 흐름을 추적해 CSS 우선순위가 import 순서에 따라 뒤바뀌는 원인을 파악했습니다. 뱅코멘트 기반 정렬 플러그인으로 청크를 재조합해 일관된 스타일 순서를 보장했습니다.
#Vite#CSS#Vanilla Extract
14700
Vite에서 CSS 우선순위를 지키는 법: 우아한공방의 문제 해결기
FE News 25년 11월 소식을 전해드립니다!
FE 분야의 최신 소식을 React, LLM 보안, 웹 암호화, 도구체인, 아키텍처 관점에서 정리했습니다. 각 주제의 핵심 변화와 의미를 한 번에 살펴볼 수 있습니다.
#React#LLM#JavaScript
10900
FE News 25년 11월 소식을 전해드립니다!
하나의 프론트엔드 코드로 멀티 환경 운영하기
하나의 프론트엔드 코드베이스로 여러 환경을 운영하기 위해 분기 구조를 재설계했습니다. Route와 Component는 설정화·자동화하고, Logic은 단순 플래그로 유지해 생산성과 DX를 개선했습니다.
#AST#ESLint#YAML
22200
오!라방 라이브커머스 클라우드 비용 절감 프로젝트
오!라방은 트래픽 집중 패턴에 맞춰 ELB+ECS를 CloudFront+S3 서버리스로 전환했습니다. 또한 Next.js를 Vite로 바꿔 번들 크기와 클라우드 비용을 함께 줄였습니다.
#AWS#cloud#server
5700
오!라방 라이브커머스 클라우드 비용 절감 프로젝트
Playwright로 하는 Component Test와 E2E Test Coverage
Playwright로 컴포넌트 테스트와 E2E 테스트를 병행해 고객센터 채팅의 핵심 사용자 여정을 검증했습니다. 80% 커버리지를 달성하며 크로스 브라우징과 모바일 환경 안정성을 확보했습니다.
#Playwright#E2E#test
13200
ESBuild를 위한 HMR, 직접 만들기
프론트엔드 개발 경험을 높이는 HMR의 원리와 번들러별 구현 방식을 비교했습니다. ESBuild 기반 번들러에 HMR을 직접 붙인 과정을 통해 실시간 반영과 상태 유지를 구현했습니다.
#ESBuild#HMR#React Native
12300
SPA 환경에서의 버전 업데이트를 위한 모두싸인의 최신 버전 업데이트 기능 구현기
SPA에서 구 버전 리소스가 계속 유지되는 문제를 해결하기 위해 최신 버전 업데이트 기능을 구현했습니다. version.json 폴링과 버전 비교로 강제·선택 업데이트를 분기하고 전환율까지 측정했습니다.
#React#Vite#AWS S3
6600
Vite를 이용한 FrontEnd프로젝트
Vite는 React뿐 아니라 여러 프레임워크를 지원하며 빠른 프로젝트 생성과 실행을 강점으로 소개했습니다. CRA보다 가볍고 구조가 익숙해 프런트엔드 개발에 효율적으로 활용할 수 있다고 설명했습니다.
#Vite#React#Vue.js
7700
FE News 24년 11월 소식을 전해드립니다!
FE News 24년 11월 소식으로 ViteConf, Next.js Conf, 번들러 영상, Node.js와 Bun 벤치마크를 소개했습니다. 네이버 FE 엔지니어들이 매월 엄선한 기술 소식 공유 프로젝트도 함께 안내했습니다.
#Vite#Next.js#node.js
1600
FE News 24년 11월 소식을 전해드립니다!
Vite로 회사 전용 로깅 모듈 개발하기 A to Z
회사 전용 로깅 모듈을 Vite 라이브러리 모드로 만들고 Git 저장소로 배포하는 과정을 정리했습니다. 접근 제어 환경에서는 access token을 활용해 설치 문제도 해결했습니다.
#Vite#Git#node.js
2900
입사 1개월차 프론트엔드 개발자의 자체 기술 온보딩 : Streaming SSR편
새로 합류한 프론트엔드 개발자가 Streaming SSR 온보딩 과정을 정리했습니다. 기술 도입 배경부터 직접 구현과 협업 학습 방법까지 소개했습니다.
#SSR#Streaming SSR#React
3600
OLEA? Storybook을 활용한 올리브영의 디자인 시스템!
올리브영은 BO 공통화를 위해 Vue와 Ant Design Vue, Storybook 기반 디자인 시스템 OLEA를 구축했습니다. GitHub Packages 배포로 내부 개발자들이 일관된 컴포넌트를 쉽게 재사용하도록 만들었습니다.
#Vue#Storybook#design system
6100
Vite로 구버전 브라우저 지원하기
Vite 레거시 플러그인으로 구버전 Safari와 Chrome의 흰 화면 문제를 해결한 사례를 다루었습니다. targets 설정만으로는 부족해 modernPolyfills를 함께 조정한 과정도 설명했습니다.
#Vite#React#browser
5800
번들러 마이그레이션(Webpack to Vite)으로 빌드 속도 높이기
Webpack에서 Vite로 번들러를 옮겨 빌드 속도를 높이는 내용을 다뤘습니다. Vite의 빠른 개발·빌드 경험과 인기 배경을 소개했습니다.
#Vite#Webpack#Vue.js
1800
