프로젝트 1차 회고 이후에 '세종스터디' 서비스도 오픈하고, 추가적인 서비스 개발일정은 없었기에 프로젝트의 안정성 및 코드 개선을 필요로 하여 같이 리팩토링을 진행하고자 했다.
리팩토링 하고자 했던 이유
1. 코드가 더럽다🤯
어느정도 설계 이후에 프로젝트를 진행했어야 했는데 컨퍼런스 기간에 맞춰야 했기도 했고, 프로젝트 특성상 학기 초에 오픈해야했기에 수정할 시간 없이 기능을 뽑아내는 데에 급급해 그대로 출시했다. 그러면서, 회원가입/로그인 페이지에 많은 오류가 발생했고, 이는 사용자들의 컴플레인으로 들어왔다. 아마 회원가입 안돼서 서비스 사용안한 사람들도 있지 않을까.. 싶다.. 지금은 어느정도 학습이 진행되기도 했고 이전보다 많은 경험을 했기에 코드를 개선해나가고자 한다.
2. 이미지가 너무 많다🖼️
다음은 세종피어 메인페이지이다. 대표 캐릭터가 존재해서 이를 활용한 디자인을 했는데 비율맞추고, 반응형을 제작하면서 다 망가져 글씨도 사진으로 대체하는 지경까지 왔었다. 그때는 이미지 다루는 것과 반응형이 어색했기에 사진으로 대체해서 로딩이 오래걸린다. 또한, SEO에도 적합하지 않고, 접근성에 관한 문제도 발생한다.
더 객관적이고 정확한 분석을 위해 Lighthouse를 통해 메인 페이지를 테스트 해봤다.
점수는 그냥 좋지도 않고 나쁘지도 않은 점수이지만 아래 세부사항에서 힌트를 많이 얻을 수 있었다.
성능부분에서도, 다른 부분에서도 이미지에 관한 지적이 많았고, 레거시 코드에 관한 이야기도 있었다.
3. 코드 안전성과 새로운 기술 도입🆕
다양한 오류들 중, 협업을 진행하면서 다른 사람이 작성한 코드를 이해하기 힘들었던 부분도 있고, 이로 인해 디버깅하는데도 시간을 조금 썼다. 그렇기에, 타입스크립트를 도입해서 타입 안정성을 높이고자 했다. 또한, 지난 회고에서도 말했지만 상태관리를 Context로 관리하는 것이 불편했는데 이 또한 다른 상태관리 툴을 도입하려 한다. 함께 스터디를 진행하고, 공유하며 코드의 성능이나 가독성 등 유지보수에 용이하도록 변경하고자 한다.
리팩토링 방향
1. 컨벤션과 설계🗺️
기존에는, 혼자 프로젝트를 진행하다 팀원이 합류했기에 설계를 하기 어려운 상황이었다. 서로의 코드를 알아보고, 서비스의 꾸준한 운영을 위해서 처음부터 탄탄히 설계하고, 컨벤션을 정해 통일된 코드를 작성하고자 한다. 레이아웃부터, 변수명 그리고 폴더 구조까지 어떤 사람이 봐도 이해할 수 있도록 깔끔히 하는 것이 목표이다.
2. 성능, SEO, 접근성 고려👓
HTML/CSS 에서는 마크업, 속성을 통해서 성능, SEO, 접근성을 고려하려한다. 시멘틱 마크업을 사용하고, 대체 속성을 활용하면서 신경을 쓰고자 한다. 또한 레거시 코드는 최대한 삭제하고, TypeScript와 상태관리 툴 Zustand 등을 도입해서 안정적인 서비스를 운영하고자한다.
3. 반응형 제작💻📱
시간이 급했기도 했고, 데스크탑용 디자인이 없어 적당히 대충 진행했었다. 디자이너에게 물어가며 어떤 브라우저, 기기로 접속해도 이상없이 사용할 수 있도록 하고자 한다.
4. 기타🎸
기존에는 react-create-app을 사용해서 제작했는데 빌드나 서버실행이 진짜진짜 오래걸렸다. 새롭게 Vite를 도입해서 더 빠르고 안정적이게 개발을 하려한다.
새로운 기술들은 지속적인 스터디를 통해 학습하며 리팩토링 시에 적용하고자 한다. 그리고, 깃에 PR을 올릴때도 내가 뭐했는지 알 수 있게, 남이 무엇을 했는지 정확히 파악하고, 그에 대한 리뷰를 할 수 있게 꼼꼼히 진행하고자 한다.
각자 부트캠프나 동아리들을 진행하면서 많은 것을 배우고 경험했다. 이전보다 자랑스럽고 안정적인 프로젝트를 완성할 수 있지 않을까?😉
