정동환 (Jeung Donghwan)

https://dongja.oopy.io/portfolio

Blog: ****https://velog.io/@ehdghks12

Linkedin: https://www.linkedin.com/in/동환-정-18537a229/

소개

성능 최적화와 프론트엔드 아키텍처 개선에 관심이 많은 React, TypeScript 기반 3년차 프론트엔드 개발자입니다. 협업툴 회사에서 여러 서비스가 공유하는 유저 모듈과 디자인 시스템을 유지보수했으며 이후 환자 관리 시스템 FE를 개발했습니다.

번들러 마이그레이션(HMR 95% 개선), 번들 사이즈 50% 감소, FCP 50% 단축 등 측정 가능한 성능 개선 경험이 있으며 피처 플래그, 환경변수 중앙관리, MSW 도입 등 팀이 더 빠르게 일할 수 있는 환경을 만들었습니다.

현재는 사이드 프로젝트를 통해 AWS ECS Native blue-green 배포 환경을 구축하며 운영 환경까지 경험을 확장하고 있습니다. Bake Time, Health Check 임계값 튜닝, NAT Instance, Spot Instance 활용 등 안정성과 비용을 함께 고려한 아키텍처를 고민하고 있습니다.

또한 디자이너와 협업하며 애니메이션과 인터랙션을 통해 접근성을 해치지 않으면서도 자연스러운 사용자 경험을 만드는 방법에도 관심을 가지고 있습니다. 사용자 경험과 시스템 안정성을 모두 아우르는 개발자를 지향합니다.

경력

수퍼게이트, Frontend Engineer.

2026.06 ~

MLOps 플랫폼 “Launcher” FE 개발 Next.js, TypeScript, TanStack Query

오스템 임플란트, Frontend Engineer.

2025.03 ~ 2026.05 (1년 3개월)

환자 관리 시스템 “OneSpace” 신규 개발 React, TypeScript, TanStack Query

성능 최적화

Google Maps 렌더링 성능 최적화

GeoJSON 객체 참조 변경으로 클러스터가 반복 생성되는 문제를 React DevTools Profiler로 분석

객체 참조를 안정화하고 마커 등록과 클러스터 계산을 분리하여 불필요한 렌더링과 연산 제거

FCP 50% 단축 (3s → 1.5s)

TanStack Router의 파일 기반 라우팅과 Vite manualChunks 옵션으로 코드 스플리팅 적용

Variable Font + 서브셋 폰트 제작으로 폰트 용량 최소화

CloudFront를 도입하고 리소스 유형별 캐시 전략을 분리하여 정적 리소스 로딩 최적화

스켈레톤 UI를 이용한 CLS 최적화 (0.209 → 0)

서버 상태 관리

queryOptions 기반 Query 정의를 재사용하고 useQuery, useSuspenseQuery에서 화면 요구사항에 맞게 옵션을 확장할 수 있도록 설계

queryCache.meta를 활용해 Mutation마다 반복되던 queryClient.invalidateQueries 호출을 제거하고 캐시 무효화를 선언적으로 관리

Suspense와 Error Boundary를 적용하여 페이지별 Fallback UI와 오류 처리를 동일하게 적용

기능 개발

Recharts, TanStack Table로 치과, 기공소를 위해 환자 대시보드 개발

Recharts 기반 통계 대시보드 구현

TanStack Table 기반 공통 DataTable 컴포넌트를 구현하고 컬럼 정의를 객체 기반으로 추상화하여 화면별 재사용

개발 생산성

Doppler를 도입하여 Slack DM으로 공유하던 환경변수를 중앙 관리하고 환경별 설정 관리 체계 구축

MSW로 API를 모킹해 백엔드 개발 일정과 독립적으로 프론트엔드 개발 진행

인프라

BitBucket Pipeline 기반 CI/CD 구성

parallel 옵션으로 파이프라인을 병렬화해 소요 시간 70% 감소 (5분 → 1분 30초)

