Email: [email protected]
Github: https://github.com/DongjaJ
Portfolio: https://dongja.oopy.io/portfolio
Blog: ****https://velog.io/@ehdghks12
Linkedin: https://www.linkedin.com/in/donghwan-jeung-18537a229/
React와 TypeScript로 서비스 성능과 공통 UI 구조를 개선해 온 프론트엔드 개발자입니다.
여러 서비스가 공유하는 유저 모듈과 디자인 시스템을 유지보수하고, 치과, 기공소의 환자 관리 서비스와 클라우드 관리 대시보드를 개발했습니다. 번들러 마이그레이션으로 공통 라이브러리의 HMR을 60초에서 3초로 줄이고 대시보드의 초기 화면 표시 시간을 3초에서 1.5초로 단축한 경험이 있습니다.
API 클라이언트, MSW 핸들러 생성, 환경변수 중앙 관리 등 반복 작업과 개발 대기를 줄이는 환경도 구축했습니다.
사이드 프로젝트에서 디자이너와 인터랙션을 구체화하고 배포 시간과 인프라 비용를 개선하며 경험을 넓히고 있습니다.
2026.06 ~ 2026.09 (3개월)
OpenStack과 Kubernetes 기반 클라우드 관리 플랫폼 대시보드 개발 Next.js, TypeScript, TanStack Query
- OpenAPI 명세를 기반으로 TypeScript API 클라이언트와 MSW 핸들러를 생성해 백엔드 서버 실행 없이 주요 화면을 개발·검증할 수 있도록 개선
2025.03 ~ 2026.05 (1년 3개월)
치과, 기공소가 환자 정보와 보철 주문을 관리하는 웹 서비스 OneSpace의 프론트엔드 개발 React, TypeScript, TanStack Query
치과, 기공소의 환자 관리 및 보철 주문 업무 기능 개발
- 환자 관련 통계와 목록을 확인할 수 있도록 Recharts 기반 차트와 TanStack Table 기반 공통 DataTable을 구현하고, 화면별 컬럼 정의를 분리해 재사용
- 구강스캐너에서 생성한 3D 데이터를 웹에서 확인할 수 있도록 Three.js 기반 3D 뷰어 구현
- 임플란트, 인레이 등 보철 주문 내역을 문서로 제공하기 위해 주문 데이터 테이블을 PDF로 생성하는 기능 구현
초기 화면 표시 시간 단축
- 코드 스플리팅 적용, 폰트 경량화, CloudFront 도입, 리소스 유형 별 HTTP 캐시 정책 도입 등을 적용해 FCP 50% 단축 (3s → 1.5s), 스켈레톤 UI를 이용한 CLS 최적화 (0.209 → 0)
Google Maps 지도 마커의 불필요한 재계산 개선
- 병원, 기공소 위치를 지도에 표시하고 가까운 마커를 묶어 보여주는 기능에서 동일한 위치 데이터가 반복 로딩되는 원인 분석
- GeoJSON 변환과 고정 설정 객체에 useMemo를 적용해 참조를 유지하고 불필요한 클러스터러 초기화와 데이터 재계산 방지
- 위치 데이터 로딩과 지도 범위·줌에 따른 클러스터 조회를 분리해, 지도 이동·확대 시 기존 데이터 인덱스를 재사용하도록 구성
- 마커 표시 영역을 별도 컴포넌트로 분리하고 React.memo를 적용해 동일한 props에 대한 리렌더링을 건너뛰도록 구성
여러 화면에서 사용하는 서버 상태 처리 공통화
- 같은 API 요청의 Query 정의를 queryOptions로 재사용하고 화면 요구에 따라 useQuery, useSuspenseQuery의 옵션을 확장하도록 구성
- 각 Mutation에서 반복하던 캐시 무효화 호출 로직을 공통 queryCache로 옮기고 meta를 통해 캐시 갱신 대상을 선언적으로 관리하도록 개선
- Suspense와 Error Boundary를 적용해 페이지별 로딩 화면과 오류 처리 방식을 통일
환경변수 공유와 배포 과정 개선
- Slack DM으로 공유하던 환경변수를 Doppler로 중앙 관리하고, 환경별 설정을 구분하는 관리 체계 구축
- Bitbucket Pipeline의 독립 작업을 병렬화해 파이프라인 소요 시간 5분 → 1분 30초 단축
- AWS S3, CloudFront 기반 정적 배포 환경을 구성하고 어드민 등 추가 서비스에서 UI, 설정을 공유할 수 있도록 Turborepo 기반 모노레포 구축
날짜 선택 Popover가 비정상으로 닫히는 문제 해결
- Dialog 내부에서 날짜를 선택하면 Popover가 함께 닫히는 문제를 추적해 외부 클릭 감지에 사용되는 레이어 의존성의 중복 버전으로 이벤트 처리가 충돌하는 원인 확인
- pnpm dedupe로 중복 의존성을 정리해 날짜 선택 시 팝업이 비정상적으로 닫히는 문제 해결
2023.12 ~ 2024.11 (11개월, 경영 악화로 인한 임금 체불로 퇴사) - 기록 모음 + 블로그
통합 업무 플랫폼(메신저, 화상회의, 일정관리)의 유저 모듈을 고객사 요구사항에 맞게 커스터마이징 및 유지보수. 사내 디자인 시스템 유지보수 병행 수습 발표 자료
React, TypeScript, TanStack Query, Emotion, Storybook, Vitest
공통 라이브러리 개발 중 반복되는 대기 시간 개선 [Blog]
- 코드 저장마다 최대 1분을 기다려 작업 흐름이 끊기는 문제를 발견하고 Rollup → Vite 마이그레이션 제안 및 진행
- tsup, esbuild, Vite 중 CSS 포함 여부, HMR 지원 여부 그리고 팀의 유지보수 여건을 고려해 사용 경험자가 많은 Vite를 선택하고 캘린더, 메일, 조직도 등 타 서비스에 테스트 버전을 연결해 스타일, 타입 호환성 검증
- 변경 반영 시간 60초 → 3초, 빌드 시간 60초 → 20초 단축
공통 모듈의 번들, 이미지 처리 개선
- 공통 모듈의 번들 구성을 분석하고 Tree Shaking 전략을 개선해 번들 크기 400KB → 200KB 축소
- 서버에서 이미지를 전처리할 수 없고 기존 라이브러리의 유지보수가 중단된 환경에서 Canvas API 기반 이미지 리사이징 직접 구현
- 이미지 용량 2MB → 200KB, 로딩 시간 730ms → 70ms로 줄이고 OffscreenCanvas, Web Worker로 이미지 처리 작업을 메인 스레드에서 분리
- 대용량 유저 검색 시 입력에 우선 응답할 수 있도록 useTransition, useDeferredValue로 입력과 검색 결과 갱신의 우선순위 구분
고객사별 브랜드 테마 지원 [Blog]
- 디자인 시스템이 단일 테마만 지원해 각 서비스에서 브랜드 색상을 하드코딩하던 문제 개선
- Emotion Theme 타입을 제네릭으로 확장하는 makeTheme 유틸리티를 구현해 기본 디자인 토큰에 서비스별 토큰을 추가할 수 있도록 구성
- 기본, 확장 토큰 모두 TypeScript 자동완성을 제공해 고객사별 테마 적용과 타입 검증 지원
코드 품질 개선
- 백엔드 API 응답 전용 타입을 도입하여 Repository 계층의 any를 제거하고 API 변경 영향 범위를 Repository 내부로 한정
- 폼 상태 관리와 검증 로직을 React Hook Form, Zod 기반으로 통합
- Vitest, React Testing Library로 통합 테스트를 작성해 리팩토링 시 기능 동작 일관성 보장
- Profile 컴포넌트를 Compound Pattern으로 리팩토링하고 서비스 요구사항에 맞춰 Compound, Flat API를 함께 제공하여 재사용성 향상