프로젝트 후기 및 리팩토링 계획

📖 목차

-  프로젝트 소개

-  꽤나 늦은 프로젝트 후기 & 리팩토링 결심

-  리팩토링해야 할 사항들 정리

 

 

 

 

💜  프로젝트 소개

바디토리는 음성인식을 통해 매일 나의 몸 상태를 간편하게 기록하고, 기록된 증상을 기반으로 병원을 추천해주는 건강관리 웹 서비스이다. 또한, (전국 병원들과 제휴했다는 가정 하에) 병원과의 연계를 통해 손쉬운 기록 공유 및 진료내역 관리도 가능한 서비스이다.

 

 

 

👇  서비스 기획 의도나 자세한 기능 소개, 작업 내역 등은 아래 노션에서 확인할 수 있다.

바디토리: 건강기록 및 병원추천 웹 서비스

 

 

 

🤔  꽤나 늦은 프로젝트 후기 & 리팩토링 결심

 

'바디토리'는 엘리스 AI트랙에서 최종 프로젝트로 진행했던 팀 프로젝트로,

트랙동안 배운 웹 개발 지식, 데이터 분석 기법, 딥러닝 지식을 총동원해서 인공지능 기술이 적용된 웹서비스를 만드는 과제였다.

 

이미치 처리, 자연어 처리 중 한가지 분야를 고르면 같은 분야를 고른 레이서들과 랜덤으로 팀이 결정되는 방식이었는데 나는 자연어 처리를 선택했다. 

 

나는 평소에 이런 서비스가 있었으면 좋겠다고 생각하는 것들을 메모해놓고, 가끔 심심하면 웹/앱 서비스 기획으로 디벨롭하곤하는데 그 아이디어들 중에서 '내 몸 상태 기록 어플'이라는 주제에 음성인식으로 증상을 기록을 하는 기능을 추가하면 자연어처리 관련 AI 서비스로 발전시킬 수 있겠다 싶어서 했던 선택이었다.

(결론적으로 음성인식은 API를 사용했고, 딥러닝 모델은 추천 시스템을 추가하였다..👾)

 

그리고 팀이 랜덤으로 결정되면서 생긴 에피소드도 있는데 인공지능 웹 서비스 제작 프로젝트인만큼 프론트엔드, 백엔드, 인공지능 파트의 구성원이 필요했는데 우리 팀은 총원 5명, 5명 전부 프론트엔드 희망자로 구성되었었다..ㅎ 그나마 다행이었던건 1차, 2차 프로젝트 때 같이 해봤던 팀원들이 섞여있어서 낯가림 없이 시작할 수 있었다는거?

 

프로젝트 중간중간 팀원들끼리 의견 차이도 있었고, 프론트엔드 5명이서 백엔드, 인공지능까지 진행하면서 많은 어려움들이 있었지만 1달동안 진짜 팀원 모두 으쌰으쌰해서 나름 만족스러운 결과물을 만들어냈고, 프로젝트 완료 후에 진행된 시상식에서 대상과 인기상을 모두 수상하는 기쁨도 누렸다.

(최종 프로젝트 수상 팀들이 외부 기업들 앞에서 수상한 프로젝트를 발표하는 데모데이가 사라진 것은 아쉬웠지만..😥)

 

프로젝트를 진행하면서 그 당시의 지식으로 최대한 좋은 코드를 짜기 위해 노력하긴 했지만 시간 부족, 기술에 대한 이해도 부족 등의 이유로 겉보기에만 제대로 동작하게 작성한 코드들도 많이 있다. 그리고 프로젝트 기간 내에는 다른 팀원이 짠 코드까지 살펴볼 시간적 여유가 없었어서 내가 작성한 이외의 코드들에 대해서는 이해가 필요하다.

 

프로젝트가 끝나도 리팩토링이 필요하다고 생각했던 부분들을 천천히 리팩토링을 해나가야지 생각만 하다가 마지막 커밋이 4달이나 지나버렸지만 지금부터 한번 리팩토링 계획을 세우고 틈틈이 리팩토링을 해나가볼까 한다.

(그래도 그 4달동안 자바스크립트랑 리액트에 대한 이해도를 높였으니 더 좋은 코드를 짤 수 있지 않을까 🤔)

 

그리고 꼭 개발 공부 때문이 아니라 내가 직접 기획하고, 디자인하고, 인공지능도 적용하고 (백엔드 빼고는 다 기여했다 😎) 나의 애정과 노력이 들어간 프로젝트인 만큼 웹으로도 배포하고, 앱까지 제작해서 스토어에도 내보고 싶은 마음이 있다. 취업하고 여유가 생긴다면 이걸 사이드 프로젝트로 같이 할 팀원들을 모집해볼 계획도 있고!

 

우선은 여태 공부한 것들은 토대로 혼자서 리팩토링부터 차근차근 해보기로 하자 💪🦾

 

 

 

 

 

 

 

📋 리팩토링해야 할 사항들 정리

 

1️⃣  우선, 현재 프로젝트 배포하기

(vercel로 하면 간단할듯, flask서버는 pythonanywhere?)

 

2️⃣  배포 후 제대로 작동안되는 오류 체크하기

(특히, 백엔드에서 담당한 소셜로그인, 메일 등 등록 필요한것들 다 내 계정으로 바꾸기)

 

3️⃣  다른 팀원이 작성했던 코드 분석, 이해하기

 

4️⃣  2️⃣에서 체크한 기능상 오류부터 수정하기

 

5️⃣   필수로 리팩토링 할 것들

 

• 프로젝트 시 중간중간 추가된 기능들로 인해 지저분해진 코드들 파악하고 정리하기
• API 예외처리 잘 되어있는지 확인하고 깔끔하게 정리하기
• recoil이 정말 필요한지 다시 한번 파악해보기
• react-query 사용법 더 숙지해서 사용하기
• 불필요한 재렌더링되는 부분 찾아서 수정하기
• 커스텀 훅으로 만들면 좋은 것들은 커스텀 훅으로 빼기
• 컴포넌트 정리하기
• 인피니티 스크롤, 스켈레톤 UI 내가 직접 해보기
• 반응형 수정하기

 

6️⃣  리팩토링 시 도전해볼 것들

 

• 아토믹 패턴 적용해보기