Hello20Thon 👍

Semicolon 학생 개발자 커뮤니티와 구름에서 주최한 Hello20Thon 참가

개발 기간

• 2020년 01월 27일 ~ 2020년 02월 04일

주제

"새해를 맞이하며 다짐했던 것을 도와주는 서비스"

프로젝트 주제

집에서 운동을 하는 사람들을 도와주기 위한 웹애플리케이션

• 🏃 Home Gym 이라는 뜻으로 "HYM"으로 정했다. 💪

👪 팀원

• 문건우(팀장)
• 표석훈
• 최정은

📦 사용하는 기술 스택

• React
• Redux
• Redux-Saga
• Next.js

해커톤 결과

⭐ 우수상!!!! ⭐

프로젝트 배포 주소

📎 https://hello20thonhym.herokuapp.com/

프로젝트 관련 사진

우수상!!!(2등!!)

우수상 상장

시작화면

메인화면

친절한설명

운동사진검색

🔎 프로젝트 설명

요즘 1인가구가 증가하면서 이에 따라 혼자 집에서 하는 활동들이 많아졌습니다.
그 중 유튜브 운동채널을 보면서 운동을 따라하거나 혼자 집에서 운동을 하는 ‘홈 트레이닝’이 증가하고 있습니다.
혼자서 운동을 하니 도중에 운동을 포기하는 사람들의 다짐을 지켜주기 위해 우리는 ‘홈 트레이닝’을 하는 사람들의 편의를 위하여 ‘HYM(Home+Gym)’이라는 웹 사이트를 만들기로 했습니다.
‘HYM’은 Home과 Gym의 합성어로 집도 체육관처럼 운동을 할 수 있는 장소라는 의미가 담겼습니다. 또한 체육관에 가면 트레이너들이 운동 루틴 등을 관리 해주는 것처럼 우리 서비스도 사용자의 운동 루틴을 관리해주는 기능이 존재합니다.
간단한 기능을 소개하자면 ‘나만의 루틴’을 만들 수 있습니다. 운동 부위를 선택한 후 자신이 원하는 운동을 직접 입력하거나 우리 서비스에서 제공하는 운동을 선택하여 시간/횟수를 선택하여 해당 루틴에 추가할 수 있습니다. 또한 추천 루틴이 제공돼 처음 운동을 해보는 사용자들도 이를 보며 운동을 쉽게 따라할 수 있습니다.
내 루틴을 캘린더와 연동하여 내가 언제 이 루틴대로 운동을 할 것인지 정할 수 있습니다. 몸무게를 적는 칸이 존재하여 운동 할 때마다 몸무게를 비교할 수 있고 그 날의 특이사항이나 적어야할 중요사항을 적을 수 있는 ‘메모’란도 존재합니다.
루틴대로 운동을 하다가 모르는 자세가 있다면 운동 자세 검색을 통하여 올바른 자세로 운동을 할 수 있게 해줍니다.
플랭크와 같은 엎드린 자세로 운동을 하는 경우 시간을 볼 수 없어서 운동 도중 시간을 보려 일어나는 경우가 있는데 스톱워치를 통하여 내가 이 운동을 몇 초, 몇 분 동안 할지 시간을 설정하여 시간이 다 된 경우 소리로 알려주어 시간 신경 쓸 필요 없이 운동에만 집중하게 해줍니다.
마지막으로 유튜브를 내가 해야 할 루틴과 함께 볼 수 있으므로 번거롭게 여러 개의 창을 띄우지 않고 한 화면에서 모든 것을 다 해결할 수 있습니다. 이 서비스를 통하여 홈트레이닝을 하는 많은 사람들이 편하고 재미있게 운동을 할 수 있는 계기가 되었으면 좋겠습니다.

📖 기술적 소개- 기술적 측면에서 프로젝트의 장점

1. React를 사용함으로써 SPA 구축하였습니다. -> Virtual DOM, Webpack 사용 등으로 인한 성능 향상이 있습니다.
2. 최근 React에서 권장하는 React-hooks를 사용해 함수형 프로그램을 작성했습니다.
3. hooks 컴포넌트들로 잘 구분해놓아서 재사용성이 높은 코드로 만들었습니다.
4. 사용하는 함수들을 대부분 useCallback을 사용해서 최적화에 신경썼습니다.
5. Redux 사용으로 인한 전체적인 state 관리를 용이하게 만들었습니다.
6. Redux-Saga 설정으로 추후에 비동기 작업이 추가 되었을 때 확장하기 쉽게 해놓았습니다.
7. Next.js 사용으로 간편한 환경설정을 가능하게 하였고 Next에서 제공하는 라우팅 기능 및 기타 부가 기능으로 유지보수하기 쉽게 만들었습니다.
8. 추가적으로 Server-Side-Rendering을 구성할 때 도움이 될 것 같습니다.

📅 프로젝트 진행 과정

• 1월 27일 : 아이디어 회의 및 개발환경 세팅
  1. 아이디어 회의
     • 집에서 할 수 있는 운동을 도와주는 서비스 (이름 : HYM)
     • React / React-redux
  2. 개발환경 세팅 ( Github repository 및 파일 생성 )
• 1월 28일 : 프로젝트 세분화 및 역할분담 후 개발시작
  1. 주 기능 : 운동루틴 / 사용자의 운동루틴 CRUD
  2. 추가 기능 : 달력 / 메모 / 스탑워치 / 유튜브 검색 / 사진 검색
• 1월 29일 : 기능 제작 [달력 / Youtube / 운동루틴]
• 1월 30일 : 기능 제작 [개인 루틴 / 검색기능 / 운동루틴]
• 1월 31일 : 기능 제작 [메모 / 스탑워치 / 운동루틴]
• 2월 1일 : 프로젝트 기능 테스트 및 마무리 준비 [기능 테스트 / 첫 시작화면]
• 2월 2일 : 마무리 [기능 병합 / css 확인 / 사용법]
• 2월 3일 : 추가 마무리
  1. 각 기능 추가 및 보완
  2. 코드상의 오류 확인 및 보완
• 2월 4일 : 추가 마무리
  1. 디자인 개선
  2. 프로그램 코드 리팩토링
  3. 기능 확인