AWS S3, CloudFront를 활용한 프런트엔드 정적 배포 인프라 구성

어드민 등 타 서비스 확장을 고려해 Turborepo 기반 모노레포 설계 및 구축, pnpm Catalog로 공통 의존성 버전 관리

트러블 슈팅

Radix Dialog와 Popover 버전 충돌 해결

Dialog 내부에서 DatePicker 사용 시 날짜 클릭과 동시에 Popover가 닫히는 이슈 발생

react-dismissible-layer의 중복 버전으로 인해 외부 클릭 감지 로직이 충돌한 원인을 파악

pnpm dedupe으로 중복 의존성을 제거하여 해결

티맥스 와플, Frontend Engineer. (코어 모듈 팀)

2023.12 ~ 2024.11 (11개월, 경영 악화로 인한 임금 체불로 퇴사) - 기록 모음 + 블로그

통합 업무 플랫폼(메신저, 화상회의, 일정관리)의 유저 모듈을 배달 공제회, 포스코 도시락, 서울시 교육청, 농어촌 공사, 육군본부 5개 B2B 고객사 요구사항에 맞게 커스터마이징 및 유지보수. 사내 디자인 시스템 유지보수 병행 수습 발표 자료

유저 모듈 유지보수

React, TypeScript, TanStack Query, Vitest, React-Testing-Library

DX 개선

HMR이 최대 1분까지 소요되는 문제를 해결하기 위해 tsup, esbuild, Vite를 비교 검증한 뒤 Vite로 마이그레이션하여 Build Time 67% 단축(60초 → 20초), HMR 95% 개선(60초 → 3초) [Blog]

Husky, Lefthook, Commitlint를 적용하여 커밋 컨벤션과 코드 포맷 검증 자동화

성능 최적화

번들 분석을 기반으로 Tree Shaking 전략을 개선하여 Bundle Size 50% 감소(400KB → 200KB)

서버 전처리가 불가능하고 기존 라이브러리 유지보수가 중단된 환경에서 Canvas API 기반 이미지 리사이징을 직접 구현하여 이미지 용량 90% 감소(2MB → 200KB), 로딩 시간 90% 단축(730ms → 70ms)

OffscreenCanvas와 Web Worker를 적용하여 메인 스레드 블로킹 제거

React 18 동시성 기능(useTransition, useDefferedValue)를 활용하여 대용량 유저 검색 시 UI 블로킹 제거

코드 품질 개선

백엔드 API 응답 전용 타입을 도입하여 Repository 계층의 any를 제거하고, API 변경 영향 범위를 Repository 내부로 한정

폼 상태 관리 및 검증 로직을 React Hook Form + Zod 기반으로 리팩토링 해 ****관련 코드 30% 감소

Vitest, React Testing Library로 통합 테스트를 작성해 리팩토링 시 기능 동작 일관성 보장

Profile 컴포넌트를 Compound Pattern으로 리팩토링하고 서비스 요구사항에 맞춰 Compound, Flat API를 함께 제공하여 재사용성 향상

사내 디자인 시스템 유지보수

React, TypeScript, Emotion, Storybook, Rollup, Material UI

Emotion Interface의 선언적 확장을 이용해 여러 서비스에서 기본 디자인 토큰 외에 디자인 토큰을 TypeScript 타입 지원하도록 테마 오버라이딩 기능 개발 Blog

디자인 시스템이 단일 테마만 지원해 고객사별 브랜드 색상 적용 불가, 각 팀이 색상 상수를 컴포넌트에 직접 하드코딩하는 방식으로 우회

고객사별 브랜드 테마를 지원하기 위해 Emotion Theme 타입을 제네릭으로 확장하는 makeTheme 유틸리티 구현

기본 디자인 토큰과 서비스별 확장 토큰 모두 TypeScript 자동완성을 지원하여 테마 확장성과 타입 안정성 확보

TypeScript 제네릭을 활용해 as prop 기반 컴포넌트 다형성을 구현해 태그에 맞는 HTML 속성 타입 추론 지원