Skip to content

Meeting Notes

Jump to bottom
yeongbba edited this page Jan 17, 2021 · 26 revisions

폼생폼사 Meeting Notes

1주차 | 1월 7일 ~ 1월 8일

1월 7일(목) - 아이디어 회의 및 포지션 선정

1월 7일(목) 미팅일지

회의 내용 SUMMARY

  • First Project에서 만든 서비스, 본인의 역할, 느낀 점 설명
  • 커뮤니케이션에 사용될 위키 및 노션 운영 전략 회의
  • 프로젝트 아이디어 선정
  • 프로젝트 아이디어 기반 팀명, 서비스명 선정
  • 각자가 해보고 싶은 스택, 포지션 조사

프로젝트 아이디어

  • 복권 당첨 내역 서비스
  • 브랜드 소식 알리미(세일, 이벤트, 인스타) 사이트(최종 후보 선정)
  • kb one trade와 같은 ERP 서비스
  • 음식 영양가 체크, 하루 권장량을 기준으로 해당 유저의 음식 칼로리를 달력에 표시할 수 있는 사이트
  • 스팀과 같은 게임들을 한 눈에 검색할 수 있는 플랫폼
  • 웹툰을 한 곳에 모아서 소개해주고 최신 업로드 되는 웹툰을 알려주는 사이트
  • 마인드맵을 그려보고 서로 공유를 할 수 있는 서비스(최종 후보 선정)
  • 청년대출 신청 등 제출 서류들을 편하게 작성하고 관리할 수 있는 서비스
  • 내가 먹는 약 정보에 대해 알려주는 사이트

선정한 프로젝트 아이디어 기반 서비스명

  • 폼생폼사(한 번에 모두가 마음에 드는 이름이 나옴)

선정한 프로젝트 아이디어 기반 팀명

  • 잭스키스
  • 트랜스포머
  • 포마드
  • 아씨오
  • 양식당

선정 프로젝트 상세 내용

  • 퇴직금, 대출 등 제출해야 될 서류들을 쉽고 간단하게 작성하여 인쇄할 수 있는 서비스
  • 미 작성된 경우에는 임시저장 기능 / 작성이 완료 되면 인쇄, 공유, 저장
  • 저장된 기록은 히스토리 페이지로 이동
  • 원하는 서류들을 이용자가 신청할 수 있는 제안하기 페이지 생성

스택 및 포지션 선정

  • Frontend 백승용, 이영모

타입스크립트, 리덕스, 리액트 훅스, CSS(고민)

  • Backend 금교중, 함승균

타입스크립트, 몽고DB

  • 대략적인 UI가 나와야 스택을 구체적으로 정할 수 있을 듯

Action items

  • 아이디어 기획
  • 깃헙 레포지토리 생성
  • 팀명 정하기
  • 각 포지션 별 구현해야 할 세부내용 파악
1월 8일(금) - prototype 작성

1월 8일(금) 미팅일지

회의 내용 SUMMARY

  • team / stand up Meeting 시간에 미팅일지 브리핑
  • 영모님이 certbot을 통한 SSL 인증이 가능한 것을 확인
  • 팀명을 "폼생폼사", 서비스 명을 "양식당"으로 결정
  • 선정한 주제를 가지고 팀원들이 조사해 온 자료를 통해 prototype을 만들고 페이지를 구성

레퍼런스

  • DAOU Office, 대출심사 솔루션, KB OneTrade 수출 통관 신고, 그룹웨어의 기능을 참고 하는 레퍼런스
  • 프리폼, 폼 114, 예스폼, 비즈폼의 사이트에서 참고할 만한 양식의 레퍼런스
  • 핀터레스트에서 페이지 구성을 위한 레퍼런스
  • 애니메이션 및 CSS 효과를 위한 레퍼런스

