회의록 (5월) - Memo8-KoreaUniv/Kramo GitHub Wiki

총 목차

첫 번째 회의 <21.05.04 (화)>

두 번째 회의 <21.05.11 (화)>

회의 전 안건

KUM이라는 이름에 대해

  1. 너무 고려대 느낌이 나고 보편적이지 않다, 추후 확장성을 위해 다른 이름 고려해볼까?

기능 명세 합의

  1. 웹과 모바일에서 각각 어떤 기능을 제공할지? 웹 -> 편집, 뷰어만 하고, 모바일 -> 텍스트 작성만, 뷰
  2. 모바일
    1. 단순 텍스트 작성을 기본으로
    2. 그리고 웹에서 작성한 마크다운 문서를 수정 가능하도록
  3. 웹
    1. 텍스트 작성 or 마크다운 형식 지켜서 작성

문서화 관련 논의

#상혁

  1. wiki 문서화 github wiki 사용하기, 각자 수정,추가하자
  2. 인터페이스 설계 문서화
    • 설계를 어떻게 했는지 → 각자 저장을 하고 있자
    • api 문서화 → swagger로 결정 yaml파일로 작성된 api문서를 유지
      • collaborate는 유료, 공유된 yaml 파일을 갖고 각자 swagger로 보기
      • swagger viewer라는 vs code 확장프로그램 설치하면 좋아요
  3. 보일러 플레이트 올림
    1. dev를 가지고 branch 따서, pr 날리면서 개발
  4. DB는 어떻게 할지
    1. 저장할 정보 리스트
      1. 유저 정보
      2. 텍스트 메모
      3. 마크다운 메모
      4. 굳이 추가하자면 카테고리 등등
    2. mongoDB가 제일 좋다고 생각
    3. DB를 짜 보고는 있는데, 어떻게 구성하면 좋을지 의견 내기

UI 프로토타입

정주님, 창균님

데스크톱의 경우, 공간이 넓고,,, 아직 완벽하게 통용되는 게 아니라서 좀 더 의논해서 완성하자

모바일이 더 좁으니,,, 의논을 완벽하게 하자

  1. (기존)모바일 창 띄우자마자 메모가 바로 뜨도록 하자
    • 별로다, 메모를 확인하는 용도로 들어오는 경우도 많고, 메모 추가가 그렇게 귀찮지 않다
    • XD에서 UI를 제공하는 라이브러리가 한정돼 있다
    • 시간이 촉박하니 디테일에 신경쓰기보단 색감, 레이어와 동작만 짜 주면 스타일 UI 정해서 얼른 바로 얘기하자 → 너무 완벽하게 기획할 필요는 없다는 뜻!
      • 그리고 데스크탑 화면을 기본으로 만들자
    • 날씨 혹은 위치가 어떻게 표시 방법
      • 상혁: 수정할 때마다 자연스럽게 상단 혹은 어디에 갱신되도록 하는 게 좋지 않을까?
      • 정주: 위치 → API 활용, 도시뿐만이 아니라, 자세한 장소까지 표출되도록 하자
    • 로그인과 관련하여 어떤 상호작용을 할 지?
      • 보기 화면과 편집 화면을 분리하는 건에 대해
        • 보기→ 편집 순서로 플로우를 만들자

다음에 할 일

  1. 상혁 → DB 목요일까지 해 오기
  2. 정주, 창균 → UI 보안 해 오기
  3. 성준 → remark, 혹은 다른 거? 를 기반으로 간단한 페이지 react로 코딩해오기

세 번째 회의 <21.05.18 (화)>

Toast UI 관련

Toast Viewer 추가 예정 (링크)
DB 연결 예정 (우선 하나의 DB에 넣고, 카테고리로 나눌 것)

프로토타입 관련

발표를 위한 프로토타입 완성
설정 화면 추가 (계정 설정, 메모 설정)
날씨, 위치 기능에 대한 수정시 기록 논의
카테고리 필요

