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들 보이는 화면