페이지 구성 및 Prototype

  • 양식 파일은 클라이언트에서 저장하고 양식의 번호만 DB에 저장하도록 결정
  • 데이터 통신은 세션 방식을 사용하기로 결정
  • 첫 페이지는 처음 사이트 방문시 보여지는 페이지이고 UI는 프론트엔드에서 결정
  • 첫 페이지에서 로그인 / 회원가입, 로그인 및 회원가입 없이 사용할 수 있는 Travel Our Service 버튼 레이아웃 결정, 로그인 / 회원가입 버튼 클릭 시 슬라이스 효과로 보여지도록 결정
  • 메뉴 구성은 Home, Form Group, History, Suggestion으로 구성하였고 사용자 정보는 메뉴의 같은 레이아웃으로 배치하였고 첫 페이지를 제외하고 모든 페이지에서 렌더링되도록 결정
  • 메인 페이지는 로그인 및 Travel Our Service로 접속 후 보여지는 페이지이면서 "Home 메뉴" 클릭 시 렌더되는 페이지이다. 페이지 구성은 "마감일이 얼마 남지 않은 양식"과 "인기 Form Group"으로 렌더링되도록 결정
  • Form Group 페이지는 청년내일체움공제, 청년 수당등 작성해야하는 양식들을 선택할 수 있게 여러 개의 카드 형식으로 렌더링 되도록 결정하였고 검색할 수 있는 검색창 기능을 구성, 추가적으로 스크롤 기능도 필요
  • Form Group 페이지에서 카드 클릭 시 렌더되는 페이지는 양식들을 작성하는 페이지이고 작성이 필요없는 양식은 다음으로 건너띄어 작성하도록 구성하고 제출할 수 있는 "완료" 버튼, "임시저장" 버튼, "취소" 버튼으로 구성, 추가적으로 여러 양식을 한번에 볼 수 있도록 목록 기능도 추가
  • Form Group 작성 완료 후 렌더되는 페이지는 수정, 인쇄, 다운로드 버튼들 구성과 작성된 것을 확인할 수 있도록 렌더되고 목록 기능도 추가 구성
  • Form 페이지는 간단한 확인서, 신청서 등과 같이 하나의 양식들을 선택할 수 있게 여러개의 카드 형식으로 렌더링 되도록 하고 검색할 수 있는 검색창 기능도 추가 결정, 추가적으로 스크롤 기능도 필요
  • Form 페이지에서 카드 클릭 시 렌더되는 페이지때 렌더되는 페이지, "완료" 버튼, "임시저장" 버튼, "취소" 버튼으로 결정
  • Form 작성 완료 후 렌더되는 페이지는 "수정", "인쇄", "다운로드" 버튼들 구성과 작성된 것을 확인할 수 있도록 렌더하기로 결정
  • History 페이지는 사용자가 Form Group 또는 Form에서 작성한 것을 보여주는 페이지이고, 사용자가 작성한 Form Group과 Form 정보들은 엔드포인트를 다르게해서 받아오기로 결정하였고 검색창 기능도 추가하여 사용자가 작성한 Form Group과 Form을 검색하도록 결정(엔드포인트가 다르게 구성하였기 때문에 AJAX 요청을 두번 요청하도록 구성 필요), History 페이지의 양식들이 보여지는 카드에 삭제 버튼 추가
  • History 카드 클릭 시 렌더되는 페이지는 작성한 양식을 보여주고 삭제, 수정, 인쇄, 다운로드 버튼들로 구성, 수정 버튼 클릭 시 수정하는 페이지로 렌더링되고 "완료", "임시저장", "취소" 버튼들로 구성
  • Suggestion 페이지는 사용자가 원하는 양식을 웹사이트에서 작성할 수 있도록 요청하는 페이지이고 title 입력창, content 입력창, 업로드 버튼, 제출 버튼으로 구성

스택 및 포지션 선정

  • Frontend 백승용, 이영모

타입스크립트, 리덕스, 리액트 훅스, CSS(고민)

  • Backend 금교중, 함승균

타입스크립트(고민), 몽고DB

  • 대략적인 UI가 나와야 스택을 구체적으로 정할 수 있을 듯

Action items

  • 팀명과 서비스 명 교체
  • prototype 구성

2주차 | 1월 11일 ~ 1월 15일

1월 11일(월) - Data flow 정립

1월 11일(월) 미팅일지

회의 내용 SUMMARY

  • UI 전체 flow에 대한 토론 진행.
  • 각자 (~목)요일까지 진행할 사항 확립.
  • 1차 상세 테크트리 확정, 프로토타이핑을 진행하며 해당 tech stack에 대한 학습과 연습을 자율적으로 진행.

