2023년 9월 1일(금) ~ 2023년 10월 13일(금), 6주간 진행했던 멀티캠퍼스 멀티잇 국비지원 교육, 프론트엔드 개발자 취업캠프 마지막 과정인 팀프로젝트를 회고하고자 한다. SSAFY의 경험과 멀티잇 마지막 교육 과정인 React를 통해 나름 수월하게 진행했다고 생각한다.

1. BodyShare

목표달성 커뮤니티를 활용한 건강관리 어플리케이션, BodyShare는 자신의 운동 기록 및 일상을 공유하는 문화를 형성해, 건강한 운동 습관 및 개인의 목표를 달성시켜주는 서비스입니다.

2. 프로젝트 기획

2-1. 기획 의도

이 프로젝트를 기획한 의도는 다음과 같습니다.
현재 사회는 자신의 운동 기록을 다양한 방식으로 공유하는 문화가 형성되어 있습니다. 이에 따라 BodyShare를 통해 자신의 운동과 식단을 기록하고, 해당 칼로리 정보를 시각적 데이터로 보여줘서 건강관리에 도움을 줍니다. 또한 자신의 운동 기록을 공유해서 커뮤니티 내에서 회원들과 소통합니다. 서로를 격려하고 동기를 부여함으로써 건강한 운동 습관을 형성하고 개인적인 목표를 달성할 수 있도록 도와주는 서비스를 제공하고자 합니다.

2-2. 타 서비스와의 차별점

저희가 벤치마크한 서비스는 Planfit입니다. Planfit을 포함한 다른 운동 서비스와의 차별점은 운동에만 초점을 두지 않았다는 점입니다. 다른 어플들은 운동 도우미 느낌이 강하지만, 저희가 실제 개발한 어플에서는 식단까지 등록했습니다. 여기서는 시각적 데이터를 제공해서 섭취한 칼로리와 소비한 칼로리를 비교까지 해줬습니다. 향후 개발 예정인 차별점은 챌린지 기능을 통한 목표 관리와 마이페이지의 피드 관리도 있습니다. 피드는 커뮤니티와 상관없이 마이페이지에서 본인의 일상을 피드로 올릴 수 있습니다. 또한 다른 사람의 피드를 돌아다닐 수도 있고 팔로우나 좋아요 기능도 추가할 예정입니다.

2-3. 개발 일정

• 1주차
  기획, 목업디자인, DB, 요구사항 분석, EER 다이어그램 작성, 데이터 분류 및 정리
• 2주차-1
  URL 정의서 작성
  Frontend : 공통 부분 구현 & 각 페이지 별 기본적인 화면 구현
  DB : 설계 마무리 및 구현
• 2주차-2
  Frontend : 부족한 부분 화면 구현
  Backend : 각 테이블 별 서버 연동 기초 작업
• 3주차-1
  Frontend : 로그인 기능 구현, 홈/분석 시각화 자료 구현, 커뮤니티 상세페이지 화면구현 Backend : 로그인, 홈, 분석, 커뮤니티, 마이페이지 기본적인 데이터 연동
• 3주차-2
  Frontend : 부족한 부분 마무리, 유효성 검사 적용
  Backend : 분석(운동/식단기록) CRD, 커뮤니티(게시물, 댓글) CR구현, 그 외 페이지 나머지 서버 연동
  오류 : 페이지 별 오류, 작동되지 않는 부분 수정
• 4주차
  개발 마무리, 오류 수정 및 피드백 반영, 테스트
• 5주차
  발표 준비(포트폴리오) 및 산출물 정리, 코드 전체 리팩토링
• 10월 13일 (금)
  프로젝트 경진 대회

3. 개발 페이지

3-1. 로고

운동을 기록하고 일상을 공유한다는 점에서 Body Share라는 이름을 지었습니다.

3-2. 공통 부분

