CHZZK VOTE 리팩토링 일지

안녕하세요, 위즈입니다!

이전에 CHZZK VOTE 서비스를 만들어 소개드린 적이 있는데요,
어떤 서비스인지 궁금하시다면 아래 게시글을 확인해주세요

https://nomadcoders.co/community/thread/9652

CHZZK VOTE는 8개월간 서비스를 운영하면서 정말 많은 사랑을 받았는데요,

현재 Vercel hobby plan으로 운영되고 있으며, 한 달 할당량의 절반에 해당하는 5~60만 리퀘스트를 꾸준히 보여주고 있습니다.

(어린이날, 크리스마스와 같은 특별한 공휴일이 있는 달에는 사용량이 늘어나는 것도 재밌는 지점입니다)

서비스를 운영하면서 새로운 기능도 추가하고 버그를 해결하는 과정에서 근본적으로 프로젝트에 개선이 필요한 점이 많이 보였고,

이번에 이를 해결하기 위해서 전체 프로젝트 리팩토링을 진행했습니다!

기존 서비스의 문제점

1. Next.js 14 기반으로 작성되었으나 빠른 개발을 위해 익숙한 Pages router로 제작되었습니다.

2. 최초 페이지 로드(혹은 새로고침) 시 localStorage에서 채널 설정을 파싱하기 전 /sign 페이지로 리다이렉트되었다가 다시 index로 돌아옵니다.

3. 스타일링이 css variable을 기반으로 작성되면서 다크, 라이트 테마 구현에 불필요한 공수가 들어가고, css autocomplete가 작동하지 않습니다.

4. 치지직 채팅을 파싱하는 @kimcore/chzzk 라이브러리가 구버전입니다.

5. 재사용 가능한 섹션이 컴포넌트화되지 않았습니다.

6. 별도의 로그를 남기지 않아 누가 얼마나 사용중인지 알 수 없습니다.

개선 과정

1. 프로젝트 구조를 App router로 변경하였습니다.

2. 페이지 로드 시 localStorage 하이드레이션 여부를 판별하고, 그동안 로딩바를 표시합니다.

3. styled-components의 ThemeProvider를 활용해 테마에 따른 컬러를 자동으로 설정하고, autocomplete를 구현하였습니다.

4. 모든 라이브러리를 가능한 최신 버전으로 업데이트했습니다.

5. 채팅을 표시하는 Chat, 시청자를 뽑는 Roulette 기능을 컴포넌트화하고 사용하기 쉽게 리팩토링하였습니다.

6. 채팅 파싱에 사용되는 chzzk 라이브러리의 ChzzkChat 클래스를 각 페이지에서 직접 호출하지 않고, useChzzkChat 훅을 만들어 사용했습니다.

7. 구글 애널리틱스를 프로젝트에 포함시켜 사용 정보를 측정하고 확인할 수 있도록 했습니다.

8. 모든 태그를 본래 의도에 맞게 (button이 필요하지만 a 태그로 작성된 경우 등) 다시 변경하였으며, 마우스를 사용할 수 없는 환경에서도 키보드(tab)만으로 탐색이 가능하도록 접근성을 개선했습니다.

9. 모바일 UI를 크게 개선하였습니다.

실제 작업 내용은 다음 PR에서 확인하실 수 있습니다!

https://github.com/WisdomIT/chzzk-vote/pull/5

전체 프로젝트 리팩토링을 경험해본 건 이번이 처음이었는데요,

개선되는 프로젝트를 보며 즐겁기도 했고, 정말 배울 점이 많은 시간이었습니다!