Portfolio · 2026

가독성 · 효율 · 최적화 · 최신 기술 — 네 축을 같은 무게로 다루는 프론트엔드 엔지니어.

작업 살펴보기 → 이력서 LinkedIn devgihonghong@gmail.com
MeetMate (Web)
2026.04 — 2026.05 Frontend Lead

MeetMate Web v4 — 레거시 RN 모노레포에서 분기한 신규 SPA

운영 중단 없이 RN+Electron 모노레포에서 React 19 SPA를 분기, 프론트엔드 단독으로 한 달간 로그인부터 호스트 기능 7배치까지 도달했습니다. 마지막에는 회귀 가드 라운드를 통과시키고 v3 레거시 89,724 라인을 일괄 제거해 Web v4를 단일 타깃으로 완주했습니다 (백엔드는 별도 팀원 담당).

  • 마이그레이션 완주 — 회귀 가드 라운드(WebSocket 18 도메인 + 멤버 시드 5종 차단)를 통과시킨 뒤, v3 레거시 1,233 파일 / 89,724 라인을 같은 날 일괄 제거.
  • FSD 경계 위반 475건 → 0건. lefthook + CI 양쪽에서 강제해 같은 방식으로 다시 깨질 수 없게 잠금.
React 19 TypeScript Vite + SWC Turborepo Feature-Sliced Design Zustand
케이스 스터디 읽기 →
MeetMate (Web)
2026.04 Frontend Engineer

50명 회의에서도 안 죽는 화상 그리드

50명 회의의 모바일 사용성을 회복했습니다. SFU 수신을 페이지 단위로 자르고, 화질 결정은 산발적 if문 대신 dpr·참가자 수·연결 품질을 입력으로 받는 단일 pure-function 모듈에서만 일어나도록 정리했습니다.

  • 50명 방 모바일 사용성 회복. 현재 페이지 외 참가자 SFU forward 차단으로 디코딩 부하 ~50개 → ~25개.
  • 화질 정책을 단일 pure-function 모듈로 통합. 입력 3종을 받아 해상도 헤드 버킷을 반환하는 구조로 if문 산재 종료.
lib-jitsi-meet VP9 simulcast Zustand Jotai Puppeteer React 19
케이스 스터디 읽기 →
MeetMate (Mobile)
2026.02 — 2026.03 Frontend Engineer

100명 회의에서도 끊기지 않는 RN 화상 그리드

50–100명 동시 입장 시 페이지 전환 검은 화면과 분당 100회+ 불필요 리렌더가 관찰되던 RN 화상회의를, 핫패스 알고리즘 복잡도부터 다시 짜 정상 사용 가능한 상태로 되돌렸습니다.

  • 100명 입장 시 핫패스 비교 횟수 10,000회 → 100회. Map 인덱스 도입으로 O(n) → O(1) 전환.
  • 입장 폭풍 처리량을 개별 `addTrack` 100회 → 배치 호출 1–2회로. 한 프레임 안에 끝나는 일이 되도록 마이크로배치.
React Native 0.77 Zustand 5 lib-jitsi-meet react-native-webrtc TanStack Query Jest
케이스 스터디 읽기 →
전체 프로젝트 보기 →
About

소개

2024년 중반부터는 새 제품의 거의 모든 라인을 Claude AI agent와의 페어 프로그래밍으로 작성합니다. 제 자리는 "무엇을 만들지 · 어떻게 설계할지 · 가독성과 효율을 어떻게 지킬지"를 결정하고 검증하는 곳입니다. 코드를 누가 쳤느냐보다, 결과가 빠르고 깨끗하고 다음 사람이 읽기 좋은지가 더 중요한 질문이라고 봅니다.

사내에서 AI agent 도입을 처음 추진했고 Claude 활용 세미나 를 직접 진행해 팀의 작업 방식을 함께 바꿔왔습니다. AI 도입 전엔 도중에 무너지던 마이그레이션·재구축 시도가 AI agent를 들이고 나서 안정적으로 완주하는 패턴이 됐고 — 운영 중단 없이 한 달 만에 완주한 MeetMate v4 재구축이 가장 분명한 예시입니다.

소개 더 읽기 →