주말 조사내용 + 작업예정 진행사항(~목)

  • 영모: 주말동안에 와이어프레임을 다듬으면서 추가 논의가 필요한 사항을 발견. 금일자로 논의 필요. 실제 화면처럼 목업 파악과 pdf 구현
  • 승균: mongoDB, mySQL 둘다 작동되는것 확인. flowchart 작성중 API설계 참여하여 논의 필요.
  • 교중: mongoDB에 대한 파악, TypeORM, mariaDB스택 결정, API,DB 설계예정
  • 승용: UI 프로토타이핑, 컴포넌트 상하관계와 기능을 잡고 CSS 관련 기능 조사.

프로젝트 구성 논의

  • SCSS? : (영모) 부딪히면서 학습하는 방식도 추천 → to (승용)
  • (영모)금요일자로 완료된 내용 중 Docker 적용이 어려워짐. React node mongodb Https 까지 적용된 상태. AWS에서 IAM 사용자 권한설정이 필요함. → (교중) 메인아이디로 사용자 각각 추가.
  • (영모) github로 notion 회의내용 wiki 탭에 이동 중.
  • (승용) prototype github에 1차 업로드. 금일 구체화 예정.
  • (영모) retrievo 의 예시로 핵심 기능 페이지에서 반응형 웹 구현의 어려움 설명.
  • (승균) flowchart 작성 (miro 사용예정). 노션에는 전체 내역 업로드, github에는 detail 별로 구분하여 이미지 삽입. (github에는 파라미터는 노출 제거된 버전으로.)
  • (back-end) API, DB 설계 논의 시작.
  • (전체) 에러 핸들링 논의. try-catch-finally에 더하여 error status code 분기로?
  • (승용) 에러 핸들링 분기는 클라이언트와도 논의가 필요. 경우의 수가 많음.
  • (영모) higher order component [HOC] 디자인 패턴 적용 추천. → 백엔드에서는 isAuth, isAdmin 컬럼 필요.
  • (전체) intro 화면 guest mode , Sign in화면 OAuth 로그인 버튼 구도 변경 논의
  • (영모) →(승균) flowchart 작성 후 데이터의 전반적인 flow도 추가하여 어떤 데이터가 들어가는 것인지에 대한 정리 요청.
  • (back-end) 깃북에도 데이터의 흐름 작성 필요.
  • (back-end) passport.js 사용 필요? (OAuth + 내부는 jwt토큰)
  • (승용) list와 form 상호 변경됨. (폼 그룹과 폼으로)
  • (영모) 전체 흐름도 논의 : 로그인 ~ main form 부분. 개별페이지에서는, 1.폼에대한 데이터, 2.폼그룹에대한 데이터, 3.유저에 대한 데이터로 각각 프론트, 백엔드가 상호작용. ~ 폼그룹 내용 설명(하단 div의 기관, 업데이트 일자, 폼 목록등 detail 설명 후 write now 버튼)
  • (승균) form group 페이지의 검색창에서, 내용 전체 검색인지, 제목과 description만 검색인지에 따라 DB 선택이 갈림. → 제목과 description만 검색으로 정해짐. (mysql 유리.)
  • (영모, 승용) state를 하나만 운용 선호. 성능 이슈 논의 추가 → 폼 그룹에 대한 데이터 전달 시, 백엔드에서는 해당 데이터를 정렬하고 8개씩 끊어서 주는 방식 요청. →전체에서 검색시, 최신순, 인기순으로. About 페이지네이션.
  • (전체, 교중) 개별 폼 페이지에서 그룹화 관련 논의(데이터 저장소 설계와 관련된 이슈). (교중)EER diagram 예시로 전체 설명.
  • (전체) 그룹핑 만들시, 이름은 새 그룹으로, 이름중복 허용
  • (전체)저용량, 소규격의 데이터를 규격 변경 없이 체계적으로(Mysql, java) vs 대용량 빅데이터를 입력, model컬렉션 수정이 빠르게(몽고디비 + 파이썬 빅데이터 프로세싱)? 주말 저장소 CRUD 실험 결과, 모델링 수정은 몽고디비가 빠르나, 데이터타입 체크 및 정해진 컬럼 검색은 mysql이 빠르다. (장단점) → 현재는 대규모 개발이 아니므로 mariaDB같은 RDB로 충분하다.
  • (전체)히스토리 내용을 확인 시 수정하는 버튼 필요, (전후 페이지에 전체보기 버튼 +)
  • (전체)폼 양식 페이지. (만약 유저가 이 해당 폼을 작성했다면, form-id와 엮인 data를 보고, {}거나 null 이면 X, data가 있으면 미리 채워서 넘긴다 )프론트엔드에서는 폼그룹을 클릭하면, 폼그룹에 대한 데이터가, 프론트에서 아이디로 맵핑된 폼들을 찾아서 안에 넣어주게 됨.
  • (전체) 양식 입력 페이지에서 임시저장이나 작성완료 버튼은 json_replace 등으로 내용 업데이트, 완성되었는지 안되었는지는 boolean 값으로 구별한다.
  • (전체)아무것도 입력하지 않을 시, 빈 객체{ }로 오게 된다. (유효성 검사 이슈)
  • react Hooks의 useForm 라이브러리 사용 예정(json 형식.)
  • (전체)[작성완료 페이지] 프론트에서 이 양식에 맞는 데이터를 백엔드에 요청하여 받는다. boolean 값으로 임시저장페이지로 리다이렉트할지, 작성완료된 페이지로 갈지 결정됨. react-pdf와 같은 모듈 이용, 임시저장-작성완료-수정하기는 isCompleted 불린값 토글로 구별
  • (전체)[히스토리 페이지] 히스토리 데이터를 요청하면, 10개씩 끊어서 요청. 오름차순 내림차순의 문제 - 프론트,백 모두 해야할 일이 증가 → 날짜순&이름순 중 날짜순 우선순위로 구현하기 삭제하기 버튼을 누르면 id 전달, 삭제되면 state에 반영
  • 백엔드는 유저에 대한 히스토리 데이터를 전달(임시저장, 작성완료 isCompleted 플래그에 따른 구분)
  • 서류가 겹치는 것(이미 작성한 게 히스토리에서 있는경우)
  • (전체)[히스토리 페이지]api→default 최신이 위에, api post(" ") 페이지 수, api delete 삭제 기능
  • (전체)[제안하기 페이지] 프론트엔드에서 title, file을 전달하면, 백엔드에서는 저장한다. (multer 사용)
  • (전체)[admin 페이지] userdata, 파일 제안하기 요청을 프론트가 보내면, limit 10개 정도로 response. 오름차순 내림차순은 number 기준(pk로 넘버를 잡지 말것.) 제목만 검색 기능. 그리고 유저 수정, 삭제 기능도 필요.
  • 그 후 https://www.yangsikdang.ml 주소로 팀장의 세팅 완료.

