프로젝트 소개
https://here-city.com
엔시티 찐팬인 친구의 기획으로 시작한 시즈니를 위한 웹페이지입니다.
시즈니의, 시즈니에 의한, 시즈니를 위한 서비스
기능은
- 레코드샵 : 키워드 맞춤 플레이리스트
- 엔슐랭 가이드 : 엔시티 팬들의 맛집 태그를 통합해서 지역별로 트위터 글들을 모아주는 서비스
- 엔가네 초이스 : 식사 메뉴 랜덤 추천
- 시티보드 : 엔시티 텍스트 대치 모음
- 네오스테이션 : 엔시티 춤동작으로 노래를 맞추는 게임
- 시즈니고사 : 엔시티 자컨 모의고사
- NBIT: 엔시티 팬들을 위한 MBTI 테스트
그동안 통계를 바탕으로
핵심 기능을 추려서 마이그레이션을 진행하려고 합니다
- 레코드샵
- 엔슐랭 가이드
- 시티보드
- NBIT
마이그레이션을 하는 이유
2년간 카페24에서 호스팅 하면서 서버비가 부담스러웠기 때문에
무료 배포가 가능한 클라우드 플레어를 이용하고자 마이그레이션을 결정했습니다.
업데이트를 멈춘 상황이기에 서비스를 중단할까도 고민했지만
아직도 꾸준히 방문해주시는 시즈니 분들이 계서서 서비스를 중단하기는 아쉬웠습니다.
개인적으로도 웹개발 병아리 학부생 시절 처음으로 실사용자들을 유치한 프로젝트이기에 애정이 큰 프로젝트이기도 합니다.
이번 기회에 마이그레이션 겸 리뉴얼을 진행하려 합니다.
기술 스택
이전 기술 스택
ejs, Javascript, express, css
이번에 사용하는 기술 스택
React, Typescript, scss
이번에 React로 마이그레이션 하면서 Vite를 사용하기로 했습니다.
빌드 속도도 빠르고 react+ts 템플릿을 지원하기 때문에
간편하게 초기 설정을 할 수 있었습니다.
또한 타입스크립트로 마이그레이션 하면서 타입들을 어떻게 유지보수가 쉽게 설계할 것인지 고민을 하면서 개발을 했습니다.
vitest와 msw를 사용해서 테스트 코드도 적용할 수 있었는데 테스트 코드 관련 포스팅은 따로 작성하겠습니다.
바뀐 부분
마이그레이션을 하면서 핵심 기능만 살리기로 했습니다.
디자인도 심플하게 가기로 했습니다.
레코드샵
예전 레코드 목록의 경우는 레코드판이 돌아가는 것 같은
애니메이션을 주기 위해 굉장히 노력했습니다.
하지만 들인 노력에 비해 편의성이 떨어진다고 생각을 해서
리스트 형태로 변경했습니다.
해당 서비스는 백엔드 없이 프론트 단에서 json파일을 불러와서 플레이리스트를 직접 만들기 때문에 타입스크립트를 사용함으로써 안정성을 확보할 수 있었습니다.
나머지 마이그레이션 예정 기능
1. 타이틀곡만 보기
2. 키워드 모두 해당되는 곡만 보기 기능
시티보드
시티보드 또한 레코드샵과 마찬가지로 UX향상을 위해 UI가 수정되었습니다.
해당 포스트는 마이그레이션이 완료될 때까지 지속적으로 수정될 예정입니다.
이번 마이그레이션을 통해 얻고 싶은 것
1. js->ts 마이그레이션을 통해 더 나은 코드 작성해보기
2. 테스트 코드 작성해보기
