프로젝트 개선사항 및 앞으로의 과제들

부스트캠프를 마치고 이전에 내가 했던 프로젝트를 둘러보았다. 그중 맛집찾아 프로젝트를 다시 보았는데..

 

 

1년전 그당시 정말 처음 개발했던 때였지만 진짜 색도 그렇고 너무 처참한 뷰와 백엔드를 가지고 있었기에 이를 무조건 개선해야겠다고 생각했다.

 

 

내가 개선해야겠다고 생각한 사항들을 정리해서 README에 먼저 적어놓았다.

 

뷰 개선

가장 먼저 해야할 것은 뷰를 개선하는 것이다. 기존에는 스프링에서 Mustache를 사용하여 서버사이드에서 렌더링하고 있었는데, SPA인만큼 프론트에서 React를 사용해보고 싶었다. 이에 더하여 이제부터는 프론트든 백엔드든 기본적으로 Typescript를 적용하려고 한다.

 

 

기존 색배열이 너무 별로여서 아예 색을 흰색 + 회색 + 검정색으로 통일시켜서 Figma를 통해 그려보았다. 또한 원래 왼쪽에 햄버거 버튼이 있었는데 열어봤자 로그인밖에 없는 관계로 사이드바는 없애고 대신 소셜 로그인 버튼을 우측 상단에 배치하였다.

 

React는 CRA를 통해 프로젝트를 생성하고, 브라우저 호환성 등을 고려해 babel을 적용한다. 또한 번들링으로 webpack5를 사용하기로 했다.

 

뷰 개선 결과

뷰는 현재 피그마에서 작성한 대로 개선이 완료되었다.

 

 

백엔드 프레임워크 Spring -> Nest

이점에 대해서 좀 고민을 많이 했는데, 일단 처음에 Spring으로 개발한 이유는 "단지 많은 사람들이 사용하기 때문에" 였다. 그러나 지금 와서 생각해보면, 제대로 원리를 알고 개발한다기보다는 그냥 구현에만 급급하여 엉망진창으로 작성한 부분이 너무 많이 보였다.

 

 

기존 스프링 프로젝트

 

 

그래도 처음으로 스프링으로 작성한 프로젝트이기에 남겨두는것도 의미가 있지 않을까? 라고 생각했지만 최근 스프링과 비슷하게 아키텍쳐가 잡혀있으면서 Node 기반으로 개발할수 있는 Nest에 대해 관심을 가지게 되면서 학습과 겸하여 이를 적용하여 개선하고싶은 마음이 강해졌다. 따라서 기존에 작성했던(별로 양이 많지도 않다) 스프링 코드를 모두 Nest로 옮기려고 한다.

 

테스트 코드 작성

기존에는 (당연하게도) 테스트 코드가 없었다. 간단한 프로젝트이기도 하지만, 그 당시 내가 스프링을 통해 구현하는데에도 많은 시간을 할애했기 때문에 테스트 코드를 생각할 여유조차 없었던 것 같다. 이제는 Jest를 통해 많지 않은 기능에도 단위/통합 테스트를 작성할 예정이다.

 

배포 자동화

기존에는 EC2 인스턴스에서 수동으로 쉘 스크립트를 실행해야 Github에서 Pull 을 받고 배포를 진행했었다. 상당히 불편하고 귀찮은 작업이기에 Github Actions 혹은 Jenkins를 통해 배포 자동화를 적용할 예정이다.