👨‍⚕️가족과 함께하는 당뇨관리 <관리하당> 회고

1. Why?

SSAFY(삼성 SW아카데미)의 마지막 프로젝트 <관리하당>에 대한 회고를 작성해보고자 한다. 처음으로 모바일 App으로 개발한 프로젝트로, React-Native를 사용했다. 이번 글에서도 프로젝트를 회고하면서 Keep, Problem, Try를 정리해보고자 한다.

프로젝트 요약

👨‍⚕️프로젝트 Github

• 기간 : 23.10.09~23.11.25(7주간)
• 팀원 : 6명(Frontend 2인, Backend 4인)
• 역할 : Frontend 개발자
• 사용 기술
  • Frontend : React-Native, TypeScript, Styled-Component, Redux, React Query
  • Collaboration : Notion, Figma, Git, GitLab

---

2. 기획

문제점

• 젊은 당뇨인구 급증 및 급속한 노령화로 인한 당뇨환자 증가
• 당뇨환자는 혈당 측정과 운동 및 식이조절, 수분 섭취 등의 관리가 필요하나 잘 이뤄지지 않는 경우 잦음

해결방안

• 혈당 기록 및 관리, 식사 기록 및 관리 기능 제공
• 가족 혹은 케어를 도와주는 사람과 그룹을 맺도록 함
  • 그룹끼리는 지난 기록 보기, 챌린지 설정 등이 가능
  • 다른 멤버의 챌린지가 미완료라면 알림 전송 가능
• 식사 후 일정 시간이 지나면 혈당 기록 요구 알림 전송

---

3. 개발

안 어썸한 React-Native

프론트를 맡은 둘 다 Web개발만 해봐서 Next.js + PWA로 프로젝트를 진행할까 계속 고민했지만, 크로스 플랫폼 App이 주는 이점. 특히나 건강 관련 정보는 민감할 수 있기에 보안을 고려해서라도 React-Native로 진행했다.

 

둘 다 TypeScript와 React에는 익숙했기에 이를 기반으로 하는 React-Native는 상대적으로 부담없이 도전할 수 있기도 했고, App 개발은 처음이기에 약간의 설렘도 가지고 있었다.

현실

현실은 좀 달랐는데, 시작부터 험난했다. "삼성"청년SW아카데미에서 진행하는 프로젝트니 IOS쪽 지원은 잘 해주지 않는다는 말을 들었고, 안그래도 개발 기간이 타이트한데 IOS까지 신경쓰기에는 힘들것같아 깔끔하게 포기했다.

 

개발 과정에서는 Native 관련 기능을 사용하기 위해서 오랜만에 Java 코드를 수정하기도 했고, Android Studio에서 실행하는 에뮬레이터에서 에러가 발생하기도 했다. 그리고 무엇보다도 React-Native Debugger는 정말 금쪽이 그 자체였다.

 

추후에 App 개발쪽을 공부해야한다면, 반드시! Native App 개발에 대한 학습이 필요해보인다.

폴더구조

폴더구조의 Best Practice를 찾아서

무한 스크롤로 UX 개선하기

무한스크롤을 통해서 UX 개선하기/React-Native

debounce로 Api 요청 횟수 줄이기

Debounce를 활용해서 api 요청 횟수 줄이기

코드 리뷰의 중요성

나의 코드리뷰(클린하고 일관적인 프로덕트를 위해)

---

4. Keep, Problem, Try

Keep

• 모바일 환경을 우선적으로 고려하여 React-Native를 도입
• 클린하고 일관적인 프로덕트를 위해, 상세한 PR 작성 및 적극적인 리뷰
• 상황에 알맞은 폴더구조 사용
• 재사용성과 유지보수성을 위해 컴포넌트와 Util함수, type을 모듈화
• Interface와 Type의 차이점에 대해서 학습 및 사용

Problem & Try

• JsDoc로 주석을 작성하는건 가독성에 도움이 되지만, 코드가 주석을 못따라가는 현상 발생
  • • Try : 핵심적인 경우에만, 최소한의 주석을 작성하는 식으로 변경
• React-Native를 사용하며 App 관련 설정에서 많은 어려움을 겪음
  • Try : 추후 App 개발 시 Native App에 대한 학습 필요성을 느낌

---

5. 관련 블로깅

무한스크롤을 통해서 UX 개선하기/React-Native

Debounce를 활용해서 api 요청 횟수 줄이기

우아한 폴더구조를 찾아서(With Atomic 패턴)

나의 코드리뷰(클린하고 일관적인 프로덕트를 위해)

Interface VS Type / TypeScript