[회의록] 2019 12 21

주말간 할 일

1. 시나리오 작성
2. 기술적 특장점 정리
3. 프로젝트 선택 이유
4. 모든 모듈과 프레임워크에 왜 썼는지
5. 각자 맡은 부분에 대해 설명
6. 쿼리문 attributes 적용하기

미완성된 코드

4. 유저페이지 myInfo 쿠키에서 가져오기로 바꾸기

README

추가할 내용

• gif로 동작도 만들기
• OAuth 흐름도
• maintainer 정리
• passport-youngstargram
• OAuth Documents

향후 계획

• 이미지 압축
• 로드 밸런싱
• 세컨더리 데이터베이스(DB 백업)

귀가 후 할 일

정호

• 기능 목록 gif로 만들기
• README 수정

형진

• Oauth 흐름도 작성
• Oauth Docs

재현

• 흐름도 영상 작성

소영

• 유저 페이지 myInfo 수정
• 너무 큰 이미지 올라간 경우 에러 처리

프로젝트 선택

일반적인 웹 서비스에서 요구하는 게시물 작성, 검색기능, 로그인 기능 등을 포함하고 있어 팀원 별로 각 기능별로 프론트엔드부터 백엔드까지 나누어 개발하기 좋다고 생각했다.

프로젝트 중점

사용자 경험, 데이터 처리

DB

• 쿼리를 어떻게 효율적으로 적용할지

Client

• 요청 캐싱

기술적 특장점

데이터베이스 최적화

• Index

  • 로그
  • 메인게시물
  • 유저페이지 게시물 리스트
  • 팔로우, 팔로워 리스트
  • 검색결과페이지 게시물 리스트

• cursor 기반 Pagination

  • 메인게시물
  • 팔로우, 팔로워 리스트

• Full Text Search

  • 검색 기능(FTS, ES 공부)

클라이언트 사이드 최적화

• Debouncing Throttling: 무의미한 요청 최소화

  • 검색(디바운싱), 좋아요(디바운싱), pre-fetching(쓰로톨링)
  • timer를 지정한다는 공통점이 있고 이 timer를 사용하는 방법의 차이
  • Trottling: callback 함수 실행 후 timer를 걸어 놓고 timer가 끝나기 전에는 해당 callback함수가 되지 않도록 한다.
  • Debouncing callback함수가 실행될 때마다 timer를 시작하고, timer가 끝나기 전에 다시 실행이 되면 이전 callback함수를 제거하고 다시 timer를 설정한다.

• Apollo Caching: 중복되는 요청을 최소화

• Code Split: 당장 필요하지 않은 코드를 로드하지 않음으로써 속도 개선

  • Lazy
  • 지금 당장 필요하지 않은 페이지를 로드하지 않음으로써 각 페이지 로드 속도를 개선.

• Pre-fetching: 사용자가 특정 게시글에서 오래 머무를 경우 해당 게시글에 대한 데이터를 미리 요청하여 캐시에 저장

  • 메인에서 댓글창에 머무르는 시간을 기준으로 pre-fetching을 하여 해당 게시글에 대한 요청을 캐싱함

• DOM-recycling: View Port 에 보이는 부분만 렌더링 되도록

OAuth 2.0

• RFC 6749문서를 바탕으로 Authorization Server를 직접 구현: Grant Type 중 Authorization Code, Implicit 구현
• OAuth 2.0 기반의 API 서비스 제공(로그인, 포스팅 API)