소개
React, TypeScript 기반 3년차 프론트엔드 개발자입니다. 협업툴 회사에서 여러 서비스가 공유하는 유저 모듈과 디자인 시스템을 유지보수한 경험이 있으며 현재는 임플란트 회사에서 환자 관리 시스템을 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 옵션으로 코드 스플리팅 적용
◦
◦
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로 공통 의존성 버전 관리
기능 개발
•
Recharts, TanStack Table로 치과, 기공소를 위해 환자 대시보드 개발
◦
기존 환자 관리 시스템과 유사한 커스텀 디자인이 필요하고 sort/filter 등 기능을 유연하게 조합해야 하는 상황에서 스타일 자유도가 높은 TanStack Table 선택
◦
테이블별 컬럼 설정(정렬, 필터링, 셀 렌더링)을 객체의 배열로 정의하고 공통 DataTable 컴포넌트에 데이터와 컬럼 설정만 전달하여 여러 화면에서 재사용
•
Google Maps API 기반 지도 커스텀 클러스터링 구현
◦
마커 데이터 변경 시 클러스터를 갱신하기 위해 geoJson를 useEffect 의존성으로 전달했으나 geoJson이 매 렌더마다 새 참조로 생성되어 컴포넌트 마운트 시점부터 무한 리렌더링 발생
◦
React DevTools Profiler로 원인을 추적해 ClusteredMarker에서 useMemo로 참조를 안정화해 해결
◦
클러스터링 라이브러리인 Supercluster에 마커 데이터를 추가하는 작업과 클러스터링 계산을 분리해 불필요한 연산 실행 제거
•
모달마다 반복되는 useState 선언과 콜백 전달로 비즈니스 로직과 오버레이 상태 관리가 혼재되는 문제를 overlay-kit 도입으로 해결, 관심사 분리 및 보일러플레이트 제거
•
매 mutation마다 useQueryClient 호출과 onSuccess 내 invalidateQueries 선언이 반복되는 보일러플레이트를 queryCache의 meta 속성을 이용해 중복 코드 감소
•
React-three-fiber를 이용한 치아 3D 이미지 뷰어 개발
•
Suspense, Error boundary를 이용한 로딩 및 에러 처리
DX 개선
•
기존에는 개발자가 코드를 수정하며 화면을 보여줘야 했으나 PostHog 피처 플래그를 도입해 기획자가 여러 구현 방안을 배포 환경에서 직접 전환하며 비교 가능
•
환경변수를 Slack DM으로 공유하던 보안 취약점을 Doppler 도입으로 개선, 환경별(dev/staging) 설정 중앙 관리
•
MSW로 API를 모킹해 백엔드 개발 일정과 독립적으로 프론트엔드 개발 진행
트러블 슈팅
Radix Dialog + Popover 버전 충돌 해결
•
Radix Dialog 내부에서 Popover 기반 DatePicker 사용 시, 날짜 클릭과 동시에 Popover가 닫히는 이슈 발생
◦
Dialog와 Popover가 서로 다른 버전의 react dismissible-layer를 참조하면서 외부 클릭 감지 로직이 충돌하는 것이 원인임을 파악해 pnpm dedupe으로 중복 의존성을 제거하여 해결
티맥스 와플, Frontend Engineer. (코어 모듈 팀)
통합 업무 플랫폼(메신저, 화상회의, 일정관리)의 유저 모듈을 배달 공제회, 포스코 도시락, 서울시 교육청, 농어촌 공사, 육군본부 5개 B2B 고객사 요구사항에 맞게 커스터마이징 및 유지보수. 사내 디자인 시스템 유지보수 병행 수습 발표 자료
유저 모듈 유지보수
React, TypeScript, TanStack Query, Vitest, React-Testing-Library
DX 개선
•
최대 1분까지 소모되는 HMR로 인한 개발 생산성 저하 해결을 위해 Rollup을 대체할 빌드 도구로 tsup, esbuild, Vite 비교 후 CSS 번들링과 HMR을 모두 지원하는 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 API 와 Web Worker로 UI 블로킹을 제거하고 이미지 용량 90% 감소(2MB → 200KB), 로딩 시간 90% 단축(730ms → 70ms)
•
React 18 동시성 기능(useTransition, useDeferredValue)으로 유저 검색 시 UI 블로킹 제거
•
일부 검색 케이스에 대응하는 API가 없어 기존 API 응답을 조합, 가공하는 과정에서 fxTs의 제너레이터 기반 지연 평가를 적용
코드 품질 개선
•
폼 상태 관리 및 검증 로직을 React Hook Form + Zod 기반으로 리팩토링 해 관련 코드 30% 감소
•
•
•
백엔드 API 응답과 프론트엔드 도메인 모델 간 구조 불일치로 Repository 계층에서 사용되던 any 타입을 API 응답 전용 타입으로 대체하여 런타임 오류를 컴파일 타임으로 이동시키고 백엔드 응답 변경 시 영향 범위를 Repository 매핑 로직으로 한정
•
프로필 컴포넌트를 Compound 패턴기반 합성 컴포넌트로 리팩토링하고 서비스별 요구사항에 따라 Compound/Flat 두 가지 인터페이스로 export하여 재사용성 개선
사내 디자인 시스템 유지보수
React, TypeScript, Emotion, Storybook, Rollup, Material UI
•
Emotion Interface의 선언적 확장을 이용해 여러 서비스에서 기본 디자인 토큰 외에 디자인 토큰을 TypeScript 타입 지원하도록 테마 오버라이딩 기능 개발 Blog
◦
디자인 시스템이 단일 테마만 지원해 고객사별 브랜드 색상 적용 불가, 각 팀이 색상 상수를 컴포넌트에 직접 하드코딩하는 방식으로 우회
◦
Emotion styled의 고정된 Theme 타입을 제네릭으로 변환하는 makeTheme 유틸 함수를 구현해 서비스별 테마 확장 지원
◦
props.theme에서 확장된 테마 타입까지 TypeScript 자동완성 지원
•
TypeScript 제네릭으로 as prop 기반 컴포넌트 다형성을 구현해 태그에 맞는 HTML 속성 타입 자동완성 지원
•
SWC를 도입해 스토리북 빌드 속도 개선(36초 ⇒ 10초)
사이드 프로젝트
2025.01 ~ 2025.07 (DESIGN 2, FE 2, BE 2) [PR]
연합동아리 DND에서 진행한 게이미피케이션을 접목한 독서 기록 서비스 (12기 대상 수상)
Next.js, TypeScript, TanStack Query, Tailwindcss, Turborepo, Storybook, Github Actions
기능 개발
•
MVP에서 본인 책장만 존재하던 구조에서 다른 유저 책장 방문 기능 추가로 URL 구조 변경 시 next.config.js의 rewrites로 기존 경로 접근자를 새 경로로 리다이렉트하여 하위 호환성 유지
•
Tanstack query의 HydrationBoundary로 서버에서 React Query 프리패칭, shouldDehydrateQuery 옵션을 커스텀해 서버 컴포넌트 워터폴 방지
•
next-auth 대신 Route Handler로 카카오 OAuth를 직접 구현. 인가 코드를 파싱해 백엔드 JWT를 쿠키에 저장
•
캐릭터 카드 캡처 기능 개발 시 Safari 브라우저의 리소스 최적화 정책으로 인한 이미지 누락 문제를 blob 사이즈 반복 검사로 해결해 크로스 브라우저 호환성 확보
서비스 검색 노출도 향상을 위한 SEO 최적화
•
신규 서비스로 검색 엔진 노출이 전무해 자연 유입 사용자 확보 어려운 문제 발생
•
모든 페이지 검색 색인을 생성해 서비스 검색 노출도 향상 및 자연 유입 사용자 확보
•
DX 개선
•
PR의 작업 범위, diff 크기, 제목 기반 라벨 자동화로 PR 시인성 향상 및 리뷰어 부담 감소
•
pnpm, Node 초기화를 복합 액션으로 추출해 워크플로우 중복 제거
•
Next.js 번들 크기 분석 스크립트 및 github actions 추가 [PR]
활동
2025.03
멀티패러다임 프로그래밍 베타리더
2023.07 ~ 2023.10
2023 오픈소스 컨트리뷰션 아카데미
•
교육
수상 및 자격증
•
•
AWS SAA(2026.04.04), 정보처리기사 (2020.09.04), SQLD (2021.06.25), OPIC - IM1(2025.03.19)