스택 선정

  • Frontend 백승용, 이영모

타입스크립트, 리덕스, 리액트 훅스, CSS, SCSS(고민)

  • Backend 금교중, 함승균

node, express, TypeScript&JS, passport.js,

TypeORM, mariaDB(RDS freeTier)

소감?

  • (승균) 소프트웨어공학이나 방법론이 체감이 되었다. 애자일, 스크럼, 프로토타이핑을 일요일과 월요일에 걸쳐 해본 느낌.

선정 프로젝트 상세 내용

  • 퇴직금, 대출 등 제출해야 될 서류들을 쉽고 간단하게 작성하여 인쇄할 수 있는 서비스
  • 미 작성된 경우에는 임시저장 기능 / 작성이 완료 되면 인쇄, 공유, 저장
  • 저장된 기록은 히스토리 페이지로 이동
  • 원하는 서류들을 이용자가 신청할 수 있는 제안하기 페이지 생성

Action items

  • 아이디어 기획
  • 깃헙 레포지토리 생성
  • 각 포지션 별 구현해야 할 세부내용 파악
  • https://www.yangsikdang.ml 배포됨
1월 12일(화) - (F) Wireframe & UI / (B) Flowchart & API 문서

1월 12일(화) 미팅일지

회의 내용 SUMMARY

  • 와이어프레임은 실제 구현 할 때 div 태그 하나하나를 어떻게 할지 생각하며 작성하기
  • https로 ec2에 클라이언트와 서버 배포 설정 완료.
  • 현재 클라이언트에 http로 접속 시 페이지를 찾을 수 없다고 뜨는데, 이를 방지하기 위해 https로 자동 리다이렉트 설정하기로.
  • 서버 시작 할 때 sudo로 시작 할 것(인증서 파일을 접근하기 위해 sudo 권한이 필요)
  • 서버 코드 작성 시 ejs? 에 대해 이야기해보고 결정하기.
  • 노드 스크립트 설정시 cross-env 도입 고려해보기. prod, dev 등등 나눠서 실행 가능?
  • 이번 주 안에 Task와 milestone 작성하고, directory 구조까지 잡고 다음주 월요일부터 딱 코딩 시작 가능하도록!

