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 개발에 대한 학습이 필요해보인다.
폴더구조
무한 스크롤로 UX 개선하기
무한스크롤을 통해서 UX 개선하기/React-Native
1. Why? 관리하당의 혈당 정보 페이지와 식사 정보 페이지 기획 과정은 다음과 같았다. 1. 재사용성을 높이기 위해 같은 카드 형식 styled component를 사용해서 날짜별로 보여주자. 2. 혈당 정보와 식사
cksxkr5193.tistory.com
debounce로 Api 요청 횟수 줄이기
Debounce를 활용해서 api 요청 횟수 줄이기
1. Why? "관리하당"에서 음식 등록을 위한 검색 기능을 구현할 때, useEffect로 값이 변경될 때 마다 api를 호출해 검색 하도록 구현하니, 지나치게 api 전송이 자주 일어나고 있었다. 예를 들어 "삼겹살
cksxkr5193.tistory.com
코드 리뷰의 중요성
나의 코드리뷰(클린하고 일관적인 프로덕트를 위해)
1. 클린하고 일관적인 프로덕트를 위해 클린하고 일관적인 코드만을 프로덕트에 남기는 것은 중요하다. 이를 위해서 뭘 할 수 있을까? 코드 작성과정에서 유지보수하기 쉽고, 일관성있는 코드를
cksxkr5193.tistory.com
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
1. Why? 관리하당의 혈당 정보 페이지와 식사 정보 페이지 기획 과정은 다음과 같았다. 1. 재사용성을 높이기 위해 같은 카드 형식 styled component를 사용해서 날짜별로 보여주자. 2. 혈당 정보와 식사
cksxkr5193.tistory.com
Debounce를 활용해서 api 요청 횟수 줄이기
1. Why? "관리하당"에서 음식 등록을 위한 검색 기능을 구현할 때, useEffect로 값이 변경될 때 마다 api를 호출해 검색 하도록 구현하니, 지나치게 api 전송이 자주 일어나고 있었다. 예를 들어 "삼겹살
cksxkr5193.tistory.com
우아한 폴더구조를 찾아서(With Atomic 패턴)
그렇다. 나는 폴더구조와 재사용성이 뛰어난 컴포넌트에 진심인 편이다. 싸피에서의 첫 프로젝트였던 스타게이트 이후 두 차례의 프로젝트를 더 진행하면서 겪은 폴더구조를 적어보고자 한다.
cksxkr5193.tistory.com
나의 코드리뷰(클린하고 일관적인 프로덕트를 위해)
1. 클린하고 일관적인 프로덕트를 위해 클린하고 일관적인 코드만을 프로덕트에 남기는 것은 중요하다. 이를 위해서 뭘 할 수 있을까? 코드 작성과정에서 유지보수하기 쉽고, 일관성있는 코드를
cksxkr5193.tistory.com
Interface VS Type / TypeScript
1.Why? TypeScript로 프로젝트를 진행하는 중, interface와 type(정확히 말하면 type alias-타입 별칭-이지만 편의상 type으로 부르겠다)의 차이점에 대해서 의문이 생겼다. 함수의 매개변수를 선언할때는 type
cksxkr5193.tistory.com
'Project > 프로젝트 회고' 카테고리의 다른 글
| 🧑🍳토이 프로젝트 <아워홈 사전과제> 회고 (0) | 2024.01.31 |
|---|---|
| 🌟SSAFY 우수 프로젝트, 비대면 팬사인회 서비스 <스타게이트>회고 (1) | 2024.01.23 |
| 💳 카드 혜택, 기프티콘 서비스 <모익> 회고 (0) | 2024.01.21 |
| 🌱새싹톤 <모두의 지하철> 회고 (0) | 2023.08.28 |