Custon Axios를 만들어서 Axios 명령이 들어올 때 interceptor를 추가해서 세션을 먼저 확인했습니다. 세션이 만료되면 로그인 페이지로 보내도록 설계하였습니다.
Global Style : 다크모드와 스크롤바 부분이 해당됩니다. 변경된 스타일이 모든 컴포넌트에 적용되어 화면에 업데이트됩니다.

3-3. 랜딩 & 로그인 페이지

React Hook Form 을 사용하여 실시간 유효성 검사를 진행했습니다.
Recoil 을 사용하여 유저 정보와 고정된 운동 및 식단 데이터를 불러왔습니다.

3-4. 회원가입 페이지

React Hook Form 을 사용하여 실시간 유효성 검사를 진행했습니다.
회원가입 시 관심사 선택에서 페이지가 이동되기 때문에, 선택을 유지하기 위해서 recoil을 사용하여 저장시켰습니다.
그런 뒤 useState로 받아서 뿌려줬습니다.
카테고리 별 목록은 카테고리를 선택했을 때 분류해서 처리했습니다.
아이디와 닉네임 중복 검사는 회원가입 버튼을 누를 시, 제출 전 서버에 요청을 보내서 중복 정보가 있으면 폼에 에러를 보내서 다시 작성하도록 했습니다.

3-5. 메인 페이지

오늘의 기록, 운동 및 식단 차트, 가입한 커뮤니티의 새소식을 보여주는 페이지입니다.
기록과 차트에 관해서는 사용자의 운동과 식단 데이터를 가져와서 날짜별로 분류해서 차트에 넣어줬습니다. 기록 count는 날짜별로 필터링하여 오늘의 운동 및 식단 기록 개수를 계산했습니다.
차트는 useEffect를 사용하여 컴포넌트가 마운트될 때 초기 데이터를 가져오고, 일정한 간격(24시간)으로 데이터를 업데이트하도록 설정되었습니다.
하단의 커뮤니티는 자신이 가입한 커뮤니티들에서 자신이 작성한 글을 제외하고 최신 글 2개를 보여줍니다.

3-6.분석 페이지

캘린더를 중심으로 사용자가 입력한 기록들을 확인하는 페이지입니다.
react-calander 라이브러리를 사용해서 캘린더 기능을 구현했습니다.
캘린더 타일을 커스터마이징해서 운동이나 식단 기록을 아이콘으로 표시해줬습니다.
해당 캘린더 밑에는 해당 날짜에 맞게 필터링해서 운동과 식단기록을 보여주고 삭제도 가능합니다.

운동 : 일주일 단위로 계산해서, 일주일 운동 시간과 소모 및 섭취 칼로리 비교 데이터를 넣어줬습니다.
식단 : 일주일 단위로 계산해서, 오늘의 영양정보, 요일별 칼로리 섭취량을 보여줍니다.
이 페이지 역시 24시간 간격으로 데이터를 갱신하도록 설정했습니다.

1) 데이터

분석 페이지에서 쓰이는 운동데이터와 식단데이터는 다음과 같이 가져왔습니다.
운동 데이터는 공공 데이터 포털에서 가져온 뒤 이름을 처음 들어보거나 중복된 것들을 수동으로 가공한 후, 필요한 카테고리(전체, 근력, 유산소, 기타)를 추가해줬습니다. 해당 데이터에는 MET 계수가 있어서 MET계산법을 통해 각 운동에 대한 칼로리를 계산해서 넣어줬습니다.
식단 데이터는 식품 의약품 안전처에서 많은 데이터를 줘서 900개 정도 선별해서 넣어줬습니다. 이 데이터에는 음식에 대한 칼로리와 탄수화물, 단백질, 지방 정보도 같이 들어있습니다.

3-7. 커뮤니티 페이지

1) 커뮤니티 각 탭

