graphql 배우기

• github 레포

클라이언트 구조

Requirement

• 하나의 게시글에 붙어있는 대댓글들을 구현하고자 함.

• 로그인의 경우 게스트네임으로 로그인되게 구성.

• 댓글과 댓글에 댓글을 붙이는 대댓글로 구성.

  • 따라서 댓글에는 자신이 붙어있는 위치를 가르킬수있는 변수가 필요함.

• 댓글의경우 생성, 수정, 삭제가 가능하게 구성.

• 대댓글의 크기는 댓글의 80% ~ 90% 정도로 가정

WireFrame

stack

• react
• styled-component
• graphql-hooks // 사용해보자
• Axios를 사용한 요청으로 대체

DB

예상 스키마

• user // 특별히 많은 정보는 필요 없으리라 생각함.

{
  id: ObjectId; 
  userName: string;
}

• article // 게시글

{
  id: ObjectId;
  subject :string
  writerId: ObjectId; //작성한 유저 아이디
  contents: string; //게시글 내용, 내용은 주용치 않으니 더미값으로
  createdAt: Date; //생성 시각
  updatedAt: Date; //수정 시작
}

• comment

{
  id: ObjectId; // 아직 db 타입을 결정 하지 않음.
  writerId: ObjectId; //작성한 유저 아이디
  relateId: ObjectId; //상위 요소 아이디 (게시글이거나 댓글이거나)
  comment: string; //댓글 내용
  createdAt: Date; //생성 시각
  updatedAt: Date; //수정 시작
}

서버

stack

• graphql - 이번 학습의 목표
• express - 뭐 가장 많이 써보긴한것 같으니
• mongoose
• mongodb

Reference

학습 참고 링크

Log

• 2020/08/16

  • client graphql stack 확정, wireframe 추가, DB reference 확보

• 2020/08/19

  • DB 스택 선정

• 2020/08/26

  • graphql-hook사용을 Axios를 활용한 요청으로 대체
    - 렌더 함수에서만 사용가능하며 아무것도 덮어 씌워지지 않은 상태로만 사용가능함. => 익숙한 axios로 대체 (graphql 요청을 학습하려는 것이지 graphql-hook 사용 방법을 익히는게 주가 아니기때문)
  • Db 스택 선정에 따른 스키마 확정 적용. article 스키마에 subject 추가