성남하키리그(SNHL)

2023.07. - 2023.09. · 외주 프로젝트

프론트 1, 백엔드 1, 디자인 1

성남하키리그(SNHL)

경기도 성남시 체육회 소속의 하키 리그 정보(팀, 라인업, 경기 결과 등)를 제공하는 서비스

Demo

🔖 개요

성남하키리그(SNHL)에서 활동 중인 학교 선배의 추천으로 외주 프로젝트를 진행했습니다. SNHL은 여러 하키팀이 모여 리그 형식으로 경기를 치르는 조직으로, 리그 일정, 경기 정보, 팀 라인업과 결과를 기록하는 관리 시스템이 필요했습니다.

기존 사이트는 2000년대 초반에 제작된 노후화된 시스템으로, 성능이 낮은 서버에서 접속량 증가 시 사이트 차단 문제가 빈번히 발생했습니다. 또한, 관리자 페이지에서는 경기 정보 저장 유실과 라인업 정보 불일치 등 운영상 어려움이 있었습니다.

프로젝트의 주요 요구사항은 모바일 환경에 최적화된 반응형 웹 구현과 2030 세대를 겨냥한 현대적인 디자인 개선입니다. 이에 따라, 모바일과 PC 환경에서 모두 사용 가능한 반응형 웹을 설계하고, 여러 번 수정된 디자인 시안에 따라 UI를 구성했습니다.

결과적으로 하루 100명 이상의 사용자가 안정적으로 사이트를 이용하고 있으며, 관리 효율성과 사용자 만족도를 크게 향상했습니다.

📅 기간

2023.07. - 2023.09.

  • 7월 중순: 프로젝트 시작, 디자인 관련 회의 진행 (2주)
  • 8월: 개발 진행
  • 9월 초: 새로운 대회와 함께 사이트 런칭
  • 9월 말: 회원 피드백 반영(버그 수정, 캘린더 뷰 추가) 및 프로젝트 마무리

현재는 유소년 리그 서비스 확장을 위한 추가 기능 개발을 계획 중입니다.

📚 기술 스택

TypeScript, React, Firebase, Chakra-ui

프론트엔드에서 사용된 기술 스택은 위와 같습니다.

데이터베이스, 백엔드, 인증, 호스팅을 모두 Firebase로 구축했습니다. 개발 인력이 저를 포함하여 두 명이었고 빠른 시간 내에 안정적인 서비스를 제공하기 위함이었습니다. 또한, Firebase에 모든 솔루션을 통합할 경우 요금 관리(클라이언트가 직접 지불하도록)에 용이하다는 장점이 있었습니다.

🧩 CSR과 useApi hooks

SNHL는 PrivateRouter를 사용해 로그인한 사용자만 접근할 수 있도록 페이지를 구성했습니다. SEO(검색 엔진 최적화)가 필요 없기 때문에 CSR(Client-Side Rendering) 방식을 사용했는데요, 이 때 네트워크 호출 부분에서 중복 호출이 잦은 것을 확인했습니다.

네트워크 호출은 useEffect 훅을 사용해 컴포넌트가 마운트 될 때마다 호출됩니다. '이전 버튼'을 통해 페이지를 뒤로 이동해도 useEffect가 호출되니 재호출이 이루어지게 되죠.

이를 어떻게 해결할지 고민하다 캐싱을 통해 중복 호출을 방지하고자 했고, axios와 SWR 라이브러리를 사용해 useApi 훅을 구현했습니다. 이 훅은 네트워크 호출 결과를 캐싱하고, 캐싱된 데이터가 신선하다면 이를 반환하는 방식으로 동작합니다.

이러한 개선을 통해 중복 호출 문제를 효과적으로 해결했으며, 네트워크 호출 로직을 컴포넌트 상단으로 분리함으로써 코드 가독성 또한 크게 향상시킬 수 있었습니다.