MY탭 : 내가 가입한 커뮤니티를 나열해서 보여줍니다. 프로필이나 커뮤니티명을 클릭 시 커뮤니티 상세 페이지로 이동하고, 피드 제목을 클릭 시 해당 피드 글로 이동합니다.
관심사 추천 : 회원가입 시 받았던 관심사를 포함한 커뮤니티를 나열해서 보여줍니다.
인기 추천 : 커뮤니티들을 가입자 기준으로 내림차순으로 정렬해서 보여줍니다.
검색 : 검색한 관심사를 포함한 커뮤니티들을 모아서 보여줍니다.

2) 커뮤니티 상세 페이지

커뮤니티 및 피드 만들기 -> 해당 페이지 역시 React Hook Form 사용해서 유효성 검사 및 에러 메세지 표시를 진행하였습니다.
세션 스토리지에 정보를 저장해서 커뮤니티 선택 창을 갔다와도 정보가 유지됩니다.
피드 만들기에서 최근 3일 이내의 기록을 불러와서 날짜를 선택할 시, 기록이 보이고 날짜 정보를 보내주면 피드 상세에서 운동 상세를 보여줍니다.

3-8. 마이 페이지

회원 정보를 받아서 화면에 뿌려줍니다.
프로필 수정에서 관심사를 변경할 시 바로 반영되도록 설정하였습니다. 또한 이 페이지에도 React Hook Form을 적용하였습니다.
마지막으로 이미지 미리보기 화면을 적용했습니다.

3-9. API-SERVER

• Session
  세션을 사용해서 로그인에 성공 시 req.session.uerNo에 유저 번호를 저장합니다.
• checkLogin(Middleware)
  미들웨어를 만들어서 로그인이 필요한 페이지의 경우에는 미들웨어에서 호출해서 userNo를 확인합니다.
• Multer
  이미지를 처리하는 부분이 많아 Multer로 처리했습니다. Multer 통해서 이미지를 서버에 업로드시킨 뒤, 저장시킬 때 만든 이름을 실제 DB에 저장합니다.

4. 기대 효과

BodyShare를 통해 얻을 수 있는 기대 효과는 3가지로 말씀드릴 수 있습니다.

1) 사용자는 개인 프로필을 설정하고 관리할 수 있으며, 자신의 운동 및 식단 기록을 저장 및 검색할 수 있습니다.
2) BodyShare는 사용자가 일주일 간의 칼로리 섭취량과 운동 시간, 칼로리 소비량 비교를 시각적으로 나타내는 기능을 제공합니다. 이를 통해 사용자는 자신의 운동 및 식단 패턴을 분석하고 개선할 수 있습니다.
3) 사용자는 자신의 관심사와 관련된 커뮤니티에서 더 많은 가치를 찾게 되고 상호작용을 할 수 있습니다.

5. 회고

5-1. 잘한 점

(1) 역할 분담

처음 1~2주차는 Frontend 3명, Backend 2명으로 분담해서 기본 페이지 및 데이터 구축을 끝냈습니다. 그런 뒤 각 팀원들이 페이지를 하나씩 담당해서 Frontend와 Backend를 같이 개발했습니다.
가장 이상적인 개발 방식이라고 생각하고 팀원들이 한 번씩 다 경험할 수 있게 업무를 분담했습니다.
Recoil 전역 상태관리를 통해 다크모드와 스크롤바를 구현하여, 전체 화면에 적용함으로써 적절한 곳에 사용했습니다.

(2) 커뮤니케이션 : 구글 드라이브, 줌, 슬랙, 디스코드

• 구글 드라이브
  기본적인 문서 공유는 구글 드라이브를 통해 진행됐습니다. 문서는 폴더별로 구분해서 관리하였습니다. 또한 매일 아침 저녁으로 회의를 진행하여 회의록도 남겼습니다.
  
  

• 줌
  수업 진행 방식이 100% 비대면 방식이었기 때문에 프로젝트도 비대면으로 진행되었습니다. 이 과정에서 줌을 통해 서로의 상황을 공유하고 도와줬습니다.

