소개
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로 의존성 관리
◦
공유 설정, 디자인 시스템, Storybook 패키지 분리
기능 개발
•
Recharts, TanStack Table로 치과, 기공소를 위해 환자 대시보드 개발
◦
기존 환자 관리 시스템과 유사한 커스텀 디자인이 필요하고 sort/filter 등 기능을 유연하게 조합해야 하는 상황에서 스타일 자유도가 높은 TanStack Table 선택
◦
테이블별 컬럼 설정(정렬, 필터링, 셀 렌더링)을 객체의 배열로 정의하고 공통 DataTable 컴포넌트에 데이터와 컬럼 설정만 전달하여 여러 화면에서 재사용
•
fetch + useEffect 기반 데이터 패칭을 React Query로 마이그레이션, 파생 가능한 값을 계산으로 대체하여 불필요한 리렌더링 및 useEffect 제거
•
React-hook-form, zod를 이용한 인증 화면 개발
•
google map api 기반 지도 커스텀 클러스터링 구현
◦
supercluster 객체를 useMemo로 메모이징하여 불필요한 재계산 방지
◦
useMapViewPort 훅으로 뷰포트 바운드를 추상화하고 useEffect로 GeoJSON 데이터·클러스터 옵션 변경 시 데이터를 자동 동기화하는 선언적 구조 설계
•
모달마다 반복되는 useState 선언과 콜백 전달로 비즈니스 로직과 오버레이 상태 관리가 혼재되는 문제를 overlay-kit 도입으로 해결, 관심사 분리 및 보일러플레이트 제거
•
매 mutation마다 useQueryClient 호출과 onSuccess 내 invalidateQueries 선언이 반복되는 보일러플레이트를 queryCache의 meta 속성을 이용해 중복 코드 감소
•
React-three-fiber를 이용한 치아 3D 이미지 뷰어 개발
•
Suspense, Error boundary를 이용한 로딩 및 에러 처리
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. (코어 모듈 팀)
통합 업무 플랫폼(메신저, 화상회의, 일정관리)의 유저 모듈을 배달 공제회, 포스코 도시락, 서울시 교육청, 농어촌 공사, 육군본부 5개 B2B 고객사 요구사항에 맞게 커스터마이징 및 유지보수. 사내 디자인 시스템 유지보수 병행 수습 발표 자료
유저 모듈 유지보수
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 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
•
여러 서비스에서 기본 디자인 토큰 외에 디자인 토큰을 추가할 수 있는 테마 오버라이딩 기능 개발 Blog
•
TypeScript의 제네릭과 ComponentProps, Emotion의 as prop으로 컴포넌트 다형성 지원
•
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로 기존 경로 접근자를 새 경로로 리다이렉트하여 하위 호환성 유지
•
HydrationBoundary + prefetchQuery로 서버에서 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)
