- 기술 정리
Next.js 렌더링 방식 네 가지(CSR, SSR, SSG, ISR)와 Hydration 톺아보기
주 1회 진행하는 ASAP 스터디에서 렌더링을 주제로 공부하다 정리한 내용입니다.
- 실무 경험
이미지 전송량 31MB → 1.2MB, CDN과 srcset으로 이미지 최적화하기
WiniLogis와 Autowini의 이미지 리소스에 Akamai Image Manager를 적용해, 이미지 포맷 변환과 리사이즈를 CDN에서 처리하도록 변경했습니다.
- 실무 경험
React Core 라이브러리 분리와 Akamai CDN 캐시 적용
React 프로젝트의 성능 최적화를 위해 React Core 라이브러리를 react-vendor라는 별도 번들로 분리했습니다.
- 실무 경험
배포 후 변경되지 않는 이미지의 원인 분석과 캐시 버스팅 적용
이미지를 교체해 배포했는데도 사용자 화면에는 이전 이미지가 계속 노출되는 문제가 발생했습니다. 브라우저를 새로고침해도 그대로이고, 다른 PC에서도 한동안 이전 이미지가 표시되는 상황이었습니다.
- 실무 경험
useInfiniteQuery로 무한스크롤 검색 리스트 상태 관리 개선
오토위니 통합검색 페이지는 검색 결과가 표시된 뒤 다음 페이지가 존재하면 하단에 More search results 버튼(이하 More 버튼으로 표시)이 노출되고, 이 버튼을 누르면 다음 페이지의…
- 실무 경험
YouTube iframe 관련 영상 제거 대체 방법
WiniLogis Ocean Freight 상세 페이지에서는 iframe을 통해 YouTube 영상을 재생하고 있었습니다.
- 실무 경험
Autowini WEB 통합 프로젝트 Playwright E2E 테스트 도입 + Claude Code 자동화
이전 글에서 Vitest를 도입해 유틸 함수 단위 테스트 환경을 구축했습니다.
- 실무 경험
React Lazy + Suspense 사용 시 페이지 전환 깜빡임(흰 화면) 문제 해결
이전에 WiniLogis 프로젝트의 성능 최적화를 진행하면서 코드 스플리팅을 적용한 경험이 있습니다.
- 실무 경험
Android WebView 디버깅: chrome://inspect Pending authentication 오류 해결
최근 Android 네이티브 앱에서 WebView로 표시되는 페이지의 문제를 확인해야 하는 상황이 있었습니다.
- 프로젝트
Frontend Kit – AI 문답 기능 도입 (Gemma 3 27B)
Frontend Kit은 프론트엔드 면접 질문을 플래시카드 형태로 학습할 수 있도록 만든 PWA 웹앱입니다.
- 실무 경험
WiniLogis Webpack에서 Vite로 마이그레이션
WiniLogis 프로젝트를 작업하며, 사내의 다른 Vite 기반 프로젝트들과 비교해 개발 환경 구동 속도가 39초로 현저히 느리다는 문제를 인지했습니다.
- 실무 경험
Keycloakify를 활용한 React 기반 Keycloak 테마 개발 및 다국어 처리
오토위니 서비스에 Keycloak을 도입하며 로그인 화면 커스터마이징을 진행했습니다.
- 실무 경험
Lighthouse 90점대인데 체감은 느린 이유? Vercel Region 최적화로 해결
현재 제 포트폴리오 프로젝트는 Next.js와 Supabase를 기반으로 구축되어 있으며, Vercel을 통해 배포 및 관리되고 있습니다.
- 실무 경험
Autowini 프론트엔드 분리 프로젝트 CI/CD 파이프라인 구축 (Bitbucket 기반) 2
현재 오토위니에서는 React 기반으로 대부분의 프론트엔드 프로젝트를 분리하여 운영하고 있습니다.
- 실무 경험
필터 변경 시 메뉴가 접히던 문제, TanStack Query placeholderData로 해결
이번 글에서는 Autowini 필터 검색 페이지의 좌측 Accordion 메뉴에서 발생한 UX 문제를 계기로, TanStack Query의 placeholderData 옵션을 활용해 구조를 개선한…
- 실무 경험
React SPA에서 메타 태그 중복 문제, 라이브러리 제작으로 해결하기 (feat. react-head-safe)
안녕하세요, 프론트엔드 개발자 엄성준입니다.
- 실무 경험
React i18n 다국어 처리 빌드 크기 최적화 2
기존에 작성했던 React i18n 다국어 처리 빌드 크기 최적화 1글에 이어지는 내용입니다.
- 실무 경험
Autowini 프론트엔드 분리 프로젝트 CI/CD 파이프라인 구축 (Bitbucket 기반) 1
Autowini에서는 React로 분리 및 개선한 프론트엔드 프로젝트들이 여러 개 존재합니다.
- 실무 경험
GitHub Copilot을 활용한 사용하지 않는 번역 키 제거
프로젝트 내 다국어(i18n)를 관리하다 보면, 기능이 변경되거나 삭제될 때마다 사용하지 않는 번역 키가 남게 됩니다.
- 실무 경험
Autowini WEB 통합 프로젝트 Vitest 테스트 시스템 도입
web-www-front는 오토위니(AutoWini)에서 기존 JSP 기반의 레거시 페이지를 React로 분리 및 개선하기 위해 만들어진 통합 프로젝트입니다.