Back-End 진행 상황

  • 승균님
    • miro를 이용하여 flowchart 작성 진행중.
    • 회원 탈퇴 버튼 등 아직 잡히지 않은 UI가 있으나 기능은 탑재 예정이므로 있는 것으로 반영하여 flowchart 제작 예정.
  • 금교중

Front-End 진행 상황

  • 승용님
    • 오전에 나온 와이어프레임 이야기를 반영하여 와이어프레임을 거의 완성.
    • 일부 글씨가 삐져나오는 점 등 다듬는 과정 후 업로드 예정.
  • 영모님
    • ppt로 UI 디자인 작성하시는 중.
    • 입력 화면 레퍼런스들을 모으셔서 그 중 하나로 추려서 UI를 잡아보실 예정.
1월 13일(수) - (F) CSS Animation & UI / (B) Flowchart & Passport js

1월 13일(수) 미팅일지

회의 내용 SUMMARY

  • Backend - api 문서 거의 작성 완료, Passport js 공부하면서 마무리 작업 진행
  • Frontend - Wireframe 작성 완료 / UI Design 진행 중
  • http에서 https로 리다이렉트 처리 완료
  • SR 진행됨과 동시에 wiki 페이지 업로드 진행
  • 내일 오전 스탠드업 미팅에서 Git rule 관련해서 회의 진행
  • 코딩 컨벤션 확인 후, 필요한 사항 정리 예정.
  • 금요일 일정 - Milestone & Task 카드 작성 완료, 디렉토리 및 환경 세팅, 회고

Back-End 진행 상황

  • 함승균
    • miro를 이용하여 flowchart 작성 진행중.
    • Page 기준 두 개 반 정도 남은 상황, 내일 중 Flow chart 작업 완료.
  • 금교중
  • 내일 승균님, 교중님 API 관련 회의 진행 후, API DOCUMENT 마무리 정리 예정

Front-End 진행 상황

  • 백승용
    • 메인 페이지, 홈 페이지 내의 애니메이션 관련 CSS 코드 조사
    • Typescript, useForm, hooks 관련해서 공부 진행할 예정.
  • 이영모
    • UI 작업 70% 정도 진행 완료 / 내일 중으로 UI 작업 완료 예정.
    • Typescript 관련해서 공부 진행할 예정.
1월 14일(목) - TEAM Rule 정립

1월 14일(목) 미팅일지

회의 내용 SUMMARY

  • Git rule 커밋 규칙, 브랜치 규칙, PR규칙 정리 완료
  • 코딩 컨벤션 / 변수, 리터럴, 함수 등 간단한 코딩 규칙 정리 완료
  • zeroCho 코딩을 참조하여 타입스크립트 적용에 대해 논의 후 차주부터 코딩 시작할 예정
  • 금요일 예정이었던, Directory 구조 잡기는 다음 주로 이동
  • Project Reflection 진행 완료 / 발표 - 금교중
  • 토, 일 오전 10시 약 1시간 정도 예제 코드를 참고하여 공부한 내용에 대해 공유할 예정.
  • 금요일에는 2주간 진행해야할 업무 Task 카드로 옮기기

