현재 프론트엔드 개발자로서 주로 웹 개발을 하고 있습니다. 개발자가 되기 전, 창업과 PO로서 작은 규모의 팀에서 운영 및 의미 있는 매출을 일으켜 본 경험이 있습니다.

애자일한 조직을 선호하며, 빠른 배포를 통해 사용자에게 더 나은 제품을 신속히 제공하는 것을 중요하게 생각합니다.

AI 도구를 적극 활용해 개발 생산성을 높이며, 빠르고 정확한 기능 구현을 지향합니다.

팀 또는 파트 차원의 구조적 문제 해결에도 꾸준한 관심을 가지고 기여하고자 합니다.

Contact.

Email [email protected]

Blog jvn4dev.tistory.com

GitHub github.com/jvn4dev

LinkedIn linkedin.com/in/jvn4dev

Work Experience.

ZEP(젭).

MAU 100만 정도의 웹 링크 하나로 누구나 쉽게 소통하고 즐길 수 있는 메타버스 서비스입니다.

현재 ZEP-Core와 관련된 개발을 하고 있습니다.

Frontend Developer 21.12 - current

센트리 정상화.

센트리 내 보고되는 에러가 파트 차원에서 깨진 유리창이 되지 않도록 센트리의 문제를 해결하여 개발자들이 에러를 신속하게 디버깅할 수 있도록 지원했습니다.

What I did.

• 센트리에 소스맵을 업로드하여 에러를 디버깅할 수 있도록 하되, 프로덕션 환경에는 해당 소스맵을 노출하지 않도록 빌드 스크립트 작성
• 에러 수집율 100%를 기준으로 100만개의 에러가 발생했고 이를 팀원들과 50만개 수준으로 감소
  • 크래쉬로 인해 앱이 죽어버리는 현상을 우선적으로 개선하는게 사내 가장 높은 우선순위였기 때문에 새로고침이나 튕기는 현상을 유발하는 에러를 최우선순위로 해결
• 관련 경험을 회고록으로 정리하여 공유하였습니다. (회고록)

Web-Rtc 관련 기능 개발.

라이브킷을 활용하여 구현된 Rtc 관련 기능을 개발하고 유지보수하고 있습니다.

What I did.

• 기존의 복잡한 전체화면 컴포넌트를 유지보수에 용이하도록 인터페이스 기준으로 재설계하여 리팩토링함
  • 기존 컴포넌트가 하나의 거대한 컨트롤러로써 많은 일을 하고 있어 역할과 책임을 분리하고 ui기준으로 선언적으로 컴포넌트를 분리
• 요구사항에 따라 브라우저 visibilitychange 이벤트를 통해 탭 전환 시 특정 트랙 PIP 모드 전환 구현
• 같은 track을 다른 컴포넌트에서 보여주는 경우 세션스토리지를 활용하여 각 컴포넌트간 상태 동기화

스페이스 플랜 결제 신규 기능 구현(v2) 및 리팩토링.

행사용 단기간 플랜 및 최대 동시 접속자 세분화 등 필요한 신규 UI를 구현하고 변경사항에 따른 컴포넌트를 재설계 하였습니다.

What I did.

• 재사용을 위해 많은 props와 복잡한 분기를 갖고있던 기존 컴포넌트를 합성 패턴을 활용하여 변경에 유연하고 유지보수에 용이한 컴포넌트로 재작성
• 기획상 여러 진입점이 존재하는 결제페이지를 nuqs(next-query-state)를 사용하여 사용자 결제 상태를 유지할 수 있도록 구현
• 변경된 UI에 따라 불필요한 데이터 요청과 그에 따른 Suspense를 제거하고 상수로 가격페이지를 구성하도록 수정

스페이스 플랜 구독 정기 결제 기능 구현.

기존 개발 및 출시했던 플랜 구독 정기 결제 기능을 개선하였습니다. 관련하여 서버와 클라이언트 각 기능 조직 별로 코드 리팩토링을 진행했습니다.

What I did.

• 적극적인 Suspense와 ErrorBoundary를 활용하여 컴포넌트의 비동기를 선언적으로 구현(회고록)
• 기존 여러 명이 작업하며 존재하던 각각의 다른 코드 컨텍스트와 중복을 프로젝트의 일관성에 맞춰 리팩토링
• 하나의 컴포넌트가 너무 많은 역할을 맡고 있던 부분을 SRP원칙에 맞춰 컴포넌트 분리
• Jest, React Testing Library를 활용하여 응답 데이터에 따른 복잡한 분기를 갖는 컴포넌트 통합 테스트코드 작성

React-Native 앱 개발.

Web-view형식의 플레이 화면을 제외한 React-Native 기반의 페이지들의 기능 개발 및 유지보수를 하고 있습니다. 프론트엔드 파트로서 Web개발을 기본적으로 담당하고 앱 관련 기능을 병행하여 개발하고 있습니다.

What I did.

• 유럽연합 계정보호법 GDPR(General Data Protection Regulation) 관련 이용약관 동의 및 개인정보 활용 동의 페이지 개발
• ZEP 앱 내 충전 재화(ZEM)의 글로벌 출시 대응을 위해 react-native-iap를 활용하여 인앱 결제 및 충전 프로세스를 구현 및 유지보수
• CodePush를 활용하여 별도의 심사과정 없이 빠르게 JS 기능 업데이트 및 유지보수

Sentry 도입.

다양하고 재현하기 어려운 클라이언트의 오류를 트래킹하고 신속한 대응을 위해 실시간 로그 취합 및 분석 도구인 Sentry를 도입하였습니다.

What I did.

• 현재 Nx(모노레포)로 구성된 프로젝트 내 정적 페이지 프로젝트와 플레이 화면 프로젝트에 Next.js 기반 Sentry 적용
• 프로젝트 별 공통으로 적용될 Sentry 설정은 모노레포 root에 sentry.base.config.ts로 별도의 모듈을 만들어 중복된 코드 작성 방지
• 각 프로젝트 특성에 맞춰 필요한 Sentry 설정을 통해 최적화 (성능 최적화가 필요한 플레이화면의 경우 enableTracing, replay 등의 기능 비활성화)

플레이 화면(play-app) 마이그레이션.

기존 레거시 코드로 이루어진 플레이 화면(play-app)을 Next.js 기반의 프로젝트로 마이그레이션 하였습니다. Nx(모노레포)를 활용하여 신규 프로젝트의 빠른 패키지 구성과 기존 프로젝트들과 디자인시스템 및 코드를 재활용합니다.

What I did.

• 플레이 화면 마이그레이션(회고록)
• 스페이스 설정 실시간 반영을 위한 EventEmitter와 Event Packet 구독을 통한 WebSocket 구현(스페이스 설정, 맵 설정, 유저 권한 초대)
• 복잡한 기능에 의해 잘게 쪼개진 설정 컴포넌트들의 Input을 Zod의 스키마와 React-Hook-Form을 활용하여 효율적으로 관리
• 효율적인 컴포넌트 유지보수를 위한 React-Query를 활용법을 통해 설정 기능 구현(React Query와 React Context)
• TypeScript 활용하여 Type-safe한 코드 작성

Skills.

Web

• HTML, CSS, JavaScript, TypeScript, Next.js(Pages Router), tailwindcss, React, Angularjs

Hybrid-App

• React-Native, TypeScript, Styled-Components

Cowork

• Jira, Notion, Slack, Figma

Personal Experiences & Others.