Retrospection_W4

📄 2020.12.07 (월)

What did we do?

[크롱]님 마스터 세션

• 성능 최적화
• Lighthouse, Performance 탭을 사용하여 확인 가능

개인 개발

• 수입/지출 페이지 리팩토링 및 모달 적용 변경 작업
• 기존에는 가계부와 카드 명만 확인했다면 년도와 월도 추가로 확인하여 거래내역을 필터링하도록 query 구현
• 최근 6개월 년도, 월을 선택할 수 있는 dropdown 구현

📚 회고

상의 한 부분

• 수입/지출
  • 카테고리/테그 어떻게 불러올지
  • 수입 지출 내역 불러오면서 같이 불러올것
• 보완할 부분 :sleeping_accommodation: :sleeping: :sleepy: :sob::sob: 내일 할 것

continue 모각코...

📄 2020.12.08 (화)

What did we do?

• 모각코
• 가계부 선택페이지 기능 구현
  • 가계부 추가/삭제
  • 애니메이션 적용 중
  • 피드백 후 색상 수정
• calendar 페이지 구현
  • calendar 이벤트 추가
  • calendar 디자인
  • calendar 날짜 계산 함수 구현
  • 가계부, 년도, 월로 필터링된 거래내역 GET API
• 로그인 페이지
  • 디자인 추가
• sms 파싱 추가 👍

해야할 일

• readme 수정

  • 서비스 명, 이미지
  • 프로젝트 소개
  • 팀원 소개
  • 배포 URL
  • react, koa, node.js 등 -> shields.io/badge 적용
  • 백로그
  • 클론 후 실행 방법
  • 기술 스택
  • 웹 아키텍처

• csv import

🌈 12/08 전체 가계부팀 MMS회의

1. 사용자화가 가능한 카테고리, 결제수단을 어떻게 매핑해줄 것인지?

• MMS에서 온 거래내역은 "미분류"로 묶는게 현실적이다!

2. 공통 요구 정보

• 카드사 <- 결제수단 ( 특정 카드사를 대상으로 파싱 )

  • 대부분 처음에 나오는것 같다.
  • 특정 단어가 여러개 나온다면 첫 번째 나온 것을 파싱(롯데카드, 롯데마트)

• 금액 ( 뒤에 "원" 이 붙은 가장 처음 나온 단어를 기준으로 파싱)

• 날짜,시간

• 입금 | 출금 여부 정보 축출(이체)

• 결제 "취소" | "승인" | "거절" 같은 예외 케이스를 분류

  • 특별한 키워드 x => 승인

function smsParser(input) {
    const tokens = string.replace(/\[web발신\]/i,'').trim().split(/[\s\n\r]/g)| 정규식 -> 👏👏👏

    let paymentList = ['신한','KB','농협','BC','현대','우리'];

    tokens.forEach((el) => {
        숫자+'원' -> 금액 (,도 포함됩니다)
        숫자/숫자 -> 날짜
        숫자:숫자 -> 시간
        초반부의 문자에서 찾기 -> 카드사(uppercase)
        결제 여부 -> 승인(default),취소,거절
    });
}

우리팀만의 기능(?)

• 소비패턴 알려주는 기능 💯
  • 넷플릭스, 유튜브 관련된 거 많으면..
  • 식비 쪽이 많으면 먹을 거에 돈 많이쓴다.
  • 택시를 많이 타시는군용!
• 유사 스트리밍 서비스 체크
  • 지니, 멜론 이런 거 동시 결제 하면
    • 유사한 거에 돈 2개 내고 있어...
    • 하나 해지해라!
• dashboard 커스텀 기능
  • 사용자가 원하는 차트나, 정보를 볼 수 있게끔!
• 메모 기능
  • 원하는 페이지에 메모를 붙인다. (페이지 별)
  • 혹은 방명록 페이지를 만들어서 -> 하나의 페이지로 관리

📄 2020.12.09 (수)

What did we do?

• [호눅스]님 마스터 세션

  • elastic search

• [타운홀 미팅]

• 로그인/로그아웃

  • 로그인 시 유저 정보 주입
    • Header component에도 적용
    • local storage에도 저장(새로고침 시 여기서 정보 가져옴)
  • 로그인 시 적절한 페이지로 redirect
  • 로그아웃 시 state/cookie/localstorage 삭제 및 redirect
  • app router 재설정
  • 404 페이지 디자인

• Calendar 페이지

  • Calendar 컨테이너 & Form 리팩토링
  • 수입/지출 체크박스 상태관리 추가 및 디자인
  • 수입/지출 체크박스 선택에 따른 거래내역 필터링
  • 추가) 눌렀을 때 그 날의 내역 보여주기

• Setting 페이지

  • 로그인한 user Img, name 출력

  • user 정보 가져오는 API 구현

  • Sun, Mon 설정 <-- 아직은 잘 모르지만 ㅎㅎ

    • startDayOfWeek: { type: String, default: 'Sun' },

  • 분석 시작 일 설정

    • startDateOfMonth: { type: Number, default: 1 },

