peer session week5

피어세션

Week5

Front

• react-loading과 react-select를 사용하셨는데 이 패키지에 대해서 소개해주실 수 있는지 여쭈어봐도 좋습니까?

  • loading 을 진행하는 경우 사용자 친화적을 위해 react-loading 컴포넌트를 사용하여 loading 중을 명시합니다.

• 뉴모피즘 디자인 너무 이쁜것 같아요

  • 실사용되는 서비스에서 많이 적용되지 않는 디자인 같아 프로젝트에서라도 사용하고 싶어서 적용
  • 하지만 서비스에서 왜 사용하지 않는지 알겠습니다.

• 디자인 아이디어는 어디서 얻나요?

  • 1px 1px씩 움직이며 더 나은 디자인이 무엇인지 생각했었습니다!

• 저희도 기획을 할 당시 화상채팅이 가능한 서비스를 생각했었는데, 다른 화상 공유 방법이 있다면 그것들 중에 Agora?를 선택한 이유도 듣고 싶어요!

  • Agora 추상화가 잘 되어 있습니다.
  • P2P 가 아닌 Agora 가 지원하는 media server 를 사용하고 싶었습니다.

• Animation 이 너무 이쁘네요 어떻게 구현하시고 최적화를 위해 어떤 방식을 적용하셨느지 궁금해요!

  • div, span 을 사용
  • free frontend 의 오픈소스를 사용
  • html, css 로만 사용
  • 다음주 최적화 계획에 있습니다.

• Font 가 궁금해요!

  • 구글 폰트 : Dongle

• 차트js가 어떤 역할을 하는지 궁금합니다(어디에 적용되어있나요?)

  • Dashboard 에서 github language, 문제 풀이 통계에 사용 예정입니다
  • Github Repository 의 사용 language 통계 역시 사용할 예정입니다.

• 컴포넌트를 나누신 기준이 궁금합니다, + [postID].tsx 이 파일명도 궁금해요.

  • 극강의 추상화를 하고 싶었습니다.
  • 비슷한 성격의 컴포넌트는 common index.ts 통해서 공통 속성을 Control 할 수 있도록 설계
  • [] 란 Next 의 Dynamic Routing 을 위한 문법입니다.

• 넥스트를 통해 구현하시면서 느꼈던 장단점이 궁금하네요. 저희는 리액트만 써서 우선 구현해서 경험해보지 못했습니다.

  • 장점
    • Server Side Rendering 이 주 목적이었습니다.
    • 10 버전부터 기존의 Next 보다 Running curve 가 굉장히 낮습니다.
    • 12 버전부터 SWC (Speedy Web Compiler) 도입을 통해 성능이 빠릅니다.
    • React 를 사용할 수 있다면 굉장히 유사합니다
    • 오히려 Routing 부분에서 Next Engine 이 자동으로 Mapping 해주는 것이 너무 편했습니다.
    • 각 Page 별로 공통으로 사용되는 Logic 역시 _app.tsx 파일을 통해 처리할 수 있다.
  • 단점
    • Server Side, Client Side 의 구분점이 헷갈립니다. (디버깅이 힘들다.)
    • Build 가 버겁습니다..

• 검색은 디바운스인가요 트로틀링인가요

  • 디바운스입니다.
  • 쓰로틀링을 직접 구현하는 것은 굉장히 어렵다.

Back

• 아키텍처상 Nginx 를 거치지 않고 Agora nest 가 연결이 되어있었습니다. 어떤 이유로 직접 연결이 되어있는지 궁금합니다

  • 아고라 API를 땡겨와서 쓰고 있습니다.

• Socket Server 에서는 docker Container 가 2개 존재하고 API Server 에서는 1개 존재하는데 왜 그런 방식을 선택하셨는지 궁금합니다!

  • Socket Clustering 을 사용하기 위해
  • 수평확장을 위해 사용

• Storage 가 docker(nest) 랑만 연결이 되어있는데 모든 Object CRUD 작업을 서버를 통해서 진행하나요?

  • presigned url
  • 서버를 거쳐서 진행하는데 너무 느려서 개선 예정입니다.

• nest 를 사용하신 이유가 있으신가요??

  • 너무 자유도가 높은 Node 보다 Layer 가 정해진 Nest 를 사용하고 싶었습니다.
  • 장점도 단점도 구조, 제약

• ORM 을 typeORM 으로 사용하신 이유가 있으신가요??

  • 트랜젝션을 간단하게 사용가능하다

• Oauth 정보는 어떻게 관리되고 있나요?

  • 인증 업체와 인증 업체의 유저 고유 식별자를 쌍으로 저장합니다.

• 조인 연산이 많이 들어가 보이던데 쿼리 성능 개선은 어떻게 하실 예정인가요?

• Mysql을 선택한 이유를 듣고 싶습니다.

  • 서비스의 update처리 고려
  • 가장 익숙한 데이터베이스

• 레디스로 클러스터링 한 방식을 소개해주세요.

  • 공유되어야 하는 정보를 Redis 에 저장

• 팔로우, 게시물 등등 DB 데이터 구조 궁금합니다

  • 확장이 필요한 데이터는 Collection 으로 분리

• 도커를 사용하셨는데 어떤 장점을 느낄 수 있었나요?

  • CI/CD 가 편하다.
  • 간편한 독립적인 환경 구축이 너무 쉽습니다.

Common

• 프론트와 백을 나눠서 작업하시나요? 아니라면 협업 시스템이 궁금합니다!!

  • web15
    • 각자 잘 할 수 있는 도메인을 맡아서 작업합니다.
    • 도움이 필요하면 도메인 상관없이 서로 도와주며 하는방식.
  • web26
    • 손 가는대로 했다.
    • 좋았따.

• 프론트 컴포넌트 추상화? 관련해서 학습/참고하신 좋은 자료가 있을까요? 꼭 배우고 싶네요.🥰

  • 경험하고 고민으로 작성했던 것 같습니다!

• 우리팀의 자랑!

  • web15

    • 서비스 내에서 놀 수 있다
    • 게임 스트리밍 가능
    • 매주 월요일마다 맛있는 점심과 저녁을 먹습니다

  • web26

    • 서비스 내에서 놀 수 있다
    • 분위기가 자유롭다