📌  정보

• 기간: 2024. 08 ~ 2024. 11
• 역할: 테일즈런너 웹 프론트 개발 및 보수
• 참여인원: 3명
• 사용 기술
  • 테일즈런너 웹 → React, JavaScript, SWR
  • 테일즈런너 광장 → React, TypeScript, TanStack Query
• 링크: https://tr.rhaon.co.kr

📌  개요

기존에 테일즈런너는 스토브와 한게임 플랫폼을 통해 운영되었으며, 이로 인해 게임 운영의 주요 기능과 시스템이 외부 플랫폼에 의존하는 구조였습니다. 이에 게임 개발사인 라온엔터테인먼트는 운영 주권을 확보하고, 독립적이고 효율적인 운영 환경을 구축하기 위해 자체 운영 체제를 도입하기로 결정했습니다. 이러한 변화에 따라 새로운 웹페이지를 개발해야 했고, 이를 회사에서 외주로 맡아 진행하게 되었습니다.

어드민 서비스 개발 후, 웹 서비스의 개발에도 참여하여 성공적으로 프로젝트를 완료하였습니다. 이후, 웹 서비스의 유지 및 보수 업무를 맡아 안정적이고 지속 가능한 운영 환경을 구축하는 데 기여하였습니다.

📌  작업 내용

• 유저 상태 관리

  • 유저의 상태값을 기준으로 로그인 여부, 서비스 동의 여부, 게임 캐릭터 생성 여부, 제재 여부를 분리하여 관리하였습니다.
  • 각 유저 상태에 따라 custom-hook-store에 저장된 상태를 활용하고, 필요한 기능에 맞는 상태를 해당 훅을 통해 효율적으로 불러와 사용하는 방식으로 구현하였습니다.
  • 💡 유저 상태 관리 코드 예시

• 게시판 유지 및 보수

  • 게시판의 게시글 상태에 따라 제재 및 숨김 UI를 구현하여, 사용자에게 명확한 정보를 제공하였습니다.
  • 검색 결과에서 검색 단어를 빨간색으로 강조하여, 사용자가 쉽게 해당 단어를 확인할 수 있도록 했습니다.
  • Link: https://tr.rhaon.co.kr/community/runners/all?page=1
  • 💡 검색 하이라이팅 코드 예시

• 이벤트 페이지 개발

  • 게임 서비스 특성상, 2주마다 진행되는 이벤트의 개발을 저희 회사와 외주 팀이 함께 담당하고 있어, 각 팀 간의 프로세스를 조율하고 맞추는 작업을 진행하였습니다.
  • 이벤트 페이지의 레이아웃에 맞춰, 이벤트 개발을 효율적으로 구현하여 사용자가 직관적으로 이해할 수 있도록 했습니다.
  • 이벤트 페이지에서 이미지로 인해 발생하는 렌더링 속도 문제를 해결하기 위해, 이미지를 CDN(Content Delivery Network)으로 관리하여 렌더링 속도를 최적화했습니다. 이로 인해 이미지 로딩 시간이 40% 단축되었으며, 페이지 전반적인 응답 속도가 향상되었습니다.
  • Link: https://tr.rhaon.co.kr/promotion/frame/78?from=eventSNB
  • 💡 이벤트 레이아웃 코드

• 테일즈런너 광장 개발

  • 사용자들이 웹페이지를 통해 방명록을 남기거나 자신의 글을 자유롭게 작성할 수 있는 커뮤니티 시스템 개발에 참여하였습니다. 이 시스템은 사용자 간 소통을 활성화하고, 웹 페이지에서 유저 참여도를 높이는 데 중점을 두었습니다. 현재 서비스는 오픈 하지 않은 상태이며, 추후에 오픈 예정입니다.
  • jotai를 사용하여 전역 상태를 효율적으로 관리하였습니다. 이를 통해 상태 변경에 따라 빠르게 UI를 업데이트할 수 있었으며, 복잡한 상태 관리 로직을 단순화하여 개발 생산성을 높였습니다.
  • react-query를 활용하여 데이터 패칭과 상태 동기화를 구현하였습니다. 특히, 게시글 수정 후 데이터가 갱신되지 않는 문제를 해결하기 위해 캐시 무효화(invalidation)와 자동 리패칭(auto-refetch) 기능을 활용했습니다. 이를 통해 데이터가 항상 최신 상태로 유지되도록 보장하였습니다.

📌  트러블 슈팅