역할 기반 라우팅에서 Episode 분리로
Banjang 웹 프론트엔드를 역할 기반 단일 앱에서 기능별 Episode 독립 배포 구조로 재정립한 회고입니다.\n모바일 Shell과 웹 Episode의 책임을 나누고, 로딩·전환 정책도 함께 정리했습니다.
#React#TypeScript#Vite
1400
태그
Vite 기술 블로그 글
Vite 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.
전체 23개최신 20개 표시
관련 태그
최신 게시글
20개 표시
Storybook으로 만든 독립적인 UI 개발 환경
Storybook으로 UI 상태를 독립적으로 재현해 개발 환경 준비에 덜 의존하도록 구성했습니다. 실제 API 연동과 화면 흐름은 기존 개발 환경에서 분리해 확인했습니다.
#Storybook#Vite#Mock 데이터
5500
집 나간 네트워크는 돌아왔는데 React.lazy는 왜 안 돌아올까
네트워크 복구 후에도 React.lazy 재시도가 막히는 이유를 모듈 맵 캐시로 설명했습니다. 정적 import 전환과 사전 로딩으로 오류를 해결했습니다.
#React#Vite#SPA
600
집 나간 네트워크는 돌아왔는데 React.lazy는 왜 안 돌아올까
Loopin의 vault 경량 엔트리 적용기
배럴 import 때문에 필요한 컴포넌트 하나가 패키지 전체를 끌고 오는 문제를 해결했습니다. 경량 서브패스 엔트리를 추가해 번들을 크게 줄이고 재사용성을 유지했습니다.
#pnpm#Turborepo#모노레포
1200
Android Emulator 로컬 서버 접속하기
Android Emulator에서는 localhost가 호스트 PC가 아니라 에뮬레이터 자신을 가리켜 접속이 실패할 수 있습니다. 에뮬레이터에서는 10.0.2.2를 쓰고, 필요하면 서버 바인딩과 방화벽도 함께 확인하셨습니다.
#Android Emulator#Vite#WebView
1800
S3 + CloudFront 기반 SPA 배포에서 캐시와 fallback 전략 설계하기
S3·CloudFront 기반 SPA에서 HTML, hashed asset, route fallback의 캐시 책임을 분리했습니다.\n누락 asset은 404로 유지하고 chunk 오류에는 1회 새로고침 방어를 적용했습니다.
#AWS#S3#CloudFront
000
프론트엔드 도구의 전략적 선택: 경량 프레임워크 Vue.js 탐구와 Vue3 적용기
Vue.js를 경량 프레임워크 관점에서 소개하고 실무 적용 사례를 정리했습니다. Vue3 전환, Composition API, provide/inject, Vite 도입 경험도 함께 공유했습니다.
#Vue.js#Composition API#Vite
8500
빌드가 터졌다: 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
Vite에서 CSS 우선순위를 지키는 법: 우아한공방의 문제 해결기
Vite와 Vanilla Extract의 빌드 흐름을 추적해 CSS 우선순위가 import 순서에 따라 뒤바뀌는 원인을 파악했습니다. 뱅코멘트 기반 정렬 플러그인으로 청크를 재조합해 일관된 스타일 순서를 보장했습니다.
#Vite#CSS#Vanilla Extract
15500
Vite에서 CSS 우선순위를 지키는 법: 우아한공방의 문제 해결기
FE News 25년 11월 소식을 전해드립니다!
FE 분야의 최신 소식을 React, LLM 보안, 웹 암호화, 도구체인, 아키텍처 관점에서 정리했습니다. 각 주제의 핵심 변화와 의미를 한 번에 살펴볼 수 있습니다.
#React#LLM#JavaScript
11500
FE News 25년 11월 소식을 전해드립니다!
하나의 프론트엔드 코드로 멀티 환경 운영하기
하나의 프론트엔드 코드베이스로 여러 환경을 운영하기 위해 분기 구조를 재설계했습니다. Route와 Component는 설정화·자동화하고, Logic은 단순 플래그로 유지해 생산성과 DX를 개선했습니다.
#AST#ESLint#YAML
22900
오!라방 라이브커머스 클라우드 비용 절감 프로젝트
오!라방은 트래픽 집중 패턴에 맞춰 ELB+ECS를 CloudFront+S3 서버리스로 전환했습니다. 또한 Next.js를 Vite로 바꿔 번들 크기와 클라우드 비용을 함께 줄였습니다.
#AWS#cloud#server
6400
오!라방 라이브커머스 클라우드 비용 절감 프로젝트
Playwright로 하는 Component Test와 E2E Test Coverage
Playwright로 컴포넌트 테스트와 E2E 테스트를 병행해 고객센터 채팅의 핵심 사용자 여정을 검증했습니다. 80% 커버리지를 달성하며 크로스 브라우징과 모바일 환경 안정성을 확보했습니다.
#Playwright#E2E#test
14800
ESBuild를 위한 HMR, 직접 만들기
프론트엔드 개발 경험을 높이는 HMR의 원리와 번들러별 구현 방식을 비교했습니다. ESBuild 기반 번들러에 HMR을 직접 붙인 과정을 통해 실시간 반영과 상태 유지를 구현했습니다.
#ESBuild#HMR#React Native
13400
SPA 환경에서의 버전 업데이트를 위한 모두싸인의 최신 버전 업데이트 기능 구현기
SPA에서 구 버전 리소스가 계속 유지되는 문제를 해결하기 위해 최신 버전 업데이트 기능을 구현했습니다. version.json 폴링과 버전 비교로 강제·선택 업데이트를 분기하고 전환율까지 측정했습니다.
#React#Vite#AWS S3
7100
Vite를 이용한 FrontEnd프로젝트
Vite는 React뿐 아니라 여러 프레임워크를 지원하며 빠른 프로젝트 생성과 실행을 강점으로 소개했습니다. CRA보다 가볍고 구조가 익숙해 프런트엔드 개발에 효율적으로 활용할 수 있다고 설명했습니다.
#Vite#React#Vue.js
8000
FE News 24년 11월 소식을 전해드립니다!
FE News 24년 11월 소식으로 ViteConf, Next.js Conf, 번들러 영상, Node.js와 Bun 벤치마크를 소개했습니다. 네이버 FE 엔지니어들이 매월 엄선한 기술 소식 공유 프로젝트도 함께 안내했습니다.
#Vite#Next.js#node.js
1800
FE News 24년 11월 소식을 전해드립니다!
Vite로 회사 전용 로깅 모듈 개발하기 A to Z
회사 전용 로깅 모듈을 Vite 라이브러리 모드로 만들고 Git 저장소로 배포하는 과정을 정리했습니다. 접근 제어 환경에서는 access token을 활용해 설치 문제도 해결했습니다.
#Vite#Git#node.js
3700
입사 1개월차 프론트엔드 개발자의 자체 기술 온보딩 : Streaming SSR편
새로 합류한 프론트엔드 개발자가 Streaming SSR 온보딩 과정을 정리했습니다. 기술 도입 배경부터 직접 구현과 협업 학습 방법까지 소개했습니다.
#SSR#React#Vite
4300
