역할 기반 라우팅에서 Episode 분리로
Banjang 웹 프론트엔드를 역할 기반 단일 앱에서 기능별 Episode 독립 배포 구조로 재정립한 회고입니다.\n모바일 Shell과 웹 Episode의 책임을 나누고, 로딩·전환 정책도 함께 정리했습니다.
#React#TypeScript
1400
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
Storybook으로 만든 독립적인 UI 개발 환경
Storybook으로 UI 상태를 독립적으로 재현해 개발 환경 준비에 덜 의존하도록 구성했습니다. 실제 API 연동과 화면 흐름은 기존 개발 환경에서 분리해 확인했습니다.
#Storybook#Vite
5500
집 나간 네트워크는 돌아왔는데 React.lazy는 왜 안 돌아올까
집 나간 네트워크는 돌아왔는데 React.lazy는 왜 안 돌아올까
네트워크 복구 후에도 React.lazy 재시도가 막히는 이유를 모듈 맵 캐시로 설명했습니다. 정적 import 전환과 사전 로딩으로 오류를 해결했습니다.
#React#Vite
600
Loopin의 vault 경량 엔트리 적용기
배럴 import 때문에 필요한 컴포넌트 하나가 패키지 전체를 끌고 오는 문제를 해결했습니다. 경량 서브패스 엔트리를 추가해 번들을 크게 줄이고 재사용성을 유지했습니다.
#pnpm#Turborepo
1200
Android Emulator 로컬 서버 접속하기
Android Emulator에서는 localhost가 호스트 PC가 아니라 에뮬레이터 자신을 가리켜 접속이 실패할 수 있습니다. 에뮬레이터에서는 10.0.2.2를 쓰고, 필요하면 서버 바인딩과 방화벽도 함께 확인하셨습니다.
#Android Emulator#Vite
1800
S3 + CloudFront 기반 SPA 배포에서 캐시와 fallback 전략 설계하기
S3·CloudFront 기반 SPA에서 HTML, hashed asset, route fallback의 캐시 책임을 분리했습니다.\n누락 asset은 404로 유지하고 chunk 오류에는 1회 새로고침 방어를 적용했습니다.
#AWS#S3
000
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
프론트엔드 도구의 전략적 선택: 경량 프레임워크 Vue.js 탐구와 Vue3 적용기
Vue.js를 경량 프레임워크 관점에서 소개하고 실무 적용 사례를 정리했습니다. Vue3 전환, Composition API, provide/inject, Vite 도입 경험도 함께 공유했습니다.
#Vue.js#Composition API
8500
빌드가 터졌다: 5년 된 CMS 프로젝트의 Webpack4 → Vite 전환
Webpack 4 기반 CMS의 OOM 문제를 순환 참조와 구조적 한계 관점에서 분석했습니다. Vite 전환으로 빌드 시간·번들 크기·개발 서버 시작 속도를 크게 개선했습니다.
#Webpack#Vite
000
빌드가 터졌다: 5년 된 CMS 프로젝트의 Webpack4 → Vite 전환
5년 된 CMS의 Webpack4 빌드가 CI에서 OOM으로 무너져 Vite로 전환했습니다. 전환 후 빌드와 개발 서버가 크게 빨라지고 설정도 단순해졌습니다.
#Webpack#Vite
8400
Vite에서 CSS 우선순위를 지키는 법: 우아한공방의 문제 해결기
Vite에서 CSS 우선순위를 지키는 법: 우아한공방의 문제 해결기
Vite와 Vanilla Extract의 빌드 흐름을 추적해 CSS 우선순위가 import 순서에 따라 뒤바뀌는 원인을 파악했습니다. 뱅코멘트 기반 정렬 플러그인으로 청크를 재조합해 일관된 스타일 순서를 보장했습니다.
#Vite#CSS
15500
FE News 25년 11월 소식을 전해드립니다!
FE News 25년 11월 소식을 전해드립니다!
FE 분야의 최신 소식을 React, LLM 보안, 웹 암호화, 도구체인, 아키텍처 관점에서 정리했습니다. 각 주제의 핵심 변화와 의미를 한 번에 살펴볼 수 있습니다.
#React#LLM
11500
하나의 프론트엔드 코드로 멀티 환경 운영하기
하나의 프론트엔드 코드베이스로 여러 환경을 운영하기 위해 분기 구조를 재설계했습니다. Route와 Component는 설정화·자동화하고, Logic은 단순 플래그로 유지해 생산성과 DX를 개선했습니다.
#AST#ESLint
22900
오!라방 라이브커머스 클라우드 비용 절감 프로젝트
오!라방 라이브커머스 클라우드 비용 절감 프로젝트
오!라방은 트래픽 집중 패턴에 맞춰 ELB+ECS를 CloudFront+S3 서버리스로 전환했습니다. 또한 Next.js를 Vite로 바꿔 번들 크기와 클라우드 비용을 함께 줄였습니다.
#AWS#cloud
6400
Playwright로 하는 Component Test와 E2E Test Coverage
Playwright로 컴포넌트 테스트와 E2E 테스트를 병행해 고객센터 채팅의 핵심 사용자 여정을 검증했습니다. 80% 커버리지를 달성하며 크로스 브라우징과 모바일 환경 안정성을 확보했습니다.
#Playwright#E2E
14800