Last updated: 2024.08.09
![transparent_circular_image.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/7389fef3-9494-4d5c-ac5a-54cb3325511a/6928f63f-ec9a-4a8b-a3cb-08e3ecedaad5/transparent_circular_image.png)
Contact.
Email [email protected]
Blog jvn4dev.tistory.com
GitHub github.com/jvn4dev
LinkedIn linkedin.com/in/jvn4dev
반갑습니다, 저는 정성준입니다.
혁신적이기보다 발전적인 개발자가 되기 위해 노력합니다. 프론트엔드 개발자로서 주로 웹 개발을 하고 있습니다. 개발자가 되기 전, 창업과 PO로서 작은 규모의 팀에서 운영 및 의미 있는 매출을 일으켜 본 경험이 있습니다.
좋은 제품이 만들어지는 것엔 개인적 역량보단 팀과 함께 만드는 시너지가 중요하다고 생각하여 다양한 직무의 구성원과 적극적으로 커뮤니케이션하고 협업하고 있습니다.
저는 _____ 하는 엔지니어입니다.
- 애자일한 조직을 선호하는 🏊🏻♂️
- 리팩토링을 통한 성장을 즐기는 ♻️
- 유지보수가 용이한 개발에 관심이 많은 ⚒️
- 자동차를 사랑하는 🚗
Work Experience.
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를 사용하였습니다.