미리보기

게임 운영툴 구축 및 유지보수 담당

• 글로벌 게임 서비스의 프론트엔드 개발을 주도.

• NextJS와 Git submodule, Docker Compose를 이용해 개발환경 구축

• 게임 콘텐츠 업데이트 대응(2~3주 단위)

• 글로벌 서비스인만큼 Timezoen과 UTC를 유저에게 보여질 값에 대한 Timezone 핸들링을 통해 일관된 유저 경험을 제공

• 글로벌 에러 핸들링 시스템을 만들어

  백엔드 에러 상태코드를 기반으로 글로벌 에러 핸들링 및 노티피케이션 시스템을 구현하여 일관된 사용자 경험을 제공

• 게임 메일 시스템 구축으로 대량 메일 발송 시스템을 구축하고 인게임 아이템 관리 기능을 추가하여 운영 효율성을 높임

• 인벤토리 페이지 렌더링 성능을 1800ms → 200ms (88% 렌더링 속도 감소) 개선하여 대량의 아이템을 효율적으로 표시

• JSON 데이터 뷰어 개발로 비개발자와 개발자 모두를 위한 JSON 데이터 시각화(Table 구조)를 설계하여 데이터 가독성을 개선

• 승인 시스템 구축해 유저 정보 수정 및 권한 설정을 위한 티켓 기반 승인 시스템을 설계하고 구현하여 보안 강화 및 기록 관리 개선

• Axios, Redux, RTK Query를 이용한 REST API를 연동하고 비동기 데이터 핸들링과 전역 상태관리를 관리

• 유저에게 input을 받아야하는 곳에서 React Hook Form을 이용한 상태 관리와 에러 핸들링, 페이지 리랜더링 최적화

• NextJS를 넘어서 NestJS를 이해하고 설계 및 간단한 백엔드 코드 작성

• UTC 및 Timezone 문제 해결: 데이터를 UTC 기준으로 처리하고, UI에서 로컬 타임존으로 자동 변환되도록 구현하여 운영자가 시간을 정확하게 설정할 수 있도록 개선. 이를 통해 시간 데이터의 일관성을 유지하고 사용자 경험을 크게 향상.

• 공용 컴포넌트 제작: 제네릭 타입을 활용한 재사용 가능한 컴포넌트와 커스텀 훅(Button, Dialog, DataGrid 등)을 개발하여 콘텐츠 개발 시 반복 작업을 개선. 이로 인해 개발 효율성이 크게 증가하였고, 코드의 유지보수성을 높힘.

• 글로벌 에러 핸들링 시스템 구축: RTK Query의 BaseQuery를 커스텀하여 글로벌 에러 핸들링과 일관된 노티피케이션 시스템을 구축. 이를 통해 에러 발생 시 일관된 메시지와 대처 방안을 사용자에게 제공하여 사용자 경험과 시스템 안정성을 강화 및 오류 추적 개선.

• 게임 콘텐츠 업데이트 대응: 2~3주 단위의 게임 콘텐츠 업데이트에 맞춰, 게임 콘텐츠 데이터 조회 및 수정 기능을 신속하게 개발하여 운영팀, QA팀, 개발팀이 사용할 수 있게 제공.

• 게임 메일 시스템 성능 개선: 대량 메일 발송 기능을 개선하기 위해 유저 검색 및 CSV 파일 업로드 기능을 추가. 파일 데이터의 유효성 검사를 통해 발송 오류를 줄였으며, CS 팀의 업무 효율성을 크게 개선하는 데 기여.

• 인벤토리 페이지 렌더링 최적화: Tanstack Virtual 기능을 사용해 현재 화면에 보이는 항목만 렌더링하도록 최적화하여, 렌더링 속도를 88% 단축(1800ms -> 200ms). 이로 인해 페이지 로딩 시간이 대폭 개선.

• 다국어 번역 문제를 해결: JSON 파일 검증 및 금지 언어 필터링 시스템을 개발. JSON 형식 오류를 자동으로 검출하고, 번역에서 제외할 언어를 사전에 식별하여 오류를 예방. 이로 인해 데이터의 유효성을 높이고 게임 클라이언트의 안정성을 크게 향상.

• Table Viewer 구현: 비개발직군과 운영자도 쉽게 이해할 수 있는 Table 형태의 뷰어를 구현. JSON 데이터를 객체, 배열, 단순 데이터로 구분하여 MUI 스타일링으로 직관적인 UI를 제공했으며, 이를 통해 데이터 가독성을 크게 향상. 데이터를 효과적으로 시각화하고, 팀의 업무 효율성을 높이는 데 기여.

• 권한 관리 시스템 개발: 권한 관리 체계와 UI 구조를 설계하고, 상태 기반 UI 개선 및 티켓 검색과 필터링 기능을 구현하여 사용자 경험을 직관적으로 향상. 이를 통해 운영자의 업무 효율성을 크게 개선하고 복잡한 데이터를 효과적으로 관리할 수 있는 시스템을 제공.

스킬 섹션

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

• 백엔드: NestJS, MSSQL

• 언어: TypeScript, JavaScript

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

• 기술 스택: Next.js, NestJS, AWS Amplify, AWS EC2, AWS RDS

• 프로젝트 개요: 42서울 내 동료들간 지식, 취미 공유 서비스 개발

