미리보기

2년 8개월간 아마추어 스포츠 플랫폼, 라이브 커머스, 중앙 인증 서비스 등 웹 서비스 전반을 경험했습니다.

1. 서비스 설명

아마추어 스포츠를 위한 경기 생성, 기록, 커뮤니티 플랫폼(https://studio.camerafi.com)

2. 주요 성과

2.1 코드리뷰 문화 정착 및 자동화

• 배경: 리뷰 기준 불일치와 지연으로 코드 품질과 일정 관리에 어려움 발생

• 해결: PR 템플릿·코멘트 포맷을 적용하고 자동화 프로세스 기획과 코딩 컨벤션 정립을 주도

• 성과: 리뷰 효율 및 품질 향상, 코드 스타일 오류 사전 차단, 신규 인원 온보딩 효율 높임

2.2 Tanstack Query 도입 및 키 관리 표준화

• 배경: 복잡한 서버 상태 관리와 중복 API 호출 문제

• 해결:

  TanStack Query 기반 서버 상태 관리 도입,

  데이터 접근 키를 표준화,

  도메인별 캐시 전략 수립

• 성과:

  useState, useEffect 기반 로직 대비 30% 코드 라인 감소,

  중복 API 호출 80% 감소

기술 스택: React, Next.js, TypeScript, Mui, Firebase, Tanstack-Query

1. 서비스 설명

여러 서비스에서 하나의 계정으로 가입·인증이 가능한 Single Sign-On 로그인 서비스

2. 주요 성과

2.1 Sentry 로그 유형별 분류 & 필터링 체계 수립

• 배경: 에러 로그 속에서 핵심 이슈를 파악하는 데 어려움

• 해결:

  주요 이슈를 기능별로 그룹핑 및 분류,

  불필요한 네트워크/Chunk 에러 필터링

• 성과:

  불필요한 이벤트 필터링,

  핵심 이슈 그룹핑하여 에러 분석 및 팀 전체 대응 시간 단축

2.2 크로스 플랫폼 인증 개선

• 배경: iOS 웹뷰 서드파티 쿠키 차단, 안드로이드 팝업 차단 등 플랫폼별 인증 실패

• 해결:

  User-Agent 기반 플랫폼 감지 로직 구현,

  플랫폼별 폴백 전략 수립

• 성과:

  인증 성공률 99% 달성

2.3 JS -> TS로 전환

• 배경:

  런타임 타입 오류가 빈번히 발생하고, 협업 시 데이터 구조에 대한 합의가 불명확해 유지보수성이 낮음

• 해결:

  전환 리스크를 줄이기 위해 유틸 → 상태 관리 → 컴포넌트 순으로 점진적 마이그레이션 진행

• 성과:

  타입 관련 런타임 에러 감소,

  컴파일 단계에서 오류를 감지해 생산성과 디버깅 효율 향상

기술 스택: TypeScript, Firebase Auth , Sentry , Vite

1. 서비스 설명

유튜브 라이브 연동 실시간 상품 소개 및 판매를 지원하는 쇼피파이 라이브 커머스 앱(https://apps.shopify.com/camerafi-live-shopping)

2. 주요 성과

2.1 실시간 채팅 성능 최적화

• 배경: 채팅 메시지 누적 시 스크롤 렉, 프레임 드랍 등 렌더링 성능 저하

• 해결:

  react-window를 활용한 가상 스크롤링 구현,

  무한 스크롤로 초기 로딩 최적화

• 성과: 1000건 이상의 메시지 누적 상황에서도 60fps 유지

기술 스택: React , Next.js , TypeScript, Shopify Polaris , react-chartjs-2