히어시티 EJS -> React 마이그레이션 과정(~ing)

프로젝트 소개

https://here-city.com
엔시티 찐팬인 친구의 기획으로 시작한 시즈니를 위한 웹페이지입니다.

 

1. 레코드샵 : 키워드 맞춤 플레이리스트
2. 엔슐랭 가이드 : 엔시티 팬들의 맛집 태그를 통합해서 지역별로 트위터 글들을 모아주는 서비스
3. 엔가네 초이스 : 식사 메뉴 랜덤 추천
4. 시티보드 : 엔시티 텍스트 대치 모음
5. 네오스테이션 : 엔시티 춤동작으로 노래를 맞추는 게임
6. 시즈니고사 : 엔시티 자컨 모의고사
7. NBIT: 엔시티 팬들을 위한 MBTI 테스트

 

그동안 통계를 바탕으로
핵심 기능을 추려서 마이그레이션을 진행하려고 합니다

1. 레코드샵
2. 엔슐랭 가이드 -> 트위터 API 유료화로 고민 중,,
3. 시티보드
4. NBIT

 

마이그레이션 하는 이유

 

사실 팀원들의 개인 사정으로 콘텐츠 업데이트를 멈춘 상황이기에 서비스를 중단할까도 고민했지만
아직도 꾸준히 방문해주시는 시즈니 분들이 계서서 서비스를 중단하기는 아쉬웠습니다.

 

개인적으로도 웹개발 병아리 학부생 시절 처음으로 실사용자들을 유치한 프로젝트이기에 애정이 큰 프로젝트이기도 합니다.

 

2년간 서비스를 유지하면서 카페24의 서버비가 부담스러웠기 때문에
무료 배포가 가능한 클라우드 플레어를 이용하고자 마이그레이션을 결정했습니다.

또한 호스팅 업체를 변경하면서 기술 스택도 변경하고 테스트 코드도 적용할 예정입니다

 

 

기술 스택

기존 기술 스택
ejs, Javascript, express, css

현재 기술 스택
React, Typescript, scss

 

이번에 React로 마이그레이션 하면서 Vite를 사용하기로 했습니다.
빌드 속도도 빠르고 react+ts 템플릿을 지원하기 때문에 간편하게 초기 설정을 할 수 있었습니다.

 

또한 타입스크립트로 마이그레이션 하면서 타입들을 어떻게 유지보수가 쉽게 설계할 것인지 고민을 하면서 개발을 했습니다.

vitest와 msw를 사용해서 테스트 코드도 적용할 수 있었는데 테스트 코드 관련 포스팅은 따로 작성하겠습니다.

 

바뀐 부분

마이그레이션을 하면서 핵심 기능만 살리기로 했습니다.
디자인도 심플하게 가기로 했습니다.

레코드샵

 

이전 디자인

 

 

예전 레코드 목록의 경우는 터치 이벤트, 마우스 이벤트에 따라

레코드판이 돌아가는 것 같은 애니메이션을 주기 위해 굉장히 노력했습니다. 

 

하지만 들인 노력에 비해 사용자 편의성이 떨어진다고 생각을 해서 리스트 형태로 변경했습니다.

 

해당 서비스는 백엔드 없이 프론트 단에서 json파일을 불러와서 플레이리스트를 직접 만드는 방식을 선택했는데,

타입스크립트로 변경하면서 유지 보수성이 좋은 타입 설계를 생각하며 개발을 진행할 수 있었습니다.

 

또한 테스트 코드를 적용하여 안전성을 확보할 수 있었습니다.

 

나머지 마이그레이션 예정 기능
1. 타이틀곡만 보기
2. 키워드 모두 해당되는 곡만 보기 기능
3. 공유하기

 

 

시티보드

히어시티에서 사용자가 가장 많은 기능입니다

 

 

시티보드 또한 레코드샵과 마찬가지로 UX향상을 위해 UI가 수정되었습니다.

 

추가 예정 기능
1. 무한 스크롤 페이지네이션
2. 분류 추가

---

해당 포스트는 마이그레이션이 완료될 때까지 지속적으로 수정될 예정입니다.

 

이번 마이그레이션을 통해 얻고 싶은 것
1. js->ts 마이그레이션을 통해 더 나은 코드 작성해보기
2. 테스트 코드 작성해보기