• 슬랙
  매니저님과 강사님께 질문이 있을 때 이용하였습니다.

• 디스코드
  역할을 분담하여 회의를 진행하거나 장기적으로 필요한 글들은 디스코드에서 대화했습니다.

(3) 협업 툴 사용 : Gihub

이번 프로젝트를 진행할 때에는 다들 프로젝트가 처음이고 git에 익숙치 않은 분들이라서, 강사님의 조언에 따라 branch 나누는 작업 없이 main에서 진행하게 되었습니다.

Commit 컨벤션

(4) Frontend : Figma, React

• Figma
  

처음부터 피그마에 집중을 해서 모든 페이지를 최대한 디테일하게 작성하였습니다.
덕분에 프로젝트를 진행할 때, 수월하게 협업하면서 소통하고 코드를 짤 수 있었습니다.

• React
  이번에도 React로 프로젝트를 진행하였습니다. 지금까지 React로 많이 진행했었고, 수업도 React로 나갔기 때문에 간단히 사용법을 설명드리니 무난하게 진행할 수 있었습니다.
  제가 맡은 작업은 초기 세팅과 header, navbar, router 설정, 스크롤바, 다크모드, 버튼, input과 같은 공통 부분을 작업해드렸습니다.
  그리고 숙련도에 맞게 페이지를 분담해드렸고, 저는 기능과 페이지 수가 제일 많았던 커뮤니티 전체를 맡았습니다. 열심히 프로젝트에 임한 덕분에 제가 맡은 부분을 다 하면서 다른 분들도 도울 수 있었습니다.

(5) Backend : Nodejs, MySQL

• Nodejs
  backend 작업의 기초는 팀장님이 잡아주셨습니다. 처음에는 backend 작업을 해본 적이 없어서 걱정이 많았지만 직접 부딪히고 솔직하게 모르는 것을 질문하며 배우다보니, 결국에는 다른 분들께 설명드릴 정도로 성장한 제 자신을 발견할 수 있어서 뿌듯했습니다.

• MySQL
  DB 역시 지금까지 Frontend 작업만 했었기에 제대로 건든 적이 없었습니다. ERD 작업까지는 못 했지만, SQL 구문을 작성하여 제가 원하는 테이블 목록을 뽑아올 수 있어서 좋았습니다.

(6) 라이브러리 적용

이번에 코드를 짜면서 다양한 라이브러리를 이용하였습니다.
간단히 말하면

• React Hook Form
  Form 관리 : Input Data 전송 및 실시간 유효성 검사
• Google Chart
  데이터 시각화 : 운동 시간 및 소모 칼로리, 식단 영양성분 및 칼로리
• Recoil, Recoil-Persist
  전역 상태 관리 : 유저 번호, 운동/식단 데이터 등 관리, 다크모드, 스크롤바 적용
• Axios
  HTTP 통신 : 서버 데이터 통신

이 중에서도 특히 React Hook Form을 사용하여 FormData 전달 및 유효성 검사 부분을 진행했습니다. 지금까지 프로젝트는 다른 팀원들의 도움을 받아 같이 라이브러리를 적용해 나갔으나, 이번 프로젝트는 처음으로 공식문서를 보면서 적용해나갔습니다. 처음에는 눈으로 여러 블로그를 찾으며 이해하려고 노력했으나 잘 되지 않았습니다. 그 때 강사님의 조언을 듣고, 안 되더라도 직접 값을 적용해 나가니, 다른 팀원들께 설명할 수 있을 정도로 실력이 향상되었습니다.
다음에도 문제가 발생 시 안 되더라도 계속 몸으로 부딪히는 노력을 할 수 있을 것 같습니다.

(7) 시연 시나리오 및 기술 스택, 시스템 아키텍쳐

시연 시나리오

