UMSUNGJUN 블로그

UMSUNGJUN 블로그 https://umsungjun.com/blog 실무에서 겪은 문제와 해결 과정, 공부한 내용을 기록합니다. ko Wed, 26 Aug 2026 11:17:42 GMT Next.js 렌더링 방식 네 가지(CSR, SSR, SSG, ISR)와 Hydration 톺아보기 https://umsungjun.com/blog/nextjs-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B0%A9%EC%8B%9D-%EB%84%A4-%EA%B0%80%EC%A7%80csr-ssr-ssg-isr%EC%99%80-hydration-%ED%86%BA%EC%95%84%EB%B3%B4%EA%B8%B0 https://umsungjun.com/blog/nextjs-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B0%A9%EC%8B%9D-%EB%84%A4-%EA%B0%80%EC%A7%80csr-ssr-ssg-isr%EC%99%80-hydration-%ED%86%BA%EC%95%84%EB%B3%B4%EA%B8%B0 Wed, 26 Aug 2026 11:17:42 GMT 기술 정리 주 1회 진행하는 ASAP 스터디에서 렌더링을 주제로 공부하다 정리한 내용입니다. 이미지 전송량 31MB → 1.2MB, CDN과 srcset으로 이미지 최적화하기 https://umsungjun.com/blog/%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%A0%84%EC%86%A1%EB%9F%89-31mb-12mb-cdn%EA%B3%BC-srcset%EC%9C%BC%EB%A1%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EA%B8%B0 https://umsungjun.com/blog/%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%A0%84%EC%86%A1%EB%9F%89-31mb-12mb-cdn%EA%B3%BC-srcset%EC%9C%BC%EB%A1%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EA%B8%B0 Wed, 12 Aug 2026 11:24:24 GMT 실무 경험 WiniLogis와 Autowini의 이미지 리소스에 Akamai Image Manager를 적용해, 이미지 포맷 변환과 리사이즈를 CDN에서 처리하도록 변경했습니다. React Core 라이브러리 분리와 Akamai CDN 캐시 적용 https://umsungjun.com/blog/react-core-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EB%B6%84%EB%A6%AC%EC%99%80-akamai-cdn-%EC%BA%90%EC%8B%9C-%EC%A0%81%EC%9A%A9 https://umsungjun.com/blog/react-core-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EB%B6%84%EB%A6%AC%EC%99%80-akamai-cdn-%EC%BA%90%EC%8B%9C-%EC%A0%81%EC%9A%A9 Wed, 29 Jul 2026 11:06:02 GMT 실무 경험 React 프로젝트의 성능 최적화를 위해 React Core 라이브러리를 react-vendor라는 별도 번들로 분리했습니다. 배포 후 변경되지 않는 이미지의 원인 분석과 캐시 버스팅 적용 https://umsungjun.com/blog/%EB%B0%B0%ED%8F%AC-%ED%9B%84-%EB%B3%80%EA%B2%BD%EB%90%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EC%9D%B4%EB%AF%B8%EC%A7%80%EC%9D%98-%EC%9B%90%EC%9D%B8-%EB%B6%84%EC%84%9D%EA%B3%BC-%EC%BA%90%EC%8B%9C-%EB%B2%84%EC%8A%A4%ED%8C%85-%EC%A0%81%EC%9A%A9 https://umsungjun.com/blog/%EB%B0%B0%ED%8F%AC-%ED%9B%84-%EB%B3%80%EA%B2%BD%EB%90%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EC%9D%B4%EB%AF%B8%EC%A7%80%EC%9D%98-%EC%9B%90%EC%9D%B8-%EB%B6%84%EC%84%9D%EA%B3%BC-%EC%BA%90%EC%8B%9C-%EB%B2%84%EC%8A%A4%ED%8C%85-%EC%A0%81%EC%9A%A9 Thu, 23 Jul 2026 11:37:06 GMT 실무 경험 이미지를 교체해 배포했는데도 사용자 화면에는 이전 이미지가 계속 노출되는 문제가 발생했습니다. 브라우저를 새로고침해도 그대로이고, 다른 PC에서도 한동안 이전 이미지가 표시되는 상황이었습니다. useInfiniteQuery로 무한스크롤 검색 리스트 상태 관리 개선 https://umsungjun.com/blog/useinfinitequery%EB%A1%9C-%EB%AC%B4%ED%95%9C%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B2%80%EC%83%89-%EB%A6%AC%EC%8A%A4%ED%8A%B8-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EA%B0%9C%EC%84%A0 https://umsungjun.com/blog/useinfinitequery%EB%A1%9C-%EB%AC%B4%ED%95%9C%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B2%80%EC%83%89-%EB%A6%AC%EC%8A%A4%ED%8A%B8-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EA%B0%9C%EC%84%A0 Fri, 03 Jul 2026 11:56:22 GMT 실무 경험 오토위니 통합검색 페이지는 검색 결과가 표시된 뒤 다음 페이지가 존재하면 하단에 More search results 버튼(이하 More 버튼으로 표시)이 노출되고, 이 버튼을 누르면 다음 페이지의… YouTube iframe 관련 영상 제거 대체 방법 https://umsungjun.com/blog/youtube-iframe-%EA%B4%80%EB%A0%A8-%EC%98%81%EC%83%81-%EC%A0%9C%EA%B1%B0-%EB%8C%80%EC%B2%B4-%EB%B0%A9%EB%B2%95 https://umsungjun.com/blog/youtube-iframe-%EA%B4%80%EB%A0%A8-%EC%98%81%EC%83%81-%EC%A0%9C%EA%B1%B0-%EB%8C%80%EC%B2%B4-%EB%B0%A9%EB%B2%95 Tue, 28 Apr 2026 11:59:30 GMT 실무 경험 WiniLogis Ocean Freight 상세 페이지에서는 iframe을 통해 YouTube 영상을 재생하고 있었습니다. Autowini WEB 통합 프로젝트 Playwright E2E 테스트 도입 + Claude Code 자동화 https://umsungjun.com/blog/autowini-web-%ED%86%B5%ED%95%A9-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-playwright-e2e-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EB%8F%84%EC%9E%85-claude-code-%EC%9E%90%EB%8F%99%ED%99%94 https://umsungjun.com/blog/autowini-web-%ED%86%B5%ED%95%A9-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-playwright-e2e-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EB%8F%84%EC%9E%85-claude-code-%EC%9E%90%EB%8F%99%ED%99%94 Mon, 20 Apr 2026 11:54:12 GMT 실무 경험 이전 글에서 Vitest를 도입해 유틸 함수 단위 테스트 환경을 구축했습니다. React Lazy + Suspense 사용 시 페이지 전환 깜빡임(흰 화면) 문제 해결 https://umsungjun.com/blog/react-lazy-suspense-%EC%82%AC%EC%9A%A9-%EC%8B%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%A0%84%ED%99%98-%EA%B9%9C%EB%B9%A1%EC%9E%84%ED%9D%B0-%ED%99%94%EB%A9%B4-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0 https://umsungjun.com/blog/react-lazy-suspense-%EC%82%AC%EC%9A%A9-%EC%8B%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%A0%84%ED%99%98-%EA%B9%9C%EB%B9%A1%EC%9E%84%ED%9D%B0-%ED%99%94%EB%A9%B4-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0 Mon, 23 Mar 2026 11:15:40 GMT 실무 경험 이전에 WiniLogis 프로젝트의 성능 최적화를 진행하면서 코드 스플리팅을 적용한 경험이 있습니다. Android WebView 디버깅: chrome://inspect Pending authentication 오류 해결 https://umsungjun.com/blog/android-webview-%EB%94%94%EB%B2%84%EA%B9%85-chromeinspect-pending-authentication-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0 https://umsungjun.com/blog/android-webview-%EB%94%94%EB%B2%84%EA%B9%85-chromeinspect-pending-authentication-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0 Thu, 12 Mar 2026 11:25:01 GMT 실무 경험 최근 Android 네이티브 앱에서 WebView로 표시되는 페이지의 문제를 확인해야 하는 상황이 있었습니다. Frontend Kit – AI 문답 기능 도입 (Gemma 3 27B) https://umsungjun.com/blog/frontend-kit-ai-%EB%AC%B8%EB%8B%B5-%EA%B8%B0%EB%8A%A5-%EB%8F%84%EC%9E%85-gemma-3-27b https://umsungjun.com/blog/frontend-kit-ai-%EB%AC%B8%EB%8B%B5-%EA%B8%B0%EB%8A%A5-%EB%8F%84%EC%9E%85-gemma-3-27b Fri, 27 Feb 2026 07:50:19 GMT 프로젝트 Frontend Kit은 프론트엔드 면접 질문을 플래시카드 형태로 학습할 수 있도록 만든 PWA 웹앱입니다. WiniLogis Webpack에서 Vite로 마이그레이션 https://umsungjun.com/blog/winilogis-webpack%EC%97%90%EC%84%9C-vite%EB%A1%9C-%EB%A7%88%EC%9D%B4%EA%B7%B8%EB%A0%88%EC%9D%B4%EC%85%98 https://umsungjun.com/blog/winilogis-webpack%EC%97%90%EC%84%9C-vite%EB%A1%9C-%EB%A7%88%EC%9D%B4%EA%B7%B8%EB%A0%88%EC%9D%B4%EC%85%98 Tue, 10 Feb 2026 11:44:33 GMT 실무 경험 WiniLogis 프로젝트를 작업하며, 사내의 다른 Vite 기반 프로젝트들과 비교해 개발 환경 구동 속도가 39초로 현저히 느리다는 문제를 인지했습니다. Keycloakify를 활용한 React 기반 Keycloak 테마 개발 및 다국어 처리 https://umsungjun.com/blog/keycloakify%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-react-%EA%B8%B0%EB%B0%98-keycloak-%ED%85%8C%EB%A7%88-%EA%B0%9C%EB%B0%9C-%EB%B0%8F-%EB%8B%A4%EA%B5%AD%EC%96%B4-%EC%B2%98%EB%A6%AC https://umsungjun.com/blog/keycloakify%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-react-%EA%B8%B0%EB%B0%98-keycloak-%ED%85%8C%EB%A7%88-%EA%B0%9C%EB%B0%9C-%EB%B0%8F-%EB%8B%A4%EA%B5%AD%EC%96%B4-%EC%B2%98%EB%A6%AC Mon, 09 Feb 2026 11:05:15 GMT 실무 경험 오토위니 서비스에 Keycloak을 도입하며 로그인 화면 커스터마이징을 진행했습니다. Lighthouse 90점대인데 체감은 느린 이유? Vercel Region 최적화로 해결 https://umsungjun.com/blog/lighthouse-90%EC%A0%90%EB%8C%80%EC%9D%B8%EB%8D%B0-%EC%B2%B4%EA%B0%90%EC%9D%80-%EB%8A%90%EB%A6%B0-%EC%9D%B4%EC%9C%A0-vercel-region-%EC%B5%9C%EC%A0%81%ED%99%94%EB%A1%9C-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0 https://umsungjun.com/blog/lighthouse-90%EC%A0%90%EB%8C%80%EC%9D%B8%EB%8D%B0-%EC%B2%B4%EA%B0%90%EC%9D%80-%EB%8A%90%EB%A6%B0-%EC%9D%B4%EC%9C%A0-vercel-region-%EC%B5%9C%EC%A0%81%ED%99%94%EB%A1%9C-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0 Tue, 03 Feb 2026 11:16:40 GMT 실무 경험 현재 제 포트폴리오 프로젝트는 Next.js와 Supabase를 기반으로 구축되어 있으며, Vercel을 통해 배포 및 관리되고 있습니다. Autowini 프론트엔드 분리 프로젝트 CI/CD 파이프라인 구축 (Bitbucket 기반) 2 https://umsungjun.com/blog/autowini-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%B6%84%EB%A6%AC-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-cicd-%ED%8C%8C%EC%9D%B4%ED%94%84%EB%9D%BC%EC%9D%B8-%EA%B5%AC%EC%B6%95-bitbucket-%EA%B8%B0%EB%B0%98-2 https://umsungjun.com/blog/autowini-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%B6%84%EB%A6%AC-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-cicd-%ED%8C%8C%EC%9D%B4%ED%94%84%EB%9D%BC%EC%9D%B8-%EA%B5%AC%EC%B6%95-bitbucket-%EA%B8%B0%EB%B0%98-2 Mon, 19 Jan 2026 11:05:43 GMT 실무 경험 현재 오토위니에서는 React 기반으로 대부분의 프론트엔드 프로젝트를 분리하여 운영하고 있습니다. 필터 변경 시 메뉴가 접히던 문제, TanStack Query placeholderData로 해결 https://umsungjun.com/blog/%ED%95%84%ED%84%B0-%EB%B3%80%EA%B2%BD-%EC%8B%9C-%EB%A9%94%EB%89%B4%EA%B0%80-%EC%A0%91%ED%9E%88%EB%8D%98-%EB%AC%B8%EC%A0%9C-tanstack-query-placeholderdata%EB%A1%9C-%ED%95%B4%EA%B2%B0%ED%95%9C-%EB%B0%A9%EB%B2%95 https://umsungjun.com/blog/%ED%95%84%ED%84%B0-%EB%B3%80%EA%B2%BD-%EC%8B%9C-%EB%A9%94%EB%89%B4%EA%B0%80-%EC%A0%91%ED%9E%88%EB%8D%98-%EB%AC%B8%EC%A0%9C-tanstack-query-placeholderdata%EB%A1%9C-%ED%95%B4%EA%B2%B0%ED%95%9C-%EB%B0%A9%EB%B2%95 Thu, 15 Jan 2026 10:25:33 GMT 실무 경험 이번 글에서는 Autowini 필터 검색 페이지의 좌측 Accordion 메뉴에서 발생한 UX 문제를 계기로, TanStack Query의 placeholderData 옵션을 활용해 구조를 개선한… React SPA에서 메타 태그 중복 문제, 라이브러리 제작으로 해결하기 (feat. react-head-safe) https://umsungjun.com/blog/react-spa%EC%97%90%EC%84%9C-%EB%A9%94%ED%83%80-%ED%83%9C%EA%B7%B8-%EC%A4%91%EB%B3%B5-%EB%AC%B8%EC%A0%9C-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%A0%9C%EC%9E%91%EC%9C%BC%EB%A1%9C-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0-feat-react-head-safe https://umsungjun.com/blog/react-spa%EC%97%90%EC%84%9C-%EB%A9%94%ED%83%80-%ED%83%9C%EA%B7%B8-%EC%A4%91%EB%B3%B5-%EB%AC%B8%EC%A0%9C-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%A0%9C%EC%9E%91%EC%9C%BC%EB%A1%9C-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0-feat-react-head-safe Fri, 09 Jan 2026 09:39:20 GMT 실무 경험 안녕하세요, 프론트엔드 개발자 엄성준입니다. React i18n 다국어 처리 빌드 크기 최적화 2 https://umsungjun.com/blog/react-i18n-%EB%8B%A4%EA%B5%AD%EC%96%B4-%EC%B2%98%EB%A6%AC-%EB%B9%8C%EB%93%9C-%ED%81%AC%EA%B8%B0-%EC%B5%9C%EC%A0%81%ED%99%94-2 https://umsungjun.com/blog/react-i18n-%EB%8B%A4%EA%B5%AD%EC%96%B4-%EC%B2%98%EB%A6%AC-%EB%B9%8C%EB%93%9C-%ED%81%AC%EA%B8%B0-%EC%B5%9C%EC%A0%81%ED%99%94-2 Tue, 30 Dec 2025 11:25:44 GMT 실무 경험 기존에 작성했던 React i18n 다국어 처리 빌드 크기 최적화 1글에 이어지는 내용입니다. Autowini 프론트엔드 분리 프로젝트 CI/CD 파이프라인 구축 (Bitbucket 기반) 1 https://umsungjun.com/blog/autowini-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%B6%84%EB%A6%AC-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-cicd-%ED%8C%8C%EC%9D%B4%ED%94%84%EB%9D%BC%EC%9D%B8-%EA%B5%AC%EC%B6%95-bitbucket-%EA%B8%B0%EB%B0%98 https://umsungjun.com/blog/autowini-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%B6%84%EB%A6%AC-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-cicd-%ED%8C%8C%EC%9D%B4%ED%94%84%EB%9D%BC%EC%9D%B8-%EA%B5%AC%EC%B6%95-bitbucket-%EA%B8%B0%EB%B0%98 Thu, 27 Nov 2025 11:00:40 GMT 실무 경험 Autowini에서는 React로 분리 및 개선한 프론트엔드 프로젝트들이 여러 개 존재합니다. GitHub Copilot을 활용한 사용하지 않는 번역 키 제거 https://umsungjun.com/blog/github-copilot%EC%9D%84-%ED%99%9C%EC%9A%A9%ED%95%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EB%B2%88%EC%97%AD-%ED%82%A4-%EC%A0%9C%EA%B1%B0 https://umsungjun.com/blog/github-copilot%EC%9D%84-%ED%99%9C%EC%9A%A9%ED%95%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EB%B2%88%EC%97%AD-%ED%82%A4-%EC%A0%9C%EA%B1%B0 Thu, 13 Nov 2025 11:02:17 GMT 실무 경험 프로젝트 내 다국어(i18n)를 관리하다 보면, 기능이 변경되거나 삭제될 때마다 사용하지 않는 번역 키가 남게 됩니다. Autowini WEB 통합 프로젝트 Vitest 테스트 시스템 도입 https://umsungjun.com/blog/autowini-web-%ED%86%B5%ED%95%A9-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-vitest-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EB%8F%84%EC%9E%85 https://umsungjun.com/blog/autowini-web-%ED%86%B5%ED%95%A9-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-vitest-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EB%8F%84%EC%9E%85 Fri, 17 Oct 2025 06:11:04 GMT 실무 경험 web-www-front는 오토위니(AutoWini)에서 기존 JSP 기반의 레거시 페이지를 React로 분리 및 개선하기 위해 만들어진 통합 프로젝트입니다.