Retrospection_W5

📄 2020.12.14 (월)

What did we do?

[크롱]님 마스터 세션

• 클린 코드, 유지보수

• fe개발자에게 하고싶은 질문이란...

  • ㅎㅎ.. 👍👍
  • 😭 😄 😭

• transaction 페이지

  • 외화 환율 적용 -> 원으로 통일
  • 자잘한것 수정
    • 모달 안닫힌 버그
    • css등

• Settings 페이지

  • ImageUploader 구현
  • cloudinary와 프로젝트 연동
  • Image Upload 기능 구현 (프로필 사진 변경)

• 보고서 페이지

  • 분석 자료 추가

해결할 과제

• webpack build 오류
• nginx로 배포

---

📄 2020.12.15 (화)

What did we do?

📌 reducer 분리

• 각 Container 별로 분리하기
  • 모두 동의!! 👏
• props를 slice에서 관리하는 부분은 아직 보류

📌 소셜 로그인

• frontend 로그인 요청 -> OAuth 인증을 통해 User 인증 받고 -> front는 code를 받은 후, backend에 axios.post 요청을 통해 로그인 진행 -> back은 front에서 받은 code를 가지고 access_token을 GitHub에 요청 -> access_token을 받은 후에 이를 바탕으로 userInfo를 요청 (id, email, nickname...) -> userInfo를 받은 후 JWT토큰 만들어서 client로 반환

• 원래 백에서 github authentication url을 받아 와야 하지만 url이 고정이라서 api 호출 줄이자는 차원에서 url을 front에 넣었습니다. 그래서 버튼 a tag href 로 누르면 github authentication url을 타서 resource 서버의 인증 페이지로 redirect 가 되고 거기서 github인증 후 client에 대한 유저 정보 인가를 하면, github oath 설정 했던 callback url인 저희 사이트 메인 주소로(로그인페이지) 돌아가게 됩니다. 이때 query로 authentication code 를 받게 되는데 저흰 이것이 있다면 바로 서버에 로그인 처리를 합니다. query로 서버에 authentication code를 보내서 서버가 이것과 기존에 설정한 github oauth client id 와 password로 다시 http request를 resource 서버인 github에 요청 하여 유저의 정보를 열람할 수 있는 토큰을 받아온다. 토큰을 받으면 이 유저가 인가한 정보들을 가져 올 수 있다.

📌 GitHub Action

• action script
• script 부분 오늘 작성 완료!!!

    script: |
      cd /root/Project16-B-Account-Book
      git pull origin master
      cd server/
      npm install
      pm2 reload server
      cd ../client
      npm install
      npm run build
      pm2 reload client

📌 배포 방식 고민

• FE & BE: pm2 로 배포 완료!!!

📌 발표 주제 쓸 내용 정하기!

• 한 두 문장 이내로 적어주세요.
• 산출물에 대한 소개 보다는 지난 5주 동안 팀이 함께 배우고 성장한 부분을 어필할 수 있도록 적어 주는 게 좋겠죠?
• 우리만 셋이다, 3-1=0
• 시각화
• 성장 이야기, 기술 스택 설명, 우리 프로젝트가 뭔지
• 3人 이라 더 좋았던 화백 회의 개발기
• 위기 탈출 넘버원
• Open Up Infinite Possibilities of
• '새로운 것을 잘 익힐 수 있는(러닝커브를 가진 사람)'

📌 PPT 틀 잡기

• 대충 어느 구성으로 갈지? 컨셉이라던지 ㅎㅎ
• 구성: 성장 이야기
  • 가계부를 선택한 이유
  • redux
  • OAuth
• 기타논의
• 트러블슈팅
• 5장이라면, 1페이지 당 1분씩

5주 동안 겪은 것 ? (위기, 해결방법, 스토리)

• 기술적인 무지
  • redux / mongoDB / koa ... typescript X