시연 시나리오를 작성하면서 모든 페이지의 동작에 대한 이해도를 높였습니다. 모든 기능들을 실행하고 시연하면서 제가 개발하지 않았던 기능도 다시금 생각하게 되는 시간이었습니다.

기술 스택

• Frontend

  • React
  • React Router
  • Styled-components

• Backend

  • Node.js
  • Express

• Database

  • MySQL

시스템 아키텍쳐

5-2. 아쉬운 점

(1) 업무 분담

국비교육이라는 점에서 대부분 비전공자에 프로젝트가 처음이신 분들이 많았습니다. 따라서 최대한 많은 업무와 어려운 부분을 제가 맡고 숙련도에 따라 업무분담을 해드렸습니다. 제 업무를 하면서도 팀원분들을 도와드리며 최대한 빠르게 진행될 수 있게 했지만, 타교육에 비해서 상대적으로 의지가 약한 부분이 보여서 아쉬웠습니다. 그래도 최대한 많은 기능을 넣기 위해 열심히 달렸지만, 초반에 생각했던 많은 기능들을 구현 못 한 점이 많이 아쉬웠습니다.

• 나의 업무

1) FE팀장으로써 FE 틀 적용 및 팀원들 보조
2) 공통 및 핵심 기능(+ 페이지) 개발
3) 구현 영상 제작
4) 발표 시연
5) 300커밋

(2) 개선사항

BodyShare만의 특화된 서비스 제공 및 소셜 로그인 기능이 개선되어야 합니다.
비슷한 앱들이 많기에 특화된 서비스 같은 경우 푸쉬 알람 서비스나 위치 기반 서비스를 통한 피드 게시가 있습니다. 또한 챌린지 기능으로 사용자들에게 목표를 설정하고 다른 참여자들과 목표를 달성할 수 있는 기회를 제공합니다. 목표 달성률을 시각적으로 표시해줘서 챌린지 진행 상황과 함께 사용자가 운동에 좀 더 집중할 수 있는 환경을 만들어줍니다.
소셜 로그인을 사용 시, 기존에 진행되던 프로세스를 간소화 시킬 수 있어서 사용자의 편의성이 향상되는 것을 기대할 수 있습니다.

5-3. 배운 점

지금까지 교육을 들으면서 프로젝트를 진행할 때는 100% Frontend로 진행하였습니다. 그러나 이번 프로젝트에서는 페이지의 모든 기능을 처음부터 끝까지 작성하면서, 처음으로 Backend 부분을 건들였습니다. SQL 문도 직접 작성하면서 원하는 데이터도 뽑아보고 직접 axios로 호출해서 뿌리는 작업까지 해봤습니다. 이렇게 하나 하나 할 줄 아는 게 늘어가서 좋았습니다.

5-4. 향후 발전 방향

이번에 부팀장과 FE 팀장을 맡으면서 많은 작업을 했던 것 같습니다. 그러면서 다양한 것들을 적용시켜 봤는데, 앞으로 해볼 프로젝트에서도 이것저것 시도해보면서 자신한테 맞는 라이브러리를 사용할 수 있을 것 같습니다.
추후 처음에 기획했던 챌린지 기능이나 마이페이지 피드 기능 등도 개발되면 좋을 것 같습니다.
또한 큰 이슈 없이 서로 좋게 마무리 잘 할 수 있어서 좋았습니다. 결과를 떠나서 너무 좋았던 프로젝트 였습니다. 팀원분들께 정말 감사합니다.

5-5. 진행 소감

지금까지 겪었던 프로젝트 경험을 바탕으로 제 모든 실력을 쏟아낸 프로젝트였습니다. 후회없이 마무리하기 위해 처음부터 끝까지 최선을 다했고, Backend 작업도 제대로 배울 수 있었습니다. 열심히 따라와준 팀원분들께 감사인사 드립니다.

6. 결과

5명이서 6주 간 진행한 프로젝트로, 5팀 중 2등으로 우수상을 수상할 수 있었습니다.