Meeting Notes

폼생폼사 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 제작 예정.
• 금교중
  • API 엔드포인트 설계 및 뼈대 작성(https://app.gitbook.com/@david419kr/s/yangsikdang/)
  • form으로 제목과 파일을 함께 보낼 수 있는지 검증 필요.

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 엔드포인트 설계 및 뼈대 작성(https://app.gitbook.com/@david419kr/s/yangsikdang/)
  • Passport js 사용법 공부 중.
• 내일 승균님, 교중님 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) 리덕스 사가는 변경 범위가 예상만큼 많지는 않음?(도입예정)

3주차 | 1월 18일 ~ 1월 22일

1월 18일(월) - Directory 구조 설계 및 환경 세팅

1월 18일(월) 미팅일지

회의 내용 SUMMARY

• 프론트와 백엔드 둘 다 오늘 디렉토리 구조 정리까지 완료하고 기본 세팅 하기.
• 백엔드 디렉토리 구조를 노드버드와 비슷하게 ts와 js가 같은 폴더에 몰려있는 구조로 가져갈지, 혹은 src와 dist로 나눌지 고민.
• 시퀄라이즈 ts 컴파일시 dialect 에러 뜨는 것은 export 코드 한 줄 변경하여 해결 완료.
• Worklog 슬슬 잊기 전에 조금씩 작성 하기.
• 영모님이 프론트엔드 각 페이지별로 css 폰트와 색상 등 정리해서 notion에 올려놓으심.
• css에서 변수 사용하여 비슷한 곳들은 한 번에 관리.
• 프론트에서 사용할 이미지 준비 완료됨.

Back-End 진행 상황

• VSCode 디렉토리 구조 설계 완료.
• 제로초 노드버드의 설계를 참고하여 route와 controller를 별개로 분리하지 않고 통합하여 관리함.
• 결국 제로초 노드버드와는 달리 ts와 js 파일을 src와 dist 폴더로 나누어 관리하기로 결정.
• 기존에 제로초 노드버드의 강의를 참고하여 sequelize를 이용해보려 하였으나, 제로초의 강의와 노드버드 코드를 참고한다는 전제 하에서도 sequelize는 typescript와 함께 이용함에 있어 migration에 너무 번거로운 점이 많아, 기존의 계획을 수정하여 typeORM으로 스택을 변경.
• typeORM을 이용하여 ORM 설정 및 DB 세팅 완료.

Front-End 진행 상황

• 디렉토리 설정은 기존에 거의 된 상태라 각자 작업 시작.
• 승용님은 UI 폰트 적용 및 UI 배치 시작. 현재 메인페이지 큰 틀은 잡혔고 애니메이션에서 막힌 상태.
• css에서 가장 바깥에 있는 요소들의 크기 단위로는 rem 쓰기. 그 외에는 % 사용해도 무방
• 영모님은 카테고리 창은 거의 잡힌 상태.
• 현재 유저 정보 하드코딩된 상태이나 user API 완성된 후 적용 예정.
• svg 폰트 꾸미는 용도로 fontawesome 라이브러리 도입.

1월 19일(화) - (F) Main & User Page | (B) User API

1월 19일(화) 미팅일지

회의 내용 SUMMARY

• Typescript와 sequelize의 호환성 문제로 ORM 은 TYPEORM으로 교체
  • 마이그레이션, 관계 설정 면에서 더 사용하기 간편함.
• 백엔드 디렉토리 구조는 크게 entity, passport, routes, types, migration으로 분리.
• 백엔드 오늘 유저 관련 API CRUD 모두 완성될 예정.
• 백엔드 OS 관련 에러 문제로 ts node에서 js node로 전환.
• 유저 - 폼 개별 - 폼 그룹 순으로 API 작업 예정.
• 프론트엔드 승용님 메인 페이지, 로그인, 회원가입 오늘 UI 완성 예정.
• 영모 Nav 바, User edit UI 완성. API 완료 되면 바로 사용 예정.
• API 완성 상태 === 프론트엔드에 전달 될 response가 정리된 상태로 정의.
• Worklog 작업 내용 세분화하여 적어주기.

Back-End 진행 상황

• 유저 get, delete, login, register API 완료.
• 금일 ns node 문제로 에러 해결하는 데 약 2~3시간 정도 사용하여, 유저 관련 TASK를 처리 하는 데 다소 시간이 미루어짐.
• 유저의 delete, 이미지 업로드, edit 오늘 중으로 api 완성.
• 내일 개별 폼 관련 API 진행 예정이나, 양이 많아 예상 일정대로 끝나지 않을 수 있음.

Front-End 진행 상황

• 메인 화면, Nav 바, 유저 edit UI 완성.
• 메인 화면 내 로그인 창과 회원가입 창 승용님 오늘 UI 구현 예정.
• 유저 API 완성되는 대로 유저 관련 데이터 테스트할 예정.
• 내일 승용님은 그룹폼과 개별폼 페이지 작업 예정인데, 개별 폼 API가 먼저 만들어지므로, 개별 폼 페이지 먼저 작업.
• 영모, 내일 유저 관련 사항 완성, 홈 페이지 내의 카드 컴포넌트 UI 제작 예정.

1월 20일(수) - (F) Main & User Page | (B) Form API

1월 20일(수) 미팅일지

회의 내용 SUMMARY

• 사용자 프로필 CRUD API 구현 완료
• 로그인 / 회원 가입 API 구현 완료
• 오전 중 서버 배포 완료
• 프로필 Edit UI 구현 완료
• 개별 Form UI 구현 예정
• 로그인 / 회원가입 redux-saga 적용 예정
• 프론트 진행이 늦어지면서 백엔드 작업이 완료되면 프론트 지원할 예정

Back-End 진행 상황

• 회원 정보 API 리팩토링 및 회원탈퇴 시 리다이렉트 적용
• JSON.stringify로 DB에 데이터 저장하는 방식으로 적용
• 사용자가 작성한 개별 Form 불러오기, 수정하기, 삭제하기 API 구현 완료
• Form 데이터에 title 추가 예정
• 개별 Form의 총 개수 추가 예정
• 조회수 증가하는 로직 구현 예정

Front-End 진행 상황

• 메인 페이지 리팩토링(불필요한 코드 제거 및 수정)
• Form UI 구현 진행중
• 내일까지 Form Group UI 구현 예정

1월 21일(목) - (F)(B) Login Error

1월 21일(목) 미팅일지

회의 내용 SUMMARY

• (TDD)프론트앤드 분야 업무 협력 논의 및 서버-클라이언트 연결 단위 테스트 시작.
• 로그인 page에서의 인증(cookie)관련 백엔드, 프론트엔드 cors 설정 논의.
• 진행사항 공유 및 회고를 통한 과정 되돌아보기.

프로젝트 구성 논의

• UI 쪽으로 업무 협력 논의 : 리덕스 사가에 대한 빠른 학습이 필요. 백지에서 그리는게 아닌, 어느정도의 이해도를 바탕으로 진행이 필요.
• API 회원가입에 대한 테스트를 30번 정도 진행 완료.
• 클라이언트와 서버간 로그인 연결 테스트 중, 500번 에러 발생(webpack). → 현재 스펙상 전처리 API가 없으니 해당 메세지는 괜찮음. 현재, GET user 하나, POST signin 하나가 전처리로 오는 과정 수정중.
• 로그인 후 cookie 관련 refused 메세지 → https가 아니면 사용 불가능. 로컬에서의 테스트 추천.
• withCredentials, axios 설정, (back) index.ts의 expressSession 설정, path, domain 변경 논의
• 3주차 회고 진행 -
• TypeScript에서 SequelizeORM 사용 시 초기설정의 복잡함으로 인해 TypeORM을 고려하게 된 이유와 회고 및 공식문서가 미비할 경우 stackOverFlow 사이트를 찾게 된 계기.
• 레이아웃을 잡을 때 Element를 수정한 경우, 다른 요소에 영향이 가서 먼저 flex의 너비와 높이를 조정하고 시작의 필요성을 깨달은 경험과 회고.
• 페이지네이션을 고려하여 API를 프로그래밍할 때, limit과 offset이 다른 환경에서 작동하지 않을 경우의 대체제 고려와 ORM상에서의 subQuery 사용 결정 계기.
• 프로젝트 기획의 규모에 따른 어려움과 이에 따른 새로운 스택의 대거 추가에 따른 영향도 고려, 그리고 개발 공수를 고려한 분배에 따른 고민.
• DELETE /form 리다이렉트 부분 제거, GET /form 부분 패스포드 세션 사전검증 제거

소감

• (승균) 현재 진행도면 이번 주말까지는 9부 능선을 넘을 수 있을 것 같다.

1월 22일(금) - (F) SSR & history page | (B) Form Group API

1월 22일(금) 미팅일지

회의 내용 SUMMARY

• NextJS에서 서버사이드 렌더링 할 때 쿠키 세팅 문제가 있어 로그인 인증이 되다 말다 함.
• 일단 임시방편으로 get /form과 get /group에서 유저 인증 없이도 정보를 받아올 수 있도록 설정
• MySQL 최신버전에서 기존 get /group 코드와 호환성 문제가 있으나 EC2-RDS 사용시에는 현재 문제는 없음. MySQL 엔진 버전 8.0.21 이하 추천.
• response로 받아온 updated_at을 클라이언트단에서 직접 덮어쓰기로 수정하는 것은 불가능.
• custom group은 description 아예 쓰지 않기로 확정.

Back-End 진행 상황

• form과 group 테이블에 organization 칼럼 추가하기(예정)
• ts판 nodemon인 tsc-watch 적용.
• ts-node는 결국 뭘 해도 조금 하자가 있어서 아예 제거.
• get /suggestion 제작 완료. post /suggestion 제작중.
• History, Group API 제작 완료.
• 아직 소셜 로그인이 남아있음!

Front-End 진행 상황

• 영모님 오전의 nextJS 쿠키+라우팅 문제 해결 완료. 서버사이드 렌더링과 클라이언트사이드 렌더링을 완전히 나누어 처리해우어야 함.
• nextjs는 처음 한 번 로딩을 하면 쿠키 값이 바뀌질 않음. 인증 쿠키 값을 넣은 상태로 새로 "책"을 만들어주어야 한다.
• 후순위: 회원가입 유효성검사 띄우는 작업
• 후순위: 가입/닉네임 변경 한글 안되는 현상
• 후순위: suggestion들 보이는 화면

4주차 | 1월 25일 ~ 1월 29일

1월 25일(월) - (F) Form & Form Group | (B) Oauth

1월 25일(월) 미팅일지

회의 내용 SUMMARY

• 데이터 베이스 버전 문제로 AWS RDS에 직접 연결하여 작업 진행.
• 교중님 금일 구글 Oauth, 승균님 금일 Naver Oauth 진행.
• 교중님, 승균님 작업 일찍 끝나면, 다운로드 및 인쇄기능 작업 진행.
• 프론트엔드 폼 & 폼 그룹 페이지 기능 구현 완료
• 화요일 폼 양식 페이지 작업 진행 예정.

Back-End 진행 상황

• google Oauth 작업 진행 (리다이렉트 문제 해결)
• Naver Oauth 작업 진행.
• 화요일까지 카카오 Oauth 작업 진행 예정.

Front-End 진행 상황

• 폼 & 폼 그룹 기능 구현 완료.(state에서 한 박자 늦게 등록되는 현상 해결.)
  • 폼 그룹 쿼리 작동이 잘 되지 않는 것으로 확인 됨.
• 승용님 히스토리 페이지 & 제안하기 페이지 작업 진행.
• delete 시 302 리다이렉트 문제로 delete 실패 (원인에 대해 찾아봐야 할 듯)
  • delete가 정상적으로 실행되고 리다이렉트 되면서 다시 한 번 실행됨.

1월 26일(화) - (F) History | (B) Oauth

1월 26일(화) 미팅일지

회의 내용 SUMMARY

• OAuth(Google, Kakao, Naver) 기능 구현 완료
• suggestion 페이지 UI 및 기능 구현 완료
• form 및 formgroup 페이지 기능 구현 완료
• 인쇄 및 다운로드 기능 백엔드에서 지원
• 개별 form 1개로 만들고 이름만 바꾸는 방식으로 결정

Back-End 진행 상황

• OAuth까지 기능 구현 완료, 일정보다 빠른 작업을 끝내서 백엔드 지원(인쇄 기능 및 다운로드 기능 등)
• react-pdf 라이브러리를 사용하여 테스트 진행중
• getAPI 시 form 중복 처리 완료

Front-End 진행 상황

• form 및 formgroup 페이지 기능 구현 완료 후 폼 양식 기능 구현 예정
• form 및 formgroup 카드 클릭 시 설명란에 내용이 렌더되는 기능 구현 완료
• history css 및 레이아웃 수정, history 검색, 오름차순 / 내림차순 기능 구현 완료, 더보기 기능 추가 예정
• history 기능 구현 완료 후 폼 작성 후 미리보기 기능 구현 예정
• 화면 크기에 따른 레이아웃 조정 필요 (※ div 태그로 한번 더 감싸고 margin:auto css 적용 예정)

1월 27일(수) - (F) History | (B) Oauth

1월 27일(수) 미팅일지

회의 내용 SUMMARY

• 클라리언트에 direct push 잘못한 것을 10:26분 경에 Revert 해서 되돌림.
• admin 페이지 생략으로 결정.
  • 금요일까지의 완료를 목표로.
• 양식당 서류가 부모 컴포넌트가 된다. <div> 태그로 묶을 예정.
• 클라이언트에서 컴포넌트들을 렌더해서 PDF로 만들때...한글 지원 Font가 아니면 깨진다. css와 font 적용이 내일의 조사대상.

Back-End 진행 상황

• 네이버 양식당 로고 등록하기.
• 사용한 스택 로고들 모아서 테크트리 만들기
• API 중 history+form 작성과 관련하여 isComplete 부분 추가하여 수정중

Front-End 진행 상황

• 개별 form 한개로 지정되고 이름만 바꾸는 방식? → 영모님 작성 완료
  • 로그인 버튼을 가운데 정렬 대신 좌측 정렬로.
  • viewport 기준으로 맞춘다
• 내림차순, 오름차순 onClick 관련 기능 개발중의 난항.
• 개인 기술발표를 목표로 해야될 것도 있음.
• 테스트 동작파일 녹화.
• Problem Solving의 중요성 재고. (offset, Limit 관련 함수 작성 때.)
• 오름차순과 내림차순의 문제
• div 태그로 잡아서 pdf화 할수 있는지, 그것을 인쇄할 수 있는지가 관건.
• react-pdf(*****)
• react-print
• 반응형 웹 % 잡는 이슈
• 미리보기/다운로드 성공본은 현재 해당 링크에.
• {[https://github.com/hsk9210/YangSikDang_Client/tree/미리보기/다운로드]}
• ex>
• 인쇄하기, 다운로드, 히스토리 페이지, 디자인이 화면과 다른 부분 수정중
• 앞으로의 결정사항. 폼데이터 입력창→작성완료 누르면
• 1. 그 데이터를 그대로 React-PDF rendering해서 미리보기/다운로드
• 2. 일단 작성완료-저장된 것을 다시 불러와서 PDFViewer 사용한 미리보기/다운로드
• .이론상 2가 상용 웹사이트의 표준에 가깝겠지만 현재 기술숙련도로는 1번이어야 금요일까지 가능.

1월 28일(목) - (F) PDF | (B) Presentation

1월 28일(목) 미팅일지

회의 내용 SUMMARY

• 프론트엔드는 현재 그룹을 클릭하고 들어가 실제 유저 폼 작성하는 화면까지 진행되었음.
• get /group과 get /history API에서 각 폼의 내용들까지 받을 수 있도록 변경 요청.
• react easy print와 react print는 nextjs와 충돌
• react to print는 css 페이지 나누기가 제대로 적용되지 않음
• react pdf는 현재 한글 폰트 적용 등의 문제가 있으나 현재 가장 가능성이 느껴져 이쪽으로 같이 진행하는 걸로 결정.

Back-End 진행 상황

• get /group과 get /history API에서 각 폼의 내용들까지 받을 수 있도록 변경 완료.
• 금교중 할 것: API 문서 각 API별로 잘라서 스크린샷
• 백엔드 할 것: DB 더미데이터 그럴싸한 것으로 바꿔놓기, 기술발표 미리 찍어놓고 월요일 비상사태 대비.

Front-End 진행 상황

• 승용님 할 것: 폼 마지막 PDF 페이지 작성

1월 29일(금) - (F) PDF | (B) Refactoring

1월 29일(금) 미팅일지

회의 내용 SUMMARY

• react pdf 한글 무료 폰트 url을 통해 폰트 에러 문제 해결
• react pdf을 사용해서 승용님이 데이터를 양식 이미지에 얻을 예정
• Form get 시 제공 되는 데이터 group, history get과 통일 시키기.
• 승균님, 일정 및 사용 스택 문서화 예정
• 백엔드는 먼저 개인 발표 준비를 하여, 다음 주 혹시 모를 에러에 대비할 예정.
• 주말에 배포 진행 후, 문제 사항들에 대해 논의할 예정.
• 발표 주제, 승균님(스택 선정 시 주의할 점), 교중님(Typeorm), 승용님(Redux), 영모(next js)

Back-End 진행 상황

• Form API 수정, 그룹 폼에서 사용자가 생성한 그룹 안뜨게 하기 완료
• 교중님, 다음 주에 APP Final view gif 화 예정
• 승균님, 주말 동안 스택 관련해서 문서화 예정

Front-End 진행 상황

• 승용님, PDF 데이터 양식 폼에 얻히기 구현 완료
• 영모, PDF 페이지 전체 UI 작업 들어간 후, 각 페이지에서 PDF로 들어오는 버튼 구현하기
• 영모, 더미데이터 예시 준비
• 주말 동안, 모든 페이지 UI 및 기능 구현 완료 / 리버스 프록시로 https로 배포 완료

5주차 | 2월 1일 ~ 2월 2일

2월 1일(월) - Deploy & Presentation

2월 1일(월) 미팅일지

회의 내용 SUMMARY

• OAuth 기능 구현 완료 및 배포 완료
• next js에 의해 로그인 정보가 Redux-Persist에 저장되지 않아 루트 페이지로 렌딩되는 현상 수정
• 폼 양식을 history, form, formgroup에 연결 완료
• 개인 기술 발표 완료
• 클라이언트 및 서버 배포 완료
• history 페이지 작성 완료 후 수정하기 버튼 클릭 시 뒤로가기로 기능 구현되어 있어서 다시 수정하기로 수정 필요
• 데이터베이스에 Dummy 데이터 입력 예정