Week4 피어세션(우승진)

피어세션🙋‍♂️🙋‍♀️🙋‍♂️

참여인원

• TEAM 10 (우승진)
• TEAM 13 (석민지)
• TEAM 13 (신승현)

Twitter

• 상태관리
  • Context API, Redux사용안하고 cache로 관리
  • 아폴로 클라이언트의 inMemoyCache를 이용하면 이전에 서버에 요청했더던 데이터를 쿼리안에 저장되어 있어서 상태 관리를 따로 안해도 시간 소모 없이 바로 요청해서 사용 가능
  • 데이터들이 캐시에 저장되어 있어서 이전 페이지들의 데이터도 굳이 fetch 안하고 가져올 수 있어서 좋았음
  • 쿼리안에 데이터가 저장되어 있기 때문에 , 쿼리에 사용되는 중요한 변수가 바뀌면 cache를 비워서 재요청을 할 필요가 있었음
  • Cache는 테이블 형태로 데이터가 저장되고 쿼리안에 __ref로 접근 할 수 있음
  • Cache 가 readOnly라 상태를 통채로 immutable하게 덮어 쓰는데 성능 이슈가 있음
• 무한스크롤
  • cache update
  • 캐시 정책을 설정해서 데이터 처리가 가능
  • 새롭게 추가 된 데이터면 앞에 붙여주고 무한 스크롤로 오래된 데이터를 요청하면 뒤에 붙여주었다.
• shallow routing
  • history를 남기지않는 routing
  • 모달 및 여러 탭들에 적용

WAVE

• Webgl - matrix 연산 부분 설명 🖼

  • orthographic projection으로 object를 그린다 -> 2D 컨텐츠에 적합함

  • object를 그리는 과정 🌌

    • 맴버변수로 선언되어있는 파라미터들을 통하여, scale, ration, rotate 등을 수행하며 modelview matrix를 수정
    • 이후 초기 matrix 설정으로돌아가기 위해서는 해당 연산을 역으로 곱해준다.

  • object가 그려지는 시점 🏳‍🌈

    • matrix 연산을 다 한 후 유니폼으로 데이터를 넘겨서 그린다
    • 이 후 matrix 연산을 진행하더라도 이전 데이터에는 적용이 되지 않는다
    • 따라서 video텍스쳐를 가진 객체와 sign텍스처를 가진 객체의 modelview matrix가 서로 다르다.

• Thumbnail css

  • history store에서 상태를 가져와서 thumbnail에 css를 적용하여 회전/반전, 확대/축소 하는 과정 설명
  • 구현하면서 생긴 issue와 해결방법 설명(확대/축소시 image크기문제를 div에 넣어서 해결, 회전/반전(scaleY,rotation)순서문제)

여담

• 팀원 한명이 나가셔서 당황하셨겠어요..
• 그니까여