경도인지장애 가정 케어 서비스, 두뇌비타민
상태 관리
- id
- 이름 name
- 별명 nickname
- 전화번호 phoneNumber
- 가족 고유번호 familyKey
- 가족 아이디 familyId
- 폰트 사이즈 fontSize
- 프로필 이미지 profileImgUrl
- 학력 education
- accessToken
페이지 구조
- 스플래시 Splash
- 폰트 사이즈 설정 FontSize (최초 앱 시작 시)
- 로그인 LogIn
- 회원가입
- 전화번호 입력 PhoneNumberSet
- 이름/별명 입력 NameSet
- 부가 회원정보
- 생년월일/성별 입력 BirthDateSet
- 최종학력 입력 EducationSet
- 홈 Home
- 선별검사 ScreeningTest
- 선별검사 결과 ScreeningTestResult
- 인지향상 프로그램 CogTraining
- 인지향상 프로그램 결과 CogTrainingResult
- 가족 커뮤니티 Family
- 게시글 상세보기 FamilyPostRead
- 마이페이지 MyPage
- 회원정보 Setting
- 회원정보 변경 Profile
- 전화번호 변경 PhoneNumberEdit
- 글자크기 변경 FontSizeEdit
- 우리가족 비타민 Vitamin
- 비타민 사진 모음 VitaminAlbum
- 비타민 만들기 VitaminWrite
- 비타민 문제 풀이 VitaminPlay
폰트 사이즈 설정
- 루트 폰트 사이즈
- 작게 10px -> 62.5% (16px)
- 중간 11.25px -> 70.3125% (18px)
- 크게 12.5px -> 78.125% (20px)
- 디자인은 작은 폰트 사이즈를 기준으로 작성되었다는 점
- -> 개발 시 작은 폰트 사이즈(루트 10px)를 기준으로 rem 단위로 작성
- 박스와 같은 레이아웃에 rem 적용 시 폰트 사이즈 변경에 따라 레이아웃도 달라지는 문제
- -> 폰트 사이즈만 rem, 나머진 px로 작성
Git 프로젝트 관리
이슈 등록
-> 개발
-> Pull Request
-> Review
-> 수정
-> Merge
- 이슈 등록
- 개발
- branch 생성: develop/기능명/이슈번호 or develop/이슈번호
- 커밋 메시지에 #이슈번호 함께 작성하여 링킹
- PR
- 키워드 #이슈번호: 이슈 연결하여 merge 시 자동 이슈 닫기
- 키워드: close, closes, closed, fix, fixes, fixed, resolve, resolves, resolved
- 이슈 개수만큼 키워드 작성. ex) close #1 close #2
- 이슈가 닫아지면 자동으로 추적되어 Task 체크 표시됨
- 리뷰
커밋 메시지 Tag Type
- Feat: 기능 구현
- Fix: 버그 수정
- Docs: 문서 수정 (리드미와 같은 마크다운 파일)
- Style: 코드 로직 변경 없이, 코드 포맷 수정 (세미콜론 누락과 같은 코드 스타일)
- Design: UI 작업
- Refactor: 코드 개선
- Chore: 패키지, gitignore, 자잘한 수정
사용 도구
도구 |
도입 이유 |
Vite |
여러 파일을 하나의 파일로 묶어주는 번들러. Go(컴파일 언어) 기반이라 번들링 속도가 JS(인터프리터 언어) 기반의 기존 번들러(Webpack)보다 100배 빠름 |
TypeScript |
JS에 타입 명시함으로써 에러 미연에 방지 |
React |
SPA 지원. 페이지 깜빡임 없이 작동해서 UX에 도움 |
Redux |
상태관리의 근본. 보일러플레이트 코드가 비교적 많다는 단점이 있긴 한데 경험하고자 씀 |
Styled-Components |
컴포넌트 재활용에 용이 |
ESLint+Prettier |
가독성을 위해 코드 포맷 통일 |
SonarLint+SonarCloud |
보안 위협이나 오류를 야기할 수 있는 코드를 체크해주는 정적분석기 |
Google Analytics 4 |
데이터 분석 툴 |