2024.01 ~ Present
E8IGHTHyundai Motor R&D data integration platform Digital Twin Federation integrated portal
Seoul, South Korea
Platform Development Team | Senior Researcher
TypeScriptReactNext.jsNest.jsTanStack-QueryZustandRecoilTailwind CSSShadcnMotionD3.jsCanvas APISocket.ioWebRTCStorybookFigmaDockerSentryAWS
Frontend platform architecture and standardization
- Unified the monorepo, shared UI package, Storybook design system, lint and i18n templates, and branching strategy into one standard, removing setup cost for new projects
- Migrated from CRA to Vite and Yarn Berry (PnP) and introduced Jenkins and Docker CI/CD, cutting CI builds from 10 minutes to under 2 (about 80%)
- Deployed Sentry on an internal server to centralize error logs, with alerts that surface incidents in real time
- Established the team's first commit stage quality gate with husky, lint-staged, and commitlint, enforcing lint, format, type checks, and commit conventions
- Building an AI native development environment with 15 custom commands and workflows, subagents and skills per role, and verification guardrails, so AI assisted development is the default
Internal platform that integrates Hyundai Motor R&D data into an ontology based knowledge graph. Led the frontend architecture and built the graph visualization SDK, LLM chat, and mapping editor.
Knowledge graph visualization SDK
- Designed the graph visualization SDK shared by the company's GraphRAG products, separating rendering and the d3-force layout engine into a core with no React dependency
- Exposed the engine through one imperative handle that hides implementation types, so internal rewrites never break call sites and the core is testable on its own
- Rendered to Canvas 2D instead of the DOM, redrawing only while the graph moves and stopping entirely when it is idle
- Improved label performance and sharpness with hybrid rendering, caching labels as bitmaps and drawing text directly at high zoom
- Kept fast changing state outside React and propagated updates only on real data changes, removing needless rerenders in large lists
- Expanded the graph by neighborhood instead of loading every node, canceling stale requests and discarding late responses so only the latest result applies
LLM chat integrated with the knowledge graph
- Routed WebSocket events to handlers for text, reasoning steps, and graph evidence, batching bursts of chunks into one frame to minimize rerenders
- Decoupled receiving from display with a token queue that drains at a steady pace, accelerates when it falls behind, and snaps to the received text on stop or error
- Parsed completed and pending text separately and rendered only completed text as markdown, so unclosed code blocks and partial formulas never break the layout
- Generated answers with GraphRAG over the graph's nodes and relations, and attached a graph query to each answer so the supporting subgraph renders on the adjacent canvas
Spreadsheet mapping editor
- Designed one mapping model that accepts spreadsheets in any layout, so a new format becomes ontology entities without a code change
- Built validation, preview, and deduplication into each step to prevent user error where mappings must be exact
- Implemented the grid from scratch with the feel of Excel, and saved defined layouts as templates to remove repeated work
Integrated portal for a government R&D program, designed and built alone as the sole full stack engineer. Built an operations shell on one authentication, authorization, and organization model, from a Next.js 15 App Router frontend to a NestJS backend, and delivered on schedule.
- Applied SSG, ISR, or SSR per route and forced authenticated pages to render dynamically, keeping private data out of the static cache
- Prefetched data in Server Components and hydrated the client TanStack Query cache, so the first screen renders without a loading state
- Built a Next.js BFF that keeps tokens in HttpOnly cookies and relays them to the backend as a Bearer header, so XSS cannot reach them
- Separated access and refresh tokens with rotation, reuse detection, merged concurrent refreshes, and full invalidation on password change
- Registered JWT verification and RBAC globally through APP_GUARD so no controller ships without authentication, with the server redirecting to login and the client interceptor refreshing in place on expiry
- Gated security settings behind environment variables so one deployment image serves both public HTTPS and internal HTTP
Company product suite (NAXiS, PMIS, NDX Cloud, and others)
Led frontend development for five company products.
NAXiS(ontology modeling tool)
- Built a visual ontology editor on React Flow, delegating viewport and events to the library and abstracting entity types, relations, and serialization myself, so library upgrades and domain changes stay independent
- Collapsed hundreds of edges on one node into relation group nodes, with custom SVG edges that merge identical relations automatically
- Used Dagre for layout while controlling when it runs and what it receives, with partial relayout on expand and collapse to keep interaction cheap
- Kept domain logic separate from the library, so several company products adopted the editor unchanged as a shared component
PMIS(project schedule and resource management)
- Rebuilt a tree of thousands of rows with lazy loading and virtual scrolling, cutting initial load from 12 seconds to 2 (about 80%)
- Parallelized drawing uploads with mutateAsync and Promise.all, taking 19 files from 4 minutes to 20 seconds, with optimistic UI and rollback
NDX Cloud(large scale image cloud platform)
- Abstracted four permission levels (organization, project, site, dataset) into one RBAC matrix for consistent access control down to the screen
- Fixed a 4,000 image upload bottleneck by parsing only the JPEG APP1 marker for EXIF (20 GB to 800 MB of memory) and uploading directly from the browser to S3 with presigned URLs (20 minutes to 10, 70% less server load)