정동환 (Jeung Donghwan)

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

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

소개

React, TypeScript 기반 2년차 프론트엔드 개발자입니다. 협업툴 회사에서 여러 서비스가 공유하는 유저 모듈·디자인 시스템을 유지보수·확장했고, 현재는 임플란트 회사에서 환자 관리 시스템을 1인 FE로 설계부터 배포까지 주도하고 있습니다.

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

현재는 애니메이션과 인터랙션을 학습하며 접근성을 유지하면서도 매끄러운 사용자 경험을 제공하기 위해 노력하고 있습니다. Blog

경력

오스템 임플란트, Frontend Engineer.

2025.03 ~

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

성능 최적화

Mobile, Slow 3G 네트워크 기준 FCP 50% (6s → 3s) 단축

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

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

S3 단독 구조에서 CloudFront 도입하고 리소스 유형별 캐시 전략을 분리 설계

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

테이블 필터/정렬 변경 시 queryKey가 매번 새 쿼리로 인식되어 발생한 테이블 깜빡임을 placeholderData: keepPreviousData 옵션으로 새 데이터 렌더링 전까지 이전 데이터를 표시하여 해결

프로젝트 인프라

BitBucket Pipeline 기반 CI/CD 구성

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

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

Turborepo를 이용한 모노레포 + pnpm Catalog로 의존성 관리

공유 설정, 디자인 시스템, Storybook 패키지 분리

기능 개발

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

기존 환자 관리 시스템과 유사한 커스텀 디자인이 필요하고 sort/filter 등 기능을 유연하게 조합해야 하는 상황에서 스타일 자유도가 높은 TanStack Table 선택

테이블별 컬럼 설정(정렬, 필터링, 셀 렌더링)을 객체의 배열로 정의하고 공통 DataTable 컴포넌트에 데이터와 컬럼 설정만 전달하여 여러 화면에서 재사용

상태 관리 구조 개선으로 불필요한 useEffect/리렌더링 제거

URL QueryString 상태 제거, 서버 상태는 React Query로 일원화

파생 가능한 값은 상태 대신 계산으로 처리

DX 개선

기존에는 개발자가 코드를 수정하며 화면을 보여줘야 했으나 PostHog 피처 플래그를 도입해 기획자가 여러 구현 방안을 배포 환경에서 직접 전환하며 비교 가능

환경변수를 Slack DM으로 공유하던 보안 취약점을 Doppler 도입으로 개선, 환경별(dev/staging) 설정 중앙 관리

@t3-oss/env로 환경변수 타입 검증 자동화, 누락이나 타입 불일치 시 빌드 단계에서 사전 차단

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

트러블 슈팅

Radix Dialog + Popover 버전 충돌 해결

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

Dialog와 Popover가 서로 다른 버전의 react-dismissible-layer를 참조하면서 외부 클릭 감지 로직이 충돌하는 것이 원인임을 파악해 pnpm dedupe으로 중복 의존성을 제거하여 해결

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

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

메신저, 화상회의, 일정관리 등 통합 업무 플랫폼의 유저 모듈 및 사내 디자인 시스템 유지보수 수습 발표 자료

유저 모듈 유지보수

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

DX 개선

최대 1분까지 소모되는 HMR로 인해 개발 생산성이 낮은 상황을 해결하고자 Rollup에서 Vite로 마이그레이션해 빌드 시간 67% 단축 (60초 → 20초), HMR 95% 개선 (60초 → 3초) [Blog]

Husky, Lefthook, Commitlint를 도입해 커밋 컨벤션 및 포맷팅 검증 자동화

성능 최적화

번들 사이즈 50% 감소 (400KB → 200KB)

rollup-plugin-visualizer로 분석 후 Lodash → Lodash-es, moment.js → date-fns 전환, yarn-deduplicate를 이용해 중복 의존성 제거, sideEffects 속성을 추가해 라이브러리 차원에서 트리 셰이킹 지원

고용량 이미지로 인한 로딩 지연을 해결하기 위해 서버측 처리가 불가하고 기존 라이브러리의 유지보수가 중단된 상황에서 Canvas API 기반 리사이징 로직을 직접 구현. OffscreenCanvas + Web Worker로 UI 블로킹을 제거하고 Safari 이미지 회전 이슈를 userAgent 기반 분기 처리로 해결. 이미지 용량 90% 감소(2MB → 200KB), 로딩 시간 90% 단축(730ms → 70ms)

React 18 동시성 기능(useTransition, useDeferredValue)으로 유저 검색 시 UI 블로킹 제거

일부 검색 케이스에 대응하는 API가 없어 기존 API 응답을 조합·가공하는 과정에서 fxTs의 제너레이터 기반 지연 평가를 적용

코드 품질 개선

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

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

백엔드에서 내려주는 응답값을 이용해 채팅방 이름과 이미지를 보여주는 과정에서 복잡한 조건문을 읽기 쉽게 작성하기 위해 ts-pattern과 fxTs를 이용한 패턴 매칭 적용

백엔드 API 응답과 프론트엔드 도메인 모델 간 구조 불일치로 Repository 계층에서 사용되던 any 타입을 API 응답 전용 타입으로 대체하여 런타임 오류를 컴파일 타임으로 이동시키고 백엔드 응답 변경 시 영향 범위를 Repository 매핑 로직으로 한정

프로필 컴포넌트를 Compound 패턴으로 리팩토링하고, 서비스별 요구사항에 따라 Compound/Flat 두 가지 인터페이스로 export하여 커스텀 레이아웃이 필요한 서비스와 단순 사용이 필요한 서비스 모두 대응

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

React, TypeScript, Emotion, Storybook, Rollup

여러 서비스에서 기본 디자인 토큰 외에 디자인 토큰을 추가할 수 있는 테마 오버라이딩 기능 개발 Blog

TypeScript의 제네릭과 ComponentProps, Emotion의 as prop으로 컴포넌트 다형성 지원

SWC를 도입해 스토리북 빌드 속도 개선(36초 ⇒ 10초)

사이드 프로젝트

SBOOKY

2025.01 ~ 2025.07 (DESIGN 2, FE 2, BE 2) [PR]