<aside> <img src="/icons/bookmark_purple.svg" alt="/icons/bookmark_purple.svg" width="40px" />

목차

</aside>

✔️ 결론 및 To Do

멘토링 이후 결론과 챙길 것을 정리하여 업데이트합니다.

✔️ 멘토링 아젠다

멘토링 24시간 전에 준비하여 멘토에게 공유합니다.

논의 사항 및 질문

멘토의 조언이 필요한 부분을 질문으로 정리합니다.

FE

• room 컴포넌트의 복잡도

  • room 컴포넌트의 복잡도가 높아 리팩토링을 진행했습니다. 특히 참여자 상태관리 및 그와 관련된 소켓 통신을 처리하는 로직을 useParticipants 커스텀 훅으로 분리시켰습니다. 하지만 이 커스텀 훅 또한 복잡성이 높다고 생각이 듭니다. 어떤 방향으로 개선하면 좋을까요.?
  • 또한 ResultInstruction나 roomIntroView 컴포넌트처럼 너무 작은 단위에 대해서도 컴포넌트로 분리하는게 맞을지 궁금합니다.

• css transition / transform / animation 속성들만 활용해서 애니메이션, 인터랙션을 구현하려 하니, 타이밍을 제어하는 데에도 어려움이 있고, 애니메이션 동작을 위해 관리해야 할 상태들도 많아지는 것 같습니다.

  실제로 QuestionView 에서 5개의 질문들을 각각 60초동안 표시하는데, 질문이 먼저 표시되고 약 1초 뒤에 답변 입력창이 질문을 위로 밀어내면서 등장하는 애니메이션, 질문과 질문 사이 전환 과정에서 페이드아웃-페이드인 애니메이션 등을 추가했습니다. 그런데 해당 애니메이션들의 발생 타이밍이 현재 표시할 질문의 인덱스인 currentQuestionIndex 상태에 의존적이라서 로직이 복잡해지고, 약간의 오동작 현상도 생기는데 원인을 찾을때도 어려움을 겪었습니다. QuestionView 자체도 코드가 길어지구요..

  애니메이션이 많아지면 어느정도 코드가 복잡해지는 건 감수해야 할 부분인가요..? 이 질문을 작성하는 시점에 워드 클라우드 UI 구현을 시작하지 않았는데 한번 데여보니(?) 쌩 css로 구현하는 것에 대한 걱정도 생기고, 애니메이션 처리에 Framer Motion 같은 라이브러리가 개발생산성에 도움이 될 것도 같아서 알아보고 있습니다. ㅜㅜ 어떤 방향으로 개선할 수 있을지 조언이 필요합니다

• 오늘 워드 클라우드 UI에 대해 고민하고 찾아본 자료입니다!

  워드 클라우드 UI 구현을 위한 방향성 고민

• word cloud 영역을 그릴 때 canvas 태그를 사용하면 좋을지 결정하기 위해 찾아본 결과, canvas 태그가 렌더링 과정이 리플로우부터 일어나지 않아 일반적으로 성능이 유리하지만 애니메이션이 많을 경우 불리할 수도 있다는 글을 보게 되었습니다. 현재 저희 word cloud는 키워드들도 많아질 예정이고, 키워드들이 변하는 일도 많으므로 canvas가 유리할 것 같지만 동시에 애니메이션도 많기 때문에 canvas가 불리할 수도 있을 것 같다는 생각이 듭니다. 만약 canvas로 인한 성능 이점이 크지 않다면, 접근성과 러닝커브를 고려해 canvas보단 기존 방식(html 요소 + css)을 택하는 편이 낫지 않을까라는 생각이 들어서 이 부분에 대한 의견이 궁금합니다.

BE

• ‘동적으로 변경될 수 있는 시간’에 실행될 액션을 위해서는 배치 서버가 필요할까요?
  • 서버는 값 입력에 대한 ‘최종 종료 시간’을 알고 있습니다. 다만 클라이언트에서 ‘시간이 더 필요해요, 이번 주제는 넘어가도 될 것 같아요’등의 결정권이 있다면 해당 처리 시간을 변경해야 합니다.
  • 서버에서 해당 시간이 동적으로 변화될 수 있음을 알고 있다면, 그리고 이를 적용하려면 스프링 배치 + Quartz같은 방식을 사용해야 할 것입니다.
  • 하지만 너무 할 일이 많아지기도 하고, 오버 엔지니어링이라는 생각이 듭니다.
  • 차라리 ‘과반수 이상의 클라이언트에게 최종 종료 ack’를 받은 경우 ‘아, 종료가 이루어졌구나’를 확인하는 방식이 더 낫지 않나 싶습니다.
    • 난이도가 비교적 낮습니다.
    • 서버 인스턴스가 늘어나도 쉽게 해결할 수 있습니다.
  • 통계 연산은 분산락 통해 한 곳에서만 하도록 구성하면 좋을 듯 합니다.
• 통계 연산에 최적화된 라이브러리나 알고리즘이 있을까요?
  • 참가자들이 입력한 값들에 대해 통계를 연산해야 합니다.
  • 현재의 시간복잡도는 O(nlogn + n * m)입니다.
    • n은 키워드 수, m은 참가자 수입니다.
    • 정렬에서 O(nlogn)이 발생합니다.
    • 통계에서 O(n * m)이 발생합니다.
  • 이를 쉽게 해결하는 방법은 여러 가지가 있을 듯 합니다.
    • 서버에서 최적화된 라이브러리, 알고리즘을 찾아 연산
    • 워커 스레드를 통해 통계를 분산처리
  • 통계쪽 라이브러리를 살펴보면 대부분 시각화를 많이 해주는 것 같고.. 저희 프로젝트에 가져다 쓰기에는 너무 오버엔지니어링적인 것도 많아 보입니다.
  • 라이브러리, 알고리즘 쪽의 키워드라도 알 수 있다면 좋지 않을까 합니다.
• 서버쪽에 통계 및 정렬의처리량이많아 부하가심해진다면 클라이언트쪽에 일부 작업을(ex: 정렬)넘기는게 좋은 방식인지 궁금합니다.
• git action으로 FE 쪽에 workflow를 작성한다고 하면 고려해야할 부분이 어떤게 있는지 궁금합니다.

진행상황 및 참고 자료

멘토가 일지를 보고 멘토링을 준비할 수 있도록, 팀의 진행상황과 참고 자료를 정리해서 넣어주세요.