About
Since July 2023, I've been a frontend developer at Autowini, building and running the Web, Mobile, and Admin services for Autowini and WiniLogis.
While migrating JSP-based legacy services to React, I handled the full range of frontend work, from initial project setup and architecture to state management, performance, and SEO.
Beyond maintaining existing services and building new features, I've worked across areas like setting up CI/CD and building an authentication system.
Lately, I've been improving my development process with Claude Code at the center.
At work, I've applied it to building UI from screen images, refining UI and business logic with Agentation, and automating Playwright and Vitest tests with Claude Code Hooks.
I also started tracking plans, designs, progress, and results in Artifacts, which made the whole process from development to testing more efficient and cut development time by more than 50% compared to before.
When I can't solve a problem at work, I tend to keep looking for the cause after hours.
I write up what I learn along the way on my blog.
Experience
AutowiniFrontend Developer · 2023.07 ~ Present
An export platform that sells Korean used cars to overseas buyers.
Legacy page migration to React (Web · Mobile)
- Migrated legacy JSP pages to React and TypeScript step by step, leading the initial setup, folder structure, and shared architecture
- Embedded React into JSP pages piece by piece to lower migration risk, then moved the whole layout to a React SPA, fixing collapsing layouts and duplicate resource loading
- Carved out pages one by one: filter search, unified search, wishlist, shipping info, and PartWini unified search on Web, and wishlist, recently viewed listings, and shipping info on Mobile
- Consolidated scattered React projects into web-www-front and web-mobile-front and modularized shared UI and logic, cutting duplicate code by about 20%
- Reworked resource loading and added lazy loading on the filter search page, cutting load time for the same scenario 45s → 20s
- Rebuilt the global header and footer in React with SmartLink routing between JSP and React pages, lifting average Lighthouse performance and accessibility scores from the 10s → 70s
- Split React core into a vendor chunk with Vite manualChunks and fixed Akamai CDN cache policies to minimize static asset re-downloads
- Loaded JSON for 15 languages dynamically by language and page, shrinking the initial bundle by about 100KB
- Kept search filters in the URL with SearchParams-based state, and added skeleton UI, lazy-loaded images, and optimistic wishlist updates
Design system · Testing · Deploy automation
- Built a token-based design system with our designer and moved styling to Tailwind CSS
- Migrated Styled-Components to Emotion to fix style flicker (FOUC) under SSR
- Set up Vitest for key utilities and Playwright E2E tests for core user flows
- Built CI/CD on Bitbucket Pipelines with SSH key auth, incremental rsync deploys, Akamai Fast Purge cache invalidation, and a deploy notification bot
- Cut development time by over 50% with a Claude Code-centered workflow (first UI from screen images, auto-generated tests via Hooks, plans and progress tracked in Artifacts)
Keycloak authentication (Web · Admin)
- Customized 7 auth screens in React with Keycloakify, including login, sign-up, and password recovery
- Unified Web and Admin auth screens under one theme and supported 15 languages with i18next and Google Sheets translations
- Built a post-signup page for switching to a Buyer or Seller account, connecting authentication with service sign-up
- Automated access token refresh and shared API auth handling with Axios interceptors and updateToken()
Admin chat system
- Built real-time messaging and chat list sync over WebSocket with stomp.js, refreshing the list with a TanStack Query refetch on each incoming message
- Started as an iframe chat beside a JSP list, then moved to a unified React page with a draggable divider between list and chat
- Added image paste and drag-and-drop upload, keeping the chat pinned to the bottom even after images finish loading
- Alerted users to new messages through the browser tab title using visibilitychange and debouncing
- Fixed AVIF images downloading as broken JPGs on some Windows PCs by converting them with Canvas
- Fixed chat UI and Arabic text alignment broken by react-markdown's default styles, overriding only the styles that mattered
Video player quality selection
- Added manual 360p, 480p, and 720p quality selection to the Hls.js player
- Made AUTO pick a quality by comparing measured bandwidth with the bandwidth each level requires
Show 2 moreShow less
Claim submission system (Web · Mobile · App)
- Built a chat-style claim submission screen shared across web, mobile, and in-app webviews
- Supported 7 languages with a script that pulls Google Sheets translations as JSON
- Separated success and failure logic for each processing step with TanStack Query useMutation
Car History · Repair records
- Built Car History lookup pages for web and mobile (JSP)
- Built screens to add and edit paint thickness data and repair history, plus lookup templates
React · TypeScript · TanStack Query · Zustand · Tailwind CSS · Emotion · Keycloak · stomp.js · Vitest · Playwright · Vite · JSP
A logistics service for ocean freight quotes, bookings, and shipping schedules.
Build · SEO · Performance
- Migrated Webpack 5 to Vite, cutting dev server startup 39s → 148ms
- Used Claude Code to switch 177 environment variable references across 50+ files from process.env to import.meta.env in one pass
- Shrank the main bundle by about 77% with per-page lazy loading and code splitting, raising Lighthouse performance 34 → 70+
- Migrated Styled-Components to Tailwind CSS, eliminating the runtime cost of generating styles
- Improved LCP with WebP images, tuned video quality and a CDN, and preload plus fetchPriority on hero assets
- Built SeoHelmet to prevent duplicate meta tags, then generalized it and published it on npm as react-head-safe
- Set up canonical tags and a sitemap index (main · oceanfreight · shipping-schedule · blog · review)
- Split translation JSON into namespaces for dynamic loading, and removed 30 unused dependencies (18 legacy, 12 flagged by depcheck) along with unused translation keys
Global state: Redux Toolkit → Zustand
- Stripped out Redux Toolkit boilerplate and set a rule for structuring state (3+ values go in an object)
- Persisted only the state that needs it to localStorage with per-store persist
- Removed Redux Toolkit, react-redux, and redux-persist, cutting code 2,169 → 1,179 lines (about 45% less)
Country data DB migration · Dedicated API
- Moved phone country codes out of a frontend constants file (2,230 lines) into the DB and added a dedicated country API
- Replaced the old API that returned every code, cutting response size 229KB → 12.6KB, and dropped the constants file for another 11.3KB off the bundle
- Reshaped the data with TanStack Query select so logic in the existing 24 files stayed unchanged
Deploy migration (Jenkins → Bitbucket Pipelines)
- Moved the Jenkins deploy pipeline to Bitbucket Pipelines, standardizing deployment with Autowini
- Generated and deployed the sitemap automatically once a day with Pipelines Schedules
PWA
- Made the site installable on desktop and mobile home screens without a native app
- Kept data viewable offline with a Service Worker
Show 4 moreShow less
Shipping Blog · Buyer Review
- Built the blog list and detail pages (infinite scroll, mobile swipe) and redesigned them to be responsive
- Built Admin post creation, editing, and visibility settings with a React-Quill editor and drag-to-reorder images
- Sanitized admin-authored HTML with DOMPurify before rendering
- Built the Buyer Review board with pop-up playback for review videos
Freight rates · Guest booking · Quote emails
- Autofilled member details after login, and for guests, checked for an existing account and booked automatically
- Built freight rate lookup by destination country with ticket-style rate cards
- Let Admin send quotation emails built from booking data to multiple recipients
EUR · Invoices
- Built invoice PDF downloads (Web), plus Admin invoice creation and editing with PDF and Excel export
- Cached the EUR exchange rate for 24 hours to convert to euros with minimal API calls, and issued invoices in euros
Booking requests · Admin screens
- Built a responsive booking request screen with request and consultation chat
- Built Admin screens for booking stages, request history, consultations, and email logs, plus member management CRUD
- Built a 5-step How It Works guide page, redesigned the main page, and rebuilt the Admin design with Tailwind CSS
- Refactored the header and mobile sidebar, fixing clipping issues and removing 1,249 lines of code
React · TypeScript · Vite · TanStack Query · Zustand · Tailwind CSS · Styled-Components · React-Quill · React-pdf · i18next
Open source
v0.2.1 · 877 downloads in the past yearreact-head-safeA library that manages the document head in client-rendered React so meta tags don't pile up as duplicates.v1.11.2 · 3,093 downloads in the past yearContributions
- toss / es-toolkit4 PRsIncludes a bug fix for missing exports in the map and set modules
- daangn / stackflow1 PRUsed import type to prevent a runtime error
- mdn / translated-content11 PRsTranslated MDN docs into Korean and kept them in sync
- NaverPayDev / hidash12 PRsTests · Benchmarks · JSDoc
Skills
- Main stack
- React · TypeScript · Next.js
- State · Data
- TanStack Query · Zustand
- Styling
- Tailwind CSS
- Testing
- Vitest · Playwright
- Build · Deploy
- Vite · Bitbucket Pipelines · Vercel
- AI
- Claude Code · Gemini API
Contact
Work opportunities, thoughts on my posts, and music licensing inquiries are all welcome by email.