• 가계부 선택 페이지 피드백 바탕으로 수정

• 보고서(analysis) 페이지 진행중

  • rechart 로 간단한 화면 구현
    • responsive container 적용해야 함
    • data parsing 해야 함

📄 2020.12.10 (목)

What did we do?

• 수입 지출 페이지

  • ux향상을 위한 작업
    • 단일 삭제 추가
    • 결제 수단 및 태그를 만들어서 넣어야 했던거 이제 입력만 하면 추가가 되게끔 변경
  • sms/mms 파서 적용
    • 형식에 맞는 sms/mms 넣으면 거래내역 입력창에 해당 정보에 맞게 거래내역 입력폼 생성
  • TODO
    • csv로 거래내역 bulk insert

• 보고서(analysis) 페이지

  • UI 수정
  • Top3 지출 추가
  • 누적 지출 수정
  • TODO
    • cookie extract 미들웨어
    • y-axis 오류 수정
    • 분석 항목 추가 및 responsiveContainer 적용
    • category 추가 해주세요

• 달력 페이지

  • 달력 계산 로직 수정
  • UTC 시간 -> local time으로 변경

• Settings 페이지

  • 가계부에 등록된 모든 사용자 정보 가져오는 API 개발
  • 사용자 정보를 Card 형식으로 보여지도록 디자인
  • 로그아웃 연동
  • TODO
    • 유저 가계부에서 삭제 (0번째 사람만 삭제 가능)
    • 유저 가계부에 등록 (전체 user 검색 가능하게 하기)
    • 로그인한 사용자 정보 표시 & 수정 기능
    • Master는 조금 더 다르게 표시해주기
    • axiosAPI로 변경하기!

• 배포

  • 우리 팀 배포를 위한 GitHub OAuth App 생성
  • 백엔드 배포 스크립트 작성

---

📄 2020.12.11 (금)

🙋‍♂️ 이번주는 어땠나요?

• 이제 진짜 마지막이 다가오는 게 실감이 났습니다 ㅋㅋ
• 너무 힘들었다 기능 구현 몰아치기 ㅋㅋㅋ
• 모각코를 진행하면서 팀원들로 부터 많은 피드백을 받고 보완할 수 있었다.

🛠️ 개선할 사항이 있을까요?

• 번들 사이즈 너무 큼 -> 첫 렌더링 시간 엄청 길어짐
  • library 축소
  • 코드 분할
  • 번들 총 크기 41.8MB 43.4mb??
  • 똥 컴에서 첫 페이지 렌더링 16초 걸림
  • inline-source-map 옵션 삭제

🤗 발표 후 받은 피드백

• 태그는 왜 만드셨는지 궁금합니다!

라이브러리

@material-ui/icons: 10.2 MB <-- 잡았다 이 녀석!
Recharts: 6.43MB <-- 기봉, 지찬님에게 크리티컬..!
Material-UI: 5.78MB
@reduxjs/toolkit : 1.73MB
@material-ui/lab: 1.34 MB
styled-components: 1.15 MB
react : 298kb
redux : 163kb

💗 발표 준비

• 우리 팀 발표 시간: 10:45 ~ 11:00

• 추가 Q&A 시간: 11:15 ~ 11:30

• 데모 영상 필요할지?

  • 있으면 좋죠

---

• 12월 11일 금요일
  • ppt 템플릿 전달 해주실 예정

---

• 12월 13일 일요일 11:00 까지
  • 대략적인 발표 내용 생각해보기
    • 무엇이 힘들었나, 뭘 개선했나 등
  • 프로젝트 발표 소개 페이지 1차 작성
    • 발표 주제 부분은 비워둬도 됨
    • 작성내용
      • 프로젝트 소개
      • 팀원 소개
      • 기술 특장점
      • 깃헙 주소 등

---

• 12월 13일 일요일 16:00 까지
  • GitHub readme 업데이트

  서비스 명, 이미지
  프로젝트 소개
  팀원 소개
  배포 URL
  react, koa, node.js 등 -> shields.io/badge 적용
  백로그
  클론 후 실행 방법
  기술 스택
  웹 아키텍처

---

• 12월 16일 수요일 16:00 까지
  • 발표 주제 notion에 작성

---

• 12월 17일 목요일
  • 기업 관계자 분들에게 notion OPEN!!!

---

• 12월 17일 목요일 16:00 까지
  • 발표 자료 boostcamp@connect.or.kr로 제출

---

• 12월 21일 월요일
• 우리 팀 발표 시간: 10:45 ~ 11:00
• 추가 Q&A 시간: 11:15 ~ 11:30
• 발표(7분)
  • 발표가 7분이 넘어가는 경우 음소거되니, 시간을 꼭 지켜주세요 (사전에 충분한 리허설을 권합니다)
  • 데모는 짧게!
  • 기술적으로 어떤 것을 도전, 얼마나 성장했는지를 어필하는 게 중요

---