Last updated: 2024.08.09

Contact.

반갑습니다, 저는 정성준입니다.

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

좋은 제품이 만들어지는 것엔 개인적 역량보단 팀과 함께 만드는 시너지가 중요하다고 생각하여 다양한 직무의 구성원과 적극적으로 커뮤니케이션하고 협업하고 있습니다.

저는 _____ 하는 엔지니어입니다.

애자일한 조직을 선호하는 🏊🏻‍♂️
리팩토링을 통한 성장을 즐기는 ♻️
유지보수가 용이한 개발에 관심이 많은 ⚒️
자동차를 사랑하는 🚗

Work Experience.

ZEP(젭).

MAU 130만의 쉽고 재미있는 메타버스 서비스입니다.

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

Frontend Developer 21.12 - current

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

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

What I did.

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

스페이스 플랜 구독 연간 정기결제.

기존 월간 결제 플랜 구독에 연간 결제가 가능하도록 기능을 추가 및 리팩토링을 하였습니다.

What I did.

여러 진입점을 통해 접근이 가능한 결제페이지 내부의 결제 관련 상태를 nuqs(useQueryState for Next.js)를 사용하여 동적으로 query param을 통해 상태를 관리하도록 구현

개선 사항

기존 정기 결제 페이지에 사용되던 결제페이지를 연간 결제에도 재사용하도록 대응했으나 생성 가능한 결제 형식에 따라 다른 결제 페이지에 랜딩되도록 처리하는 것이 도메인에 따른 컴포넌트의 역할 분리가 가능하여 추후 유지보수성 측면에서 더 좋은 방향이라는 것을 깨닳았습니다.

스페이스 플랜 구독 정기 결제 리팩토링.

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

What I did.

기존 여러 명이 작업하며 존재하던 각각의 다른 코드 컨텍스트와 중복을 프로젝트의 일관성에 맞춰 리팩토링
하나의 컴포넌트가 너무 많은 역할을 맡고 있던 부분을 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 등의 기능 비활성화)

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

접속할 수 있는 스페이스에 적용한 플랜(최대 동시 접속자 수 제한 등 플랜별 제공 기능 상이)의 금액이 등록된 카드로 정기적으로 과금되는 신규 기능을 구현했습니다.

What I did.

적극적인 Suspense와 ErrorBoundary를 활용하여 컴포넌트의 비동기를 선언적으로 구현(회고록)
구독 중인 플랜 목록 페이지 구현
플랜이 적용된 스페이스 상세 페이지 구현
플레이화면 스페이스 설정 내 플랜 관리 구현

플레이 화면 마이그레이션.

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

What I did.

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

정적 페이지 마이그레이션.

기존 레거시 코드로 이루어진 애셋스토어 및 랜딩페이지 등 각종 정적 페이지를 우선적으로 Next.js 기반의 프로젝트로 마이그레이션 하였습니다.

What I did.

Next.js 프로젝트 초기 구성 및 설계 참여
구현한 애셋스토어, 랜딩페이지 및 이벤트페이지 등 기존 페이지 마이그레이션
사용자가 방문한 기록이 있는 스페이스 목록을 보여주는 메인페이지 구현
방문했던 스페이스의 모든 목록을 한 번에 보여주던 기존 방식을 Intersection Observer Api를 통해 무한스크롤을 적용하여 LCP 200% 이상 개선(Intersection Observer를 알아보자)
Api 응답 캐싱을 위한 React-Query 도입을 위해 팀원들에게 세미나 내용 정리 및 공유(배민 주문팀 React-Query 세미나 내용 정리)

플레이 화면 기능개발.

다른 플레이어들과 영상통화(Web-rtc), 채팅(WebSocket), 미니게임(Phaser3) 등 소통 및 상호작용이 가능한 스페이스 내부에 각종 기능을 구현하였습니다.

What I did.

Dotnet Razor Pages와 Angularjs를 활용하여 필요한 기능들을 스프린트 기반으로 구현
채팅 및 플레이어의 상태 등을 스페이스 내부의 모든 인원에게 실시간으로 전파하기위해 WebSocket을 활용하여 기능 구현
Dotnet Razor Pages Controller를 활용하여 View에 필요한 데이터 구현(SSR)

애셋스토어.

젭 크리에이터들이 충전이 가능한 내부화폐(젬)를 이용하여 에디터에서 스페이스를 꾸미는 데 활용이 가능한 각종 오브젝트 애셋들을 사고팔 수 있는 스토어를 출시하였습니다.

What I did.

Dotnet razor와 Angularjs를 활용한 애셋스토어 페이지 초기 구현
오브젝트 소개 상세 페이지 구현
오브젝트 별 댓글 기능 구현(페이지네이션)
Dotnet Razor Pages Controller를 활용하여 View에 필요한 데이터 구현(SSR)

Projects.

Tech Blog.

2023.06 - current

jvn4.dev라는 이름의 개인 블로그를 운영하고 있습니다. 현업에서의 개발 경험, 개인 공부 내용과 팀원들에게 공유했던 내용 등 비정기적으로 글을 작성하고 업로드합니다. 이전에는 DevChung이라는 velog 블로그를 운영했습니다. 현재 기술적 리팩토링을 통한 개선을 진행 중 입니다.

What I did.

블로그 글은 언제 어디서나 노션으로 수정 및 작성이 편리하도록 Notion api를 사용하였습니다.