모든 경력

2024.03 - 2026.03

(주)크래프타

Frontend Engineer

Next.jsTypeScriptstyled-componentsReact Query

담당 서비스

TMM (Take My Money)

통합 커머스 플랫폼

  • · 상품 판매
  • · 행사 티켓 판매
  • · 해외 배송 대행

TMMBOX

해외 배송 대행 서비스

TMM Event

온·오프라인 행사 주문·결제 서비스

담당 업무

  • ·주문/결제 도메인 개발 및 유지보수
  • ·레거시 코드 리팩토링
  • ·프론트엔드 아키텍처 개선
  • ·성능 최적화
  • ·빌드 최적화

주요 성과

주문·결제 로직 리팩토링

문제

서비스 초기에 작성된 코드로 인해 동일한 결제 로직이 여러 페이지에 중복 구현되어 있었습니다. 신규 기능 추가 시 여러 페이지를 동시에 수정해야 했고, 버그 발생 시 영향 범위를 파악하기 어려웠습니다.

해결

  • · 공통 컴포넌트 및 유틸 함수 분리
  • · 주문/결제 비즈니스 로직 재설계
  • · 책임 기반 구조로 리팩토링

결과

  • ·신규 기능 개발 시 수정 범위 감소
  • ·디버깅 시간 단축
  • ·유지보수성 향상

React Query + Suspense 도입

문제

동일한 API를 여러 컴포넌트에서 반복 호출하여 불필요한 네트워크 요청과 렌더링이 발생했습니다.

해결

  • · React Query 도입
  • · Query Key 표준화
  • · 캐싱 전략 수립
  • · Suspense 적용

결과

  • ·중복 API 요청 감소
  • ·불필요한 렌더링 감소
  • ·EC2(Next·API 공존) CPUUtilization 약 20% 감소

빌드 최적화

문제

빌드 결과물의 크기가 지속적으로 증가하고 배포 시간이 길어지고 있었습니다.

해결

  • · 불필요한 패키지 제거
  • · 캐시 전략 개선
  • · 빌드 프로세스 분석 및 최적화

결과

  • ·빌드 결과물 용량 약 60% 감소
  • ·배포 시간 단축
  • ·CI/CD 효율 향상

개선 경험

결제 시스템 구조 개선

기존 구조

PaymentPage
├── Product
├── Coupon
├── Delivery
├── Point
└── PG

각 화면에서 결제 계산 로직 수행

개선 구조

PaymentPage
└── PaymentService
    ├── CouponCalculator
    ├── PointCalculator
    ├── DeliveryCalculator
    └── OrderValidator

개선 효과

책임 분리재사용성 증가테스트 용이성 향상디버깅 범위 축소신규 기능 추가 비용 감소