📌  정보

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

📌  개요

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

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

📌  작업 내용

• 유저 상태 관리

  • 커스텀 훅(Custom Hook)을 활용하여 유저 상태를 관리하였습니다.
  • 로그인 여부, 서비스 동의 여부, 게임 캐릭터 생성 여부, 제재 여부와 같은 유저 상태의 중복 관리로 인해 코드의 복잡성이 증가했었습니다.
  • 이를 해결하기 위해 상태를 custom-hook-store에서 통합적으로 관리하고, 각 상태를 커스텀 훅을 통해 일관된 방식으로 불러와 사용하여 상태 관리 로직의 중복을 제거하고, 코드의 재사용성 및 유지보수성을 향상시켰습니다.
  • 💡 유저 상태 관리 코드 예시

• 게시판 개발 및 유지보수

  • 검색 효율성과 사용자 경험을 개선하기 위해 사용자가 검색한 결과를 파라미터(param)으로 관리하였습니다.
  • 검색 결과에서 검색 단어를 강조하여, 사용자가 쉽게 해당 단어를 확인할 수 있도록 했습니다.
  • Link: https://tr.rhaon.co.kr/community/runners/all?page=1

• 이벤트 페이지 개발

  • 이벤트 페이지의 레이아웃에 맞춰, 이벤트를 구현하여 사용자가 직관적으로 이해할 수 있도록 했습니다.
  • 게임 서비스 특성상, 2주마다 진행되는 이벤트의 개발을 저희 회사와 외주 팀이 함께 담당하고 있어, 각 팀 간의 프로세스를 조율하고 맞추는 작업을 진행하였습니다.
  • Link: https://tr.rhaon.co.kr/promotion/frame/78?from=eventSNB
  • 💡 이벤트 레이아웃 코드

• 테일즈런너 광장 개발

  • 사용자들이 웹페이지를 통해 방명록을 남기거나 자신의 글을 자유롭게 작성할 수 있는 커뮤니티 시스템 개발에 참여하였습니다. 이 시스템은 사용자 간 소통을 활성화하고, 웹 페이지에서 유저 참여도를 높이는 데 중점을 두었습니다.
  • jotai를 사용한 전역 상태 관리
    • 전역 상태 관리에 jotai를 사용한 이유는 간결하고 직관적인 API로 상태를 관리할 수 있기 때문입니다. 다른 상태 관리 라이브러리와 비교했을 때, jotai는 불필요한 리렌더링을 최소화하면서도 상태를 효율적으로 관리할 수 있어 성능 최적화에 유리했습니다. 또한, React의 useState처럼 단순하고 가벼운 방식으로 상태를 관리할 수 있어 개발이 용이했습니다.
  • react-query를 활용한 데이터 패칭 및 상태 동기화
    • 데이터 패칭과 상태 동기화에는 react-query를 사용했습니다. react-query는 자동 캐싱, 데이터 동기화, 리팩싱 및 에러 핸들링 등 많은 기능을 제공하여, 데이터를 효율적으로 관리할 수 있었습니다. 게시글 수정 후 데이터가 갱신되지 않는 문제를 해결하기 위해 react-query의 캐시 무효화(invalidation)와 자동 리패칭(auto-refetch) 기능을 활용하여 데이터가 항상 최신 상태로 유지되도록 보장했습니다.

📌  트러블 슈팅