Back-End 진행 상황

  • 함승균
    • miro를 이용하여 flowchart 작성 완료 / Summary, Detail, Full Chart 금일 중 작성 완료.
    • 백엔드에 타입스크립트 적용에 대해 공부 진행 중
  • 금교중
    • Passport js 사용 / 토큰 방식으로 이메일 로그인 구현은 가능하나, Oauth의 경우에는 토큰 방식으로 구현이 어려운 것으로 보임. Passport 를 사용한다면, 세션 방식으로 구현하는 것으로 정할 듯.
    • 백엔드에 타입스크립트 적용에 대해 공부 진행 중
  • API DOCUMENT 마무리 작업 완료.
  • API Document & DB schema 작업 진행하면서 수정 되어야 할 있어 WIKI Page에는 마무리에 업로드 예정.
  • Nodebird 예제 코드를 따라 Typeorm에서 Sequelize로 스택 변경하는 것이 좋을 것으로 보임.

Front-End 진행 상황

  • 백승용
    • Typescript / Next.js / Redux-saga 공부 진행 중
  • 이영모
    • Typescript / Next.js / Redux-saga 공부 진행 중
    • UI 2차 수정 (총 11페이지, 로그인&회원가입&메인 페이지 외 UI 확정)
1월 15일(금) - 프로젝트 세부 일정 계획

1월 15일(금) 미팅일지

회의 내용 SUMMARY

  • 전체 디자인 회의 및 taskCard 별로 간단한 명세서를 만들고 SR 마무리.
  • 다음주에 디렉토리부터 순차적으로 초기 세팅을 잡고 프로그래밍 시작.
  • 레퍼런스로 잡은 솔루션의 아키텍처를 통해,API 설계 중 예상되는 구조적 약점 보완
  • 이번 주말에는 실제적인 코드와 구조에 대한 조사 및 학습 예정.

주말 조사내용 + 작업예정 진행사항

  • next.js 및 redux saga 조사자료 공유 예정.
  • typeScript 관련 학습 필요
  • (중요) ts-nodebird 구조 및 디자인 패턴 분석

프로젝트 구성 논의

  • (영모) 플로우차트 반영, 메인 페이지 UI 반영, 위키노트 14일까지 추가됨, taskcard까지 완료하면 프로그래밍 작업 시작. UI ppt 기획안 1차 확정.
  • (전체)회의중 login 페이지 색상의 green vs white로 논의중(교중)→ 일단은 1차 기획안 green으로 가되, Advanced 개발로 white 옵션 논의중
  • (승균) 우선순위===플로우차트 상단부터 차례대로? 사유-실제로 로그인→유저정보가 맨 위의 1순위, 거기부터 순서대로 flow가 내려오는 구조였으나, 기능 단위별로 자르는 과정에서 모양을 위로 옮김.
  • (영모)next.js 의 장점. SEO 최적화, 클라이언트사이드 라우팅, 서버사이드 랜더링, React.js와의 비교 등 설명. (승용) next관련 학습이 필요하다는 의견 제시
  • flowchart 가로 길이 변경하여 documents에 파일 반영
  • (back)DB groups userId 추가 요청, front 컬럼 추가(isDefaultGroup) (back) milestone ~ issue분류, taskCard 작성 완료.
  • (back) GET /form/:id , POST /form/:id API 추가
  • (back) 종합적으로 formGroup, form 컨트롤러 단위에서 1일정도의 시간 추가가 예상됨.
  • (front) UI와 기능구현 단위로 분류했으나, 이번에는 하나로 통합분류.(개별)
  • (front) 월요일은 세팅일. 하루가 남을 것으로 예상. 로그인슬라이드회원가입 부분은 승용님, 메뉴바유저수정메인은 영모님, 폼그룹폼 기능단위는 승용님, 폼 양식과 폼 완성 페이지는 총합 4일로 예상됨. 히스토리 페이지, suggestion은 승용님, 관리자 페이지는 영모님으로 마무리.
  • (front) 리덕스 사가는 변경 범위가 예상만큼 많지는 않음?(도입예정)

copyrightⓒ 2021 All rights reserved by 폼생폼사

Home

Team

Plan & Setting

Work

Reference

Clone this wiki locally