• 기여 내용:

  • Next.js 페이지 랜더링 최적화: Next.js의 dynamic 기능을 활용하여 페이지 랜더링 성능을 개선

  • 애니메이션 및 UI 개선: Observer 패턴을 활용한 스크롤 이벤트를 통해 페이지 내 Typography 요소의 애니메이션을 구현. 이를 통해 페이지에 역동적인 시각적 요소를 추가하여 사용자 인터페이스를 더욱 매력적으로 구현.

  • MVP 모델 구축: Ant Design을 사용하여 초기 MVP 모델을 신속하게 구축. 이 과정에서 디자인 시스템을 적용하여 일관성 있는 UI를 제공.

  • CI/CD 파이프라인 구축: Github Action과 AWS Amplify를 사용하여 CI/CD 파이프라인을 자동화. 이를 통해 코드 변경 사항이 신속하게 배포되었고, 개발 및 배포 프로세스의 효율성을 크게 향상.

  • 클라우드 리소스 관리: 약 4개월 동안 운영된 후, AWS 크레딧 만료로 인해 로컬 서버로 이전하면서 데이터베이스 손실이 발생. 이 과정에서 클라우드 리소스 관리의 중요성과 데이터 백업 전략의 필요성을 깨달았으며, 이러한 경험을 통해 클라우드 기반 프로젝트의 리스크 관리 능력을 강화.

• 기술 스택: Next.js, Docker, MongoDB, WebSocket

• 프로젝트 개요: Next.js와 WebSocket을 활용하여 실시간 게임과 채팅 서비스를 구현한 과제 프로젝트. 페이지 설계부터 WebSocket 커넥션 관리, 실시간 기능 구현까지 다양한 프론트엔드 작업을 포함. 실시간 상호작용이 중요한 게임과 채팅 기능을 안정적으로 제공하기 위해 최적화된 구조를 설계.

• 기여 내용:

  • 페이지 설계 및 UI 구현: Next.js를 사용하여 전체 페이지 레이아웃 및 UI를 설계하고 구현. 사용자 친화적인 인터페이스를 설계하여 게임과 채팅 기능의 직관적인 사용을 지원.

  • WebSocket 기반 실시간 채팅 서비스: WebSocket을 활용하여 실시간 채팅 기능을 구현. 서버와의 지속적인 커넥션을 통해 채팅 메시지를 즉시 전송하고 수신할 수 있도록 하였으며, 에러 핸들링 기능을 추가하여 안정적인 채팅 환경을 제공.

  • 커넥션 관리 및 중복 접속 방지: WebSocket을 통해 커넥션을 효과적으로 관리하고 중복 접속을 방지하기 위한 로직을 구현. 이를 통해 시스템의 안정성을 높이고, 사용자 경험을 개선.

  • 실시간 게임 기능 개발: 핑퐁과 같은 실시간 게임 기능을 구현하여 사용자 간의 즉각적인 상호작용을 가능하게 제공. 실시간 데이터 전송과 처리를 최적화하여 원활한 게임 경험을 제공.

  • 백엔드와의 협업: Git을 사용하여 백엔드 팀과 협업하며, API 통합 및 WebSocket 커넥션의 설계와 구현을 조율. 원활한 협업을 통해 프로젝트의 목표를 성공적으로 달성(3주 완성).

기술 스택:

React Native, Axios, JWT, NaverMap API, Naver Search API, Redux

프로젝트 개요:

커뮤니티 모임 매칭을 위한 크로스 플랫폼 애플리케이션을 개발하는 프로젝트로, 초기에는 백엔드 작업을 진행하다가 프론트엔드 구현에 참여. React Native를 사용하여 모바일 애플리케이션을 구축하고, 다양한 기능을 구현.

기여 내용:

• 프론트엔드 컴포넌트 제작: 초기 백엔드 개발 후, 프론트엔드의 작동 방식을 이해하기 위해 프론트엔드 개발자와 협력하여 UI 컴포넌트를 제작. 이 과정에서 React Native의 컴포넌트 기반 설계를 적용하여 UI 요소를 효율적으로 구성.

• Axios 커스터마이징 및 JWT 핸들링: Axios를 커스터마이즈하여 API 요청을 관리하고, JWT를 로컬 및 보안 저장소에 저장하여 인증을 처리. 요청 헤더에 토큰을 추가하고, 토큰 만료 시 자동으로 재발급하는 로직을 구현하여 안정적인 인증 시스템을 구축.

• NaverMap 및 Naver Search API 통합: NaverMap API와 Naver Search API를 활용하여 장소 검색 및 지도 뷰 기능을 구현. 사용자에게 직관적인 위치 정보를 제공하여 애플리케이션의 유용성을 높힘.

• 게시글 및 댓글 필터링: 게시글과 댓글에서 사용할 수 있는 필터링 기능을 구현하여, 사용자들이 원치 않는 콘텐츠를 쉽게 숨길 수 있도록 제공.

• Props Drilling 문제 해결: 페이지별로 Redux slice를 구성하고, 이를 통해 Props Drilling 문제를 해결. 개발자들과 협력하여 Redux를 도입하고, Props를 대체하여 데이터 흐름을 관리함으로써 코드의 유지 보수성과 가독성을 향상.