메인 프로젝트 회고

근 4주 간 생을 갈아넣었던 메인 프로젝트가 끝났다.

소모전 | 소모임 경기 전적 보기

소모전 서비스 캡처 화면

 

프로젝트를 처음 시작할 때는 분명 '기술 스택에 중점을 둔 프로젝트를 경험해 보고 싶다'는 마음으로 시작했는데, 프로젝트를 진행하다보니 기능 구현의 범위가 생각보다 넓었고 주어진 시간 내에 1차 기능 구현을 하기에도 시간이 급박했다. 결과적으로 새로운 기술 스택을 공부해서 프로젝트에 적용해보고자 했던 꿈은 물거품이 되었다... 새로운 기술 스택을 적용한다면 어떤 기술 스택을 사용할지에 대해 초반에 여러 이야기들이 오고갔는데 타입스크립트를 최우선으로 두기로 했다. 그나마 타입스크립트는 프로젝트 기획 단계부터 프론트 팀원들과 다같이 강의 하나를 정한 다음 같은 기간 내에 수강하기로 해서 코드에 타입을 살짝이나마 적용해볼 수 있었다. 

 

아쉬운 점은 정말 너무나도 많다.. 시간 산정을 하는 것도 처음 기획 단계에서 최대한 보수적으로 1차 구현 목표를 잡았다고 생각했는데 막상 코드 작성을 하면서 시간에 많이 쫓기게 되었다. 나는 내가 맡은 파트를 비교적 일찍 마무리한 편이었는데, 마감 일자가 다가올 수록 다른 파트가 진척 상황이 더뎌 그쪽 코드를 같이 완성하느라 테스트 코드 작성이나 2차 기능 구현으로 두었던 검색 기능 같은 것은 api가 완성되어 있었는데도 구현하지 못했다.

 

 

프로젝트 과제 제출을 마치고 난 지금 시점에서 가장 크게 다가오는 점은 아래의 두 가지이다.

 

1. 데이터 분석/설계 과정 

초반 분석/설계에 나름 시간과 공을 들였다고 생각한다. 이제까지 학습 과정에서, 그리고 지난 사전 프로젝트를 하면서 초반 설계가 탄탄해야 코드 작성을 할 때 삽질하는 시간이 적어지고 그게 결과적으로 생산성을 가장 높이는 길이라는 점을 배웠기 때문이다. 하지만 데이터 분석/설계에 대한 중요성을 상대적으로 간과했다. 백엔드에서 api 명세를 작성하고 난 이후 프론트에서 필요한 데이터에 맞춰 리뷰하는 과정을 거쳤음에도 불구하고 막상 코드 구현을 시작하고 난 이후에 백 스키마가 여러 번 바뀌었다. 그때마다 프론트 코드도 그에 맞춰서 수정해야 하는 과정을 번복하다보니 이에 따른 시간 손실이 상당했다. 서비스 기획/분석 단계에서 데이터에 대한 분석/설계가 함께 들어갔어야 했는데 이 부분을 생각하지 못한 게 패착 요인이었다. 

 

특히 회원 권한 변경에 따른 실시간 데이터 처리 문제가 가장 큰 걸림돌이 되었다. 처음부터 데이터/분석 설계와 함께 실시간 데이터 처리를 할 수 있는 기술 스택에 대한 고민과 학습이 필요했는데 이 부분을 초반에 아예 생각하지 못했다.

 

2. 에러 핸들링의 필요성