• 필수/선택 기능 타협점
  • 모든 기능들을 추가 할 수 없어서 선택 기능을 몇개만 골라야 했다는 점
  • 구현하지 못한 기능 (고민 했던 점):
    • websocket 동시 편집
    • typescript 적용
    • Nscreen
      • 게시판, post-it (구상)
    • 소비패턴 알려주는 기능 💯 넷플릭스, 유튜브 관련된 거 많으면.. 식비 쪽이 많으면 먹을 거에 돈 많이쓴다. 택시를 많이 타시는군용!
    • 유사 스트리밍 서비스 체크 지니, 멜론 이런 거 동시 결제 하면 유사한 거에 돈 2개 내고 있어... 하나 해지해라!
    • dashboard 커스텀 기능 사용자가 원하는 차트나, 정보를 볼 수 있게끔!
    • 메모 기능 원하는 페이지에 메모를 붙인다. (페이지 별) 혹은 방명록 페이지를 만들어서 -> 하나의 페이지로 관리
• 가계부라는 주제가 약간 뻔했던 것(??)
  • 어떻게 차별성을 만들어야할지 걱정됐었음
  • 다른 가계부와 차별점은?
• MongoDB
  • 스키마 설계는 편하다, 유연하다
  • 데이터 관리가 생각보다 쉽지 않다
• 온라인 협업 잘했다 ㅎㅎ
  • PR, Issue 템플릿 생성, moqups를 활용한 화면 설계
• 기획서를 만드는 작업이 생각보다 많이 어렵고, 시간이 필요한 작업이라는 것을 깨달았습니다.
  • 사실 이게 제일 어려웠다
• MMS parser
  • 검색하면 많이 나올 줄 알았는데, 결제 문자 포맷(?)을 찾기가 어려웠어서 처음에 당황했음

📌사용자 맞춤

• 어느 카테고리에서 많이 사용을 하고 있어요!

📌 API 명세서

📌 데모 영상

• readme.md 에 추가하기
• 영상 편집 툴도 찾아보기

📄 2020.12.16 (수)

What did we do? [호눅스]님 마스터 세션

• Backend 이야기
• 코드스쿼드 & 루카스의 Backend는 어떻게 이루어져 있을까?

[모여서 PPT 제작]

• 발표 주제: '위기'
• 프로젝트 흐름 구상 & 디자인
• 5주 동안 프로젝트를 하면서 겪은 위기(에러)에 대한 고찰...
• (짭)포토샾 작업^^ 👍

📄 2020.12.17 (목)

What did we do?

📌 UTC 관련해서 통일 할 수 있는 점

• DB에서 데이터 가져올 때 -> Local 기준으로 변환해서 가져오는 건 어떨까요?!

📌 거래 내역 추가 시,

• tag 정보도 DB에 저장되면 좋을 것 같아요!

📌 useState

• 재사용이 된다면, 아예 store에 상태관리를 해보는 것도 어떨까?!!

📌 나중에 DB 데이터 바꾸기 ㅎㅎㅎ

account-book

• tags 필드 추가하기

transactions

• type 필드 추가하기 (없는 부분)

데이터 수정

• 새로 가계부 만들고
• 금액은 조금 적당히(?)ㅋㅋㅋㅋㅋㅋㅋㅋ
• 계산할 수 있을 정도

---

📄 2020.12.18 (금)

What did we do?

📌 추가해야 하는 것

토

• 공부했던 내용 정리
  • 공부하면서 질문 내용 정리
• 프로젝트 수정 (에러 고치기 + 스타일링)
• 오후 2시에 잠깐 만났다가, 만약 그 때 많이 못하면 다시 저녁에 만납시다~~

일

• 공부했던 내용 정리

• 예상 질문 뽑기 (어필하고 싶은 거)

• 데모 영상

• readme.md 에도 gif 추가

  • Tool도 찾아보자~!

📌 툴킷 쓴 이유

• 슬랙 A : 코드를 30% 줄일 수 있었다. actions을 따로 만들 필요가 없는 장점이 있다.
• saga: 비동기 처리 할 때는 saga가 조금 더 잘 처리해준다 정도로 말씀해주셨음