✨ 프로젝트 소개

하루에 한 줌씩 🧑🏻‍🌾🌱 꾸준히 습관을 기록해보자!

하루 한 줌은 체득하고 싶은 습관들을 기록하여 꾸준히 이뤄나갈 수 있도록 도와주는 서비스입니다.

사용자들이 단순히 자신의 습관을 만드는 것보다 좀 더 재미있게 습관을 형성할 수 있도록 하자는 취지에서 시작된 프로젝트입니다.
따라서 내 습관뿐만 아니라 친구의 습관까지 확인하고 독려할 수 있습니다.

• 하루한줌 바로가기
  
• 발표 자료
  
• 팀 노션 주소
• 시연 영상
  
  
  

📆 프로젝트 기간

• 개발 기간: 2022/08/26 ~ 2022/10/07
• 런칭: 2022/10/03
• 유저 피드백: 2022/10/03 ~ 2022/10/07
• 추가 업데이트: 2022/10/03 ~ 진행 중

📖 서비스 아키텍쳐

👊 아키텍쳐 도입 배경

React-Query

• 리액트에서 서버의 데이터 관리나 데이터 패칭, 캐싱 등을 효율적으로 관리하기 위해 도입했습니다.
• 기존에 배웠던 리덕스보다 작성해야 할 보일러 플레이트가 적습니다.
• 서버와 클라이언트 사이의 비동기 로직을 보다 쉽게 다룰 수 있습니다.
• 유저의 이벤트가 발생하면 자동으로 데이터를 업데이트 해줍니다.
• 페이징처리, 지연 로딩, 에러 핸들링 등을 손쉽게 할 수 있습니다.
• 리액트 hook과 문법이 비슷하여 별도의 깊은 학습이 필요하지 않습니다.

Recoil

• 리덕스라는 대안이 있었으나 해당 프로젝트에서 프론트의 상태 관리를 위해 리덕스를 설치한다는 것이 조금 과하게 느껴졌습니다.
• 비동기 요청을 중앙에서 관리해야 하는 경우, selector를 통해 간단하게 처리할 수 있습니다.
• 리액트 전용 상태 관리 라이브러리로 리액트 hook과 유사한 구조를 가져 쉽게 시작할 수 있습니다.
• recoil은 정식으로 출시된 패키지가 아니어서 안정성의 우려로 현업에서도 잘 쓰이지 않는다고는 하나, 리코일 공식 Github Issue를 위주로 사용성에 문제가 없는지 검토해 보았고, 프로젝트에 적용하기에는 안정적이라고 판단하였습니다. 그 결과 프로덕션 환경에서도 특별한 이슈 없이 기능을 구현할 수 있었습니다.

Styled-Components

• 스타일 컴포넌트를 도입하여 하나의 컴포넌트에 HTML, CSS, JS를 모두 포함하였습니다. 따라서 컴포넌트 단위의 개발에 알맞게 css도 모듈화를 했습니다.
• 컴포넌트이므로 className이 겹치지 않아 중복이나 우선 순위 등에 의한 css의 혼선을 줄일 수 있었습니다.
• 리액트와 함께 사용하면 props를 활용하여 쉽게 조건부 스타일링이 가능합니다.
• 기존에 스타일링 된 컴포넌트에 추가로 스타일링을 할 수 있어 중복된 코드를 줄일 수 있고 분산된 스타일을 일관적으로 관리할 수 있어 유지보수 측면의 비용이 줄어들었습니다.

💖 주요 기능

📅지키고 싶은 습관들을 기록해 캘린더에서 확인할 수 있어요.

• 시간과 캐릭터를 선택할 수 있습니다.
• 습관은 3일과 7일 중에 선택할 수 있습니다.
• 설정한 시간으로 타이머를 진행하고 습관을 달성할 수 있습니다.
• 설정한 습관을 캘린더에서도 확인할 수 있습니다.

🙌친구를 검색하여 팔로우하고 선택하면 친구가 기록한 습관을 확인할 수 있어요.

• 친구의 이메일, 이름 또는 검색코드를 사용하여 검색할 수 있습니다.
• 캘린더에서 친구가 공개 설정한 습관을 확인할 수 있습니다.

👀친구의 습관에 좋아요와 댓글을 달아 소통할 수 있어요!

• 친구가 어떤 습관을 했는지 둘러보고 응원과 코멘트를 남길 수 있습니다.

👫친구에게 보여주고 싶지 않은 습관들은 프라이빗 설정으로 숨길 수 있어요!

• 프라이빗을 설정한 습관은 친구들이 캘린더에서 볼 수 없습니다.

🏅뱃지들은 어떻게 얻는지 비밀..! 서비스를 이용하면서 하나씩 얻어가는 재미를 느껴보세요!

• 얻은 뱃지들은 이미지와 함께 언제 획득했는지 알 수 있습니다.
• 얻지 않은 뱃지들은 물음표 모양의 뱃지와 함께 힌트를 제공합니다.

📢실시간으로 알림을 받을 수 있어요!

• 뱃지 획득, 댓글, 좋아요, 습관 달성 시 실시간으로 알림을 받을 수 있습니다.

🙍‍♂️내 프로필을 편집할 수 있어요!

• 사진과 이름, 상태메시지를 변경할 수 있습니다.
• 친구들의 상태메시지는 팔로우 또는 팔로워 목록에서 확인할 수 있습니다.

👪 TEAM 소개

김민섭 리더	박민혁	최명순	전소연 부리더	배지영

🔧 기술 스택

💻 백엔드

💻 프론트엔드

🎇 개발 포인트

• 타이머
• 코드 스플리팅
• 이미지 리사이징
• PWA

🚀 트러블슈팅

• 타이머
• 친구 검색 기능