exception 처리가 왜 필요한지 알게 되었다. 단순 try catch 절로 끝나는게 아니라 어떤 경우에 어떤 에러를 어떻게 규정해서 그것을 사용자에게 알림으로까지 이어줄 것인지에 대한 고민이 필요했는데, 마찬가지로 사전 기획 단계에서 이 부분을 전혀 고려하지 못했다. 이메일 중복 확인을 요청하거나 로그인시 비밀번호가 일치하지 않는 등 여러 가지 예외 사항이 나오는데 그때마다 건건이 백엔드와 해당 건을 어떻게 처리할 것인지 케이스 바이 케이스로 코드를 작성해 나가게 되었다. 에러 핸들링에 대한 뼈대 없이 구현을 해나가면서 어? 이 부분에서는 이런게 필요하겠는데? 하는 주먹구구식으로 exception을 처리해 나가는 과정이 늘어나자 클라이언트와 서버 양쪽에서 코드가 점점 엉망진창이 되어갔다 ㅋㅋㅋㅋ

 

 

하지만 이런 경험들이 없었다면 데이터 분석/설계와 에러 핸들링이 왜 필요한지, 얼마나 중요한지 이렇게 절절하게 느끼지 못했을 거다. 가장 아쉬운 점이 가장 큰 교훈이 되었다고 생각한다. 기술 스택 도입에 대한 아쉬움과 함께 앞으로 서비스 v.2.0을 향해 조금씩 개선해 나가보려 한다. 

 

- next.js

처음 타입스크립트 강의를 팀원들과 같이 수강했던 것처럼 당장 이번주 한 주 동안 next.js 강의를 듣기로 했다. SEO와 향후 광고 수익을 생각하면 꼭 필요한 리팩토링이라고 생각한다. 

 

- 검색 기능 구현

백엔드 쪽에서 키워드 검색 기능을 만들어줬는데 시간이 없어서 마감 기한 내에 화면에 담지 못했다. 다른 수강생들의 피드백에서도 검색 기능이 있으면 좋겠다는 피드백을 받기도 했다. 우리 서비스를 생각하면 꼭 필요한 기능이 맞다. 서버도 다 준비되어 있으니 나만 코드를 작성하면 된다 🥲

 

- 테스트 코드 작성

정규식을 이용해 이메일, 비밀번호 유효성 검사를 하는 유틸리티 함수를 작성했는데, jest를 사용해 이에 대한 테스트 코드를 작성하고 싶다. 섹션 학습 과정에서 TDD를 배우면서 mocha를 사용해 테스트 코드를 작성하는 과제를 한 적이 있다. jest로는 작성해 본 적 없지만 비슷한 원리이지 않을까 싶다. 

 

- 무한스크롤 ui

무한스크롤도 써보고 싶었던 ui인데 시간 문제로 도입하지 못했다. 간단한 기능 구현 예제들을 살펴본 후 소모임 목록을 노출하는 메인 페이지에 적용해 보고 싶다. 

 

- redux-persist

새로고침시 상태가 날라가는 걸 막기 위해 session storage에 전역 상태를 저장했는데, redux-persist를 사용하는 코드로 바꿔보고 싶다. 물론 그 전에 수박 겉핥기로 작성된 리덕스 관련 코드 리팩토링을 먼저 해야 한다.

 

이렇게 또 할 일이 쌓인지라 끝났다는 기분이 잘 들지 않는다. 그래도 밥 못 먹고 잠 못 자며 인간의 생을 포기했던 지난 시간은 이제 접고.. 인간처럼 살면서 코드를 쳐야지. 밀린 에러 로그들도 하나씩 풀어보리..

 

---

[업데이트]

- 4월 중순: 검색 기능 구현, 테스트 코드 작성 완료 

- 5월 초: 프로젝트 팀원들과 각자의 개인 사정이 달라 서비스 v.2.0 업데이트는 무리라고 판단하여 개인적으로 리팩토링할 수 있는 부분만 진행하기로 결정했다. 아쉽지만 next.js는 개인 프로젝트에서 사용해야 할 것 같다. 

- 5월 중순: 프로덕션 서버에 데이터 양이 많지 않아 무한스크롤 ui 적용은 개인적으로 구현 실습을 하는 것으로 대체하였다. 

- 5월 말: redux-persist를 사용하여 리팩토링 완료

 

💡 사전 프로젝트 회고가 궁금하신 분들은 여기에서 보실 수 있어요.