[SSAFY] 1학기 관통 프로젝트 후기

길고 길었던 한학기가 드디어 마무리가 되었습니다...! 

 

계절학기가 시작된 이 시점.. 관통 진행했던 일주일이 아득하네요....

(우리는 그때 미쳤었죠..)

 

오늘은 1학기 최종 관통 프로젝트를 어떻게 진행했는지에 대해 후기를 남겨보겠습니다!

 

저와 페어는 "챌린지를 통해 운동을 같이 할 수 있는 서비스"를 목표로 프로젝트를 진행했습니다. 사용자는 직접 유튜브에서 원하는 미션을 검색해서 본인만의 챌린지를 만들 수 있습니다. 등록된 챌린지는 타 사용자들이 참여해서 챌린지를 함께 수행할 수 있도록 서비스를 계획했습니다. 

 

저희는 다음과 같은 일정으로 프로젝트를 진행했습니다.

노션에서 관리한 프로젝트 일정

1.목업   2.ERD   3.API설계   4.서비스 개발   5.발표자료 만들기   6.최종발표

모든 일정관리 및 자료들은 페어와 노션을 공유하여 관리하였고, 그날 그날 있었던 일을 정리한 일지 또한 까먹지 않고 작성하려 노력했습니다.

 

1. 목업 작성

페어와 어떤 서비스를 개발하면 좋을지에 대해 충분한 대화를 나눈 후, 가장 처음 했던 것이 목업 작성이었습니다.

 

목업은 카카오 오븐을 이용해서 작성하였습니다.

https://ovenapp.io/

OvenApp.io

 

목업을 작성하며 기능 별로 페이지를 어떻게 구성할 수 있을지 고민했습니다. 목업을 작성하니, 두루뭉술했던 계획이 구체화가 되었으며, 실제로 프론트를 진행할 때 작성한 목업을 바탕으로 페이지를 구현했기에 많은 도움이 되었습니다. 

목업과 필요한 기능에 대한 설명을 노션에 정리했다.

 

2. ERD 작성

두 번째로 한 것이 데이터베이스를 어떻게 구성할지 다이어그램을 짜보는 것이었습니다. 

ERD는 Mysql에 내장된 ERD 서비스를 이용했습니다.

 

ERD를 만들 때에는 추후에 있을 개발 단계에서 쿼리문을 어떻게 짤지 고려해서 작성하였습니다.

이때, 변수명을 또한 고심해서 지었습니다. (개발단계와 직결 되어 있기 때문에 ERD 작성에 많은 시간을 투자하는 것을 추천드립니다.)

작성한 ERD

 

3.  API 설계

이 단계에서는 작성된 ERD를 바탕으로 api를 설계하였습니다.

모든 기능을 세세하게 나눠서, 필요한 기능을 api로 빼서 기록을 해두었습니다.

노션에 작성한 api 설계서

모든 기능을 어떤 변수명을 사용할지 정지를 하고, 어디서 관리할지도 노션에 정리했습니다.

 

기능 구현에 완성한 api에는 각각 back과 front 체크박스에 완료 표시를 하여, 현재 어디까지 진행이 됐는지를 가시적으로 확인할 수 있어 프로젝트 진행 시 큰 도움이 되었습니다.

또한, 노션에 한 눈에 볼 수 있게 정리해둔 덕분에 백과 프론트 간의 통신을 매우 수월하게 진행할 수 있었습니다.

 

4. 서비스 개발

1 ~ 3의 단계를 마친 후 코딩을 시작하였습니다.

 

여기는 개발결과로 보여드리겠습니다.

 

챌린지 만들기

유튜브 api를 사용하여 동영상을 검색할 수 있게 구현을 했습니다.

추가 버튼으로 미션 비디오를 챌린지에 추가할 수 있게 했고, 등록하기를 통해서 사용자가 챌린지를 만들 수 있게 했습니다.

 

챌린지 참여하기

만들어진 챌린지는 오픈된 챌린지에 보여지게끔 하였고, 각각의 챌린지를 클릭하면 오픈된 챌린지에 참여할 수 있게 구현하였습니다.

 

챌린지 완료하기

오픈된 챌린지는 챌린지 안에 포함된 모든 미션을 완료할 시 챌린지를 완료할 수 있게끔 구현하였습니다. 

 

전체 시영 영상

5. 마무리

팀원과 공통적으로 나눴던 소감은.....

 

" 프론트 정말 어렵다!" 

 

였습니다.

 

모든 오류와 어 왜 안 되지? 의 주인공은 프론트에서 발생했습니다.

가장 큰 문제는 프론트에서 처리한 데이터를 백엔드의 데이터베이스와 연결하는 것이었습니다. 초반 프로젝트 진행 시 프론트가 많이 서툴러서 vuex 관리를 잘못한 것이 화근이었습니다. 

시간이 좀 더 주어졌으면, 보다더 깔끔한 코드 구성을 하였을텐데, 아쉬움이 많이 남는 프로젝트였던 것 같습니다.

 

페어와 저는 방학기간동안 이 프로젝트를 다시 리팩토링하기로 하였고, 시간이 부족하여 미처 구현하지 못했던 부분을 추가하기로 했습니다!

 

정말 바쁘고 정신없게 진행했던 10일이었습니다.

프로젝트를 진행하며 일학기동안 배웠던 내용을 상기하며, 직접 기능을 적용해보고, 오류가 나면 고쳐보고, 많은 것들을 직접 부딪히며 배웠습니다. 정말 뜻깊은 5개월이었네요.

 

2학기에도 다양한 기사 기대해주세요!!!!

 

긴 글 읽어주셔서 감사합니다.