미리보기

글로벌 게임(별이되어라2) 운영 플랫폼 개발 및 유지보수 담당

• 초기 개발 부터 배포와 운영, 유지보수 경험

프로젝트 기여

• 인벤토리 페이지 렌더링 최적화

  • Tanstack Table을 이용해 최대 10000개의 rows를 렌더링 할 필요가 존재

  • 문제 상황: 렌더링 속도가 2000ms 가 걸리는 문제가 발생

  • 해결 방법: 메모리 가상화 기술인 Tanstack Virtual 기능을 사용해 현재 보이는 row의 기준으로 50개의 rows로 렌더링을 제한했고, 그 결과 렌더링 속도가 2,000ms에서 82ms 개선되어 96%의 성능 향상

• Time Picker 문제 해결

  • 문제 상황: 시간 값을 입력받는 라이브러리인 React Time Picker에 Timezone 옵션이 없어, 게임 운영자(GM)이 선택한 Date 값 (ms) 이 브라우저의 Timezone 적용으로 인해 정확성이 떨어지는 문제 발생

  • 해결 방안

    
    문제 분석: 라이브러리에서 Date가 선택되면 new Date(input)을 통해 새로운 Date Object가 생성되고, 이 과정에서 Timezone이 강제로 적용되는 것을 확인

    
    CustomTimePicker 구현: 라이브러리 컴포넌트를 감싸는 CustomTimePicker를 구현하여, 보여주는 시간 데이터는 원본을 유지하고, 내부적으로 Timezone과 UTC를 제외한 ms 값을 저장하도록 설계

    
    데이터 사용: 완료 버튼 클릭 시, Backend API로 계산된 ms 값을 전송하고, 다시 값을 사용해야 할 때 내부적으로 저장한 ms에 Timezone과 UTC를 더해 게임 운영자(GM)에게 보여주는 방식으로 일관된 유저 경험 유지

• 게임 메일 시스템 성능 개선 및 데이터 검증

  • 대량 메일 발송 기능을 개선하기 위해, CSV 파일에 있는 유저의 닉네임을 기반으로 데이터베이스에서 계정 ID(AccountId)로 변환하는 기능을 개발(5000rows 기준 400ms 소요)

  • 대량의 메일 발송을 위해 CSV 데이터 형식에 대한 사전 유효성 검사 추가로 인한 발송 오류를 30% 감소

• JSON Table Viewer 구현

  • JSON 데이터를 Tree view가 아닌 Table view로 시각화 할 수 있는 JSON Table viewer 기능 구현

  • 사전 데이터 검증: JSON 데이터 형식의 유효성을 확인하기 위해 JSON.paresr를 사용하여 1차 검증

  • 구현 세부사항:

    • Table Viewer에서는 Props로 전달받은 JSON 데이터를 재귀적으로 탐색하여 데이터의 타입(Obejct, Arreay, Element)을 추론하는 로직을 구현

    • 추론 중 타입이 Element일 경우 반환하는 방식으로 처리

    • 10MB 크기의 JSON 파일을 기준으로 구문 분석 및 렌더링까지 약 4,000ms 소요

• Common Component, Common Custom Hooks 개발

  • 게임 콘텐츠 개발 속도에 맞추고, 게임 운영 플랫폼의 특성상 유사한 View를 가진 컴포넌트가 많아 중복된 코드를 줄이고 개발 속도를 높이기 위해 재사용 가능한 Common Component와 Common Custom Hooks를 개발

  • 재사용 가능한 Component: TypeScript의 Generic Type을 활용하여 EditDialog, Button, DataGrid, Toast 등 다양한 Common Component를 개발하여 각기 다른 상황에서 동일한 컴포넌트를 손쉽게 재사용

  • Custom Hooks 개발: 공통적인 로직을 추출 및 번역, UTC Convert, 서버 선택 기능 등 Custom Hooks를 개발

• 앱 내 글로벌 에러 핸들링 및 Loading, Toast 개발

  • RTK Query의 BaseQuery를 커스터마이즈하여 글로벌 에러 핸들링과 일관된 Toast 시스템 개발

  • 핵심 기능:

    • 로딩 상태관리: REST API 요청 시 응답 시간이 2,000ms 이상 소요될 경우, 로딩 페이지 Store에 loading:true 값을 Dispatch 하도록 구현하고 응답을 받는 즉시 loading: false 로 Dispatch할 수 있게 구현

    • 400번대 에러 처리: BaseQuery에서 Toast Page Store에 필요한 Flag를 Dispatch 하고 이를 600ms, 1000ms, 3000ms 동안 옵셔널하게 보여주는 시스템 개발하고 각 Query 함수별로 에러 핸들링을 개별적으로 적용할 수 있도록 errSkip: true 를 받아 Toast Page Store에 Dispatch skip 후 각 컴포넌트에서 핸들링 할수 있게 구현

    • 500번대 에러 처리: Backend Server 문제 외에 외부 API(OpenSearch, AWS Kinesis, Game Operate Server, DB 등)로 인해 업무 진행이 어려운 상황을 고려해 ErrorDialog 페이지를 만들어 상세한 에러 메시지를 확인 할 수 있게 개발하고 이를 통해 개발자는 에러를 보다 쉽게 추적할 수 있게 지원

스킬 섹션

• 프론트엔드: NextJS, Redux, RTK Query, MUI, React Hook Form, Docker

• 백엔드: NestJS

• 데이터베이스: MSSQL

• 언어: TypeScript

• 기타: 성능 최적화, UI/UX 개선, 글로벌 에러 핸들링, 세션 관리, 기능 개발

• WebSocket을 이용한 실시간 게임 채팅, 실시간 게임 플레이 개발 경험

• React Native를 이용한 앱 개발 경험