DB 관련

mongoDB를 위한 typegoose 도입
.env 파일 로컬에 추가 필요
DB 불러오는 API 작성 예정
날씨, 위치 기능에 대응하는 DB 변경

GitHub

브랜치는 feature/기능명으로 작성
Pull Request는 Review, Approve 기능 적극 활용

기타

데드라인에 맞춰서 주2회 (화/토) 스프린트

네 번째 회의 <21.05.25 (화)>

발표 준비

기술을 어떤 거 쓸지를 소개하고 목요일 전까지 dev로 여태까지 한 것들 정리해서 이런 식으로 구현을 하고 있다 정도만 보여드리면 될 것 같다
ppt도 필요없고, slack, github, localhost 보여주면서 설명
칼같은 질문 들어오면? 누구나 질문 들어오면 답하면 될 것 같다
성준: 발표 담당
상혁: 발표 관련해서 포함했으면 하는 내용들 슬랙에 공유했으니 참고

코드

frontend 코드 이슈

ForwardRef 이슈

컴포넌트로 별도의 페이지 만들면 기존에 만들어놓은 헤더랑 사이드바 못 쓴다
ForwardRef 해결해야 함
App.tsx가 모든 페이지들의 상위 (index.tsx 아님)
정주: 현재 index.tsx가 최상위인 걸로 수정되어 있는데 App.tsx가 최상위가 되도록 수정해서 올리겠음
next.js 프레임워크 자체가 App.tsx가 최상위이도록 함
document.tsx는 건드리지 않는 게 좋음

메모는 mock_data인데 배열은 빈배열

deleteMemo가 클릭될 때만 실행되어야 하는데 어딘가에서 실행되는 듯
onClick 이벤트가 일어나기 전에는 실행이 안 되게 해 놨을텐데..
delete를 high order function으로 줘야 함 -> deleteMemo를 이중 함수로
이제 뜨는데, 삭제가 몽땅 됨… 더 고민

싱글 페이지로 header sider footer timeline(논의 필요) 그대로 두고 메모 목록, 편집기 바뀌는 식으로
toastUI 계속해서 같은 문제 발생된다면?

문제점

안정화가 잘 안 되어 있는듯.
아예 자기들이 새로 낸다고 하는데, 우리는 구버전을 써야 하니까..
아예 server-side rendering을 지원하지 않음
윈도우가 없다고 뜸
안 되면 다른 에디터로 갈아타는 것을 고려해야…

summernote, Quill

react-md-editor: https://uiwjs.github.io/react-md-editor/

이거다
업데이트도 최근까지 잘 되었고, toastUI 기능은 다 있음.
커스텀도 가능
onChange: 텍스트 바뀔 때 실행되는 함수인듯

koa 제거

koa를 쓸려고 했던 이유가 화면에 보이지 않는 DB 접근이라던가 API 요청한다거나 가공해서 가지고 오는 역할 하려고 했는데
nextjs 자체에서 API 서버를 만들어서 가져올 수 있음

https://nextjs.org/docs/api-routes/introduction
https://github.com/vercel/next.js/blob/canary/examples/api-routes-rest/pages/api/users.js

프론트

view와 edit

카드별로 edit, delete 버튼만

mobile

card grid가 현재 한 줄에 무조건 3개씩 되게 되어있는데, 잘 고치면 될듯
아예 carousel을 사용? 한 슬라이드에 세개씩 카드 담아서

업무 분담

성준-정주

일단 정주님이 상혁님 말대로 App.tsx가 최상위가 되도록 구조 수정
성준님이 메모 삭제 기능
정주 - redux와 같이 상태관리
성준 - markdown editor 도입

상혁

라우터 nextjs 기반으로 바꿔서 몽고db로 쓸 수 있도록 만들 생각
네이버 로그인: 생각보다 oAuth 기능이 어렵다. 공부중인데, koa에서 nextjs로 완전히 바꾼 뒤 도입할 것


추후 논의…