💭 팀 회고

1주차

뼈 아픈 1주차 멘토링 일지

1️⃣ 프로젝트 진행 상황

• AI 타로 채팅 서비스 백로그 작성
  • EPIC → STORY → TASK
• FE
  • 디자인 완료
  • 컴포넌트 설계
• BE
  • ERD 설계 완료 - 수정 필요
    • 타로 카드 업로드 관련 등
  • API 설계 중

2️⃣ 주요 기능

• AI 타로 채팅 기능
• 실시간 화상 타로 채팅 기능

3️⃣ 협업 중 겪은 어려움 & 해결 방안

1. FE 인원이 많아서 FE 위주로 가는 것 같다.

   • 규칙을 정해서 돌아가며 BE와 소통하는 시간을 갖자.
     • 프로젝트에 대한 이해도도 많이 높아질 것이다.
     • 주기적으로 FE 한 명이 BE로 넘어가서 함께 개발한다. (논의 필요)
   • 코드리뷰 다같이 하자.
     • 만약 FE가 BE와 함께 개발한다면, 두 명이서 코드 리뷰하는 것도 좋을 듯..

2. 기술 리서칭 부족

   • WebRTC… 실시간… 공부해오기…
   • 네이버 클라우드 클로바 AI API 사용법…

   [프로젝트 설계 & 진행] webRTC 서비스 정리

3. 슬랙 채널(with 멘토님들)에서 소통하자!

   • 이야기를 던져놓자
   • 질문도 최대한 활용하자

4. 뾰족한 주제 뭐가 있을까?

   해 보고 싶은 경험들

   • 긴 기간 동안 운영을 해보면서 키워가는 경험을 하기
     • 많은 유저 끌어모으기
     • 앱 스토어에 올리기
   • 성능 측정을 해보고 개선하는 경험
     • 과부하 테스트 (ex. Artillery)
   • 테스트 코드 작성하기: 단위 테스트, 통합 테스트
     • TDD
   • 기술적 도전 (새로운 기능 넣기)
     • 결제 시스템 넣기
     • 광고: google Ads

2주차

1️⃣ 프로젝트 진행 상황

주간 계획

• 사용할 기술에 대해 리서치 (socket, webRTC)
• 홈 화면과 AI 채팅 화면 구현
• AI 타로 상담 기능 구현 with clova studio
• 타로 결과 공유 기능 구현
• ERD 설계 및 API 설계 완료
• 배포 도전

실제 수행 결과 🟩 : 완료 / 🟧 : 부분 완료 / 🟥 : 시작 전

• 🟩 사용할 기술에 대해 리서치 (socket, webRTC) : 노마드 코더의 줌 클론 코딩
  • 저번 주말동안 팀원 모두 공부 후, 기술 블로그에 정리
• 🟩 홈 화면과 AI 채팅 화면 구현
• 🟧 AI 타로 상담 기능 구현 with clova studio
  • 타로 카드 고정
  • 추후 플로우 차트 따라서 대화하는 기능
• 🟧 타로 결과 공유 기능 구현
  • 실제 api에 연결되어 url만 넣으면 되는 상태
  • 인터렉티브하게 애니메이션 구현 남음
• 🟩 ERD 및 API 설계 완료
  • swagger 적용하여 API 문서화 별도로 할 필요가 없도록
  • 추후 서비스 확장하면서 변경될 가능성 있음
• 🟥 배포 도전
  • 이번 주말동안 공부 후, 다음주에 배포할 수 있도록 🔥

2️⃣ 협업 중 겪은 어려움 & 해결 방안

3️⃣ 좋았던점

• UI 구현을 많이 해서 기분이 좋다.
• 아키텍쳐(폴더 구조) 조금더 명확해져서 좋다.
• AI도 잘 되는 것 같아서 좋다. (돈이 조금 무서움..)

4️⃣ 반성할점

• API에 집중하다보니 배포 공부를 많이 못해서 아쉽다. ⇒ 배포에 집중하자!
• 문서화를 제대로 진행하지 못했다.
• 이모지를 달아서 코드 리뷰 하자
  • ⚠️ : 꼭 반영해줘 (버그/성능이슈 포함!!)
  • ❓: 질문!
  • 👍 : 각종 칭찬,,,
  • ✨ : 코드 스타일 통일하자??
  • 💬 : 그냥 comment

3주차

1️⃣ 프로젝트 진행 상황

주간 계획

• 주요 서비스 중 하나인 AI 타로 채팅 배포 (FE & BE)
• 타로 결과 공유
• 카드 스프레드 애니메이션 구현 & 효과음 넣기
• AI & socket 통신 부분 개선 (핑퐁 대화 가능, 스트림으로 입력 받아 전달)
• WebRTC 화면공유
• told 서비스 띄우기

실제 수행 결과 🟩 : 완료 / 🟧 : 부분 완료 / 🟥 : 시작 전

• 🟩 AI 타로 채팅 배포 완료
  • SSL 인증서 발급받아 암호화된 통신 제공
  • 무중단 배포도 고려해봐야 할 것 같음 🔥
• 🟧 타로 결과 공유에서 다운로드 시 이미지가 보이질 않음 ( 배포 환경에서만 안됨 )
• 🟩 드래깅 및 스크롤 시 회전, 뒤집는 효과, 접히고 펼쳐지는 애니메이션은 성공
  • 뽑힌 카드가 채팅 화면의 카드로 줄어드는 애니메이션 구현은 하지 못함
  • 다른 컴포넌트기도 하고 채팅 이미지의 위치가 고정되어있는게 아니다보니, 구현이 어려울 것 같다고 판단.
  • 펼쳐지고 접힐 때와 뒤집힐 때 효과음 추가 ( 배포 환경에서 뒤집히는 소리 안 남 )
• 🟩 커스텀 커서
  • 색상 반전 효과
  • 다른 컴포넌트와 상호작용 시 커서 확대 효과
• 🟩 AI & socket 통신 부분 개선
  • 핑퐁 대화 가능
  • 스트림으로 입력 받아 전달
  • socket 이벤트 흐름 시각화 & 리팩토링
  • 아직 딴 소리 할 때 있음
  • 새로고침 할 때나 뒤로갔다 다시 왔을 때 에러나는 문제 해결 필요
• 🟧 WebRTC로 카메라, 오디오 전환할 때 상대방도 동기화됨
  • 채팅 구현해야함
    • 데이터 채널로
  • 나와 상대의 카메라 on / off 여부 추가구현 해야됨
    • 기본적으로 API 제공 안해주면 데이터 채널로 보내야할듯
• 🟩 told (피드백 설문 기능) 연결 성공

2️⃣ 협업 중 겪은 어려움 & 해결 방안

• 백엔드에서 service 관련 부분과 socket 관련 부분을 연결할 때 서로가 구현한 부분을 잘 몰라서 연결할 때 어려움이 있었다.

  → 하루동안 페어 프로그래밍해서 함께 해결했다 👍

3️⃣ 좋았던 점

• FE / BE 모두 배포를 마쳤다 👍👍👍
• 지난 주에 비해 이슈 상황이 많아져서 문서화가 개선되었다
• 내일이 토요일이라 좋음 😄
• 초콜릿으로 당충전해서 좋음 🍫

4️⃣ 반성할 점

• 여전히 멘토링을 제대로 활용하지 못하고 있다 ⇒ 슬랙 채널을 사용하여 적시에 도움을 받을 수 있도록 하자
• 오프라인으로 만나서 진행하다보니 PR에 코멘트가 달려도 의견 수렴 과정이 나타나지 않는다 ⇒ PR에 의견 수렴 과정을 간단하게라도 작성하자
• 여전히 문서화가 밀린다 ⇒ 그냥 주말에 하기로 결정

4주차

1️⃣ 프로젝트 진행 상황

주간 계획

• 주요 서비스 중 하나인 WebRTC 구현 (FE & BE)
• UI 보완 : 다크모드/라이트 모드, 반응형
• winston 로거 적용

실제 수행 결과 🟩 : 완료 / 🟧 : 부분 완료 / 🟥 : 시작 전

• 🟩 WebRTC 관련 컴포넌트 작성
  • 🟩 팝업, 캠, 캠 컨테이너, 채팅, 설정창 등등
• 🟩 WebRTC를 위한 시그널링 서버 구현
• 🟩 WebRTC 기능 구현
  • 🟩 미디어 공유 (마이크/캠)
  • 🟩 채팅
• 🟩 UI 보완

2️⃣ 협업 중 겪은 어려움 & 해결 방안

socket.io 파싱 문제였는데 nginx 프록시 문제라고 생각하여 시간을 낭비했다..

→ 교훈: 공식 문서를 정독하자,,

(socket.io가 hostname만 남기고 나머지를 떼어내서 시그널링 서버로 요청이 가지 않았음. path 옵션을 사용하여 해결함)

3️⃣ 좋았던 점

• 개발이 끝나가서 기분이 좋다 👍
• 다른 조와 함께 밥을 먹었다 🍜

4️⃣ 반성할 점

• 바쁘더라도 공식 문서를 읽자
• 문서화 지키자,,
• 커밋 메시지에 이유가 드러나도록 작성하자

5주차

1️⃣ 프로젝트 진행 상황

주간 계획

실제 수행 결과 🟩 : 완료 / 🟧 : 부분 완료 / 🟥 : 시작 전

• 🟩 버그픽스

  • 타로 펼치기 popup 안눌리던 버그
  • 로고 눌렀을 때 두번눌러야 닫히던 버그
  • host 혼자 방에있을 때 미디어를 toggle하면 상대에게 반영안되던 버그
  • speaker highlighter가 소리 인식을 쉽게 하던 버그
  • 카메라, 오디오를 변경해도 첫번째 목록으로 고정됐던 버그
  • 팝업위에 팝업이 뜨면 어색했던 버그
  • 호스트가 나갔을 때 게스트가 바로 안나가지고 팝업 노출되던 버그
  • 존재하지 않는 방에도 들어가지던 버그
  • AI 스트림 응답시 자동 스크롤 내려가며 위아래로 흔들렸던 버그
  • 경로, 팝업 관련 버그 수정
  • 채팅이 상대방에게 전달되지 않던 버그
  • clova studio 최대 토큰 수 제한 늘림

• 🟩 리팩토링

  • hook 의미에 맞게 폴더링
  • 컴포넌트 재사용 관련 리팩토링
  • [socket.io](http://socket.io) 관련 로직 모듈화

• 🟩 프로필 사진과 이름 설정 기능

• 🟩 TOLD 제거

• 🟩 소리 감지해서 말하고 있는 사람 캠 주위로 테두리가 보임

• 🟩 전역상태 관리 ContextAPI 에서 Zustand로 변경

• 🟩 호스트에게만 타로 펼치기 버튼이 활성화 되도록 변경

• 🟩 채팅 사이드바 프로필 이미지 설정

• 🟩 input 자동포커싱

• 🟩 팝업/설정창 떠있는 동안 채팅창 띄우기 금지

• 🟩 사용자 이동 흐름 변경

  • 방에 들어가고 → 비밀번호를 누르고 → 셋팅을 하고 → 채팅페이지로 이동한다.

• 🟩 다크모드/라이트모드 구현

• 🟩 반응형 웹 구현

• 🟥 윈도우/맥, 크로스 브라우징, 해상도 테스트

• 🟥 웹 접근성

• 🟥 애니메이션 성능 최적화

• 🟥 성능 최적화

• 🟥 버그

  • 상대방이 말 할 때 하이라이터 표시가 안됨
  • 상대방이 들어오지 않은 상태에서 프로필/닉네임 적용하면 상대방에게 적용 안됨
  • 메모리 누수
  • 채팅 도중 홈화면으로 가도 카메라 권한이 사라지지 않음 ( 그래서 해당 이슈 발생 )
  • 공유하기 이미지 다운로드 시 타로 카드 안보임

• 🟩 무중단 배포

  • 블루/그린 배포 전략 활용

• 🟩 리팩토링

  • 팩토리 패턴을 활용하여 DTO 및 Entity 객체 생성
  • 인터셉터를 활용한 에러 핸들링
  • Swagger 데코레이터를 정리하기 위한 커스텀 데코레이터 작성

• 🟧 STUN/TURN 서버 구현

  • coturn 오픈소스 이용

• 🟧 Sentry로 시스템 모니터링

• 🟧 버그 픽스 -ing

2️⃣ 협업 중 겪은 어려움 & 해결 방안

• FE와 BE 모두 Socket.io 에 대한 사전지식을 제대로 공부하지 않았다.
  • FE : URL을 제대로 전송하는지 확인하지 않음
  • BE : URL을 제대로 전송받는지 확인하지않음
  • nginx의 라우팅 오류인 줄 알고 시간을 허비했음
  • 원인은 nginx는 아무 문제 없었고 Socket.io 의 파싱 이슈였음..

3️⃣ 좋았던 점

• 기능 구현을 빨리 끝내놔서, 버그 픽스에 집중할 수 있었던 것이 좋았다🚀
• 처음에 계획했던 대로 주별 목표를 대부분 달성하고 있는 점이 만족스럽다.👍
• 다음주만 지나면 정말로 끝이다😆!

4️⃣ 반성할 점

• 구현에 집중하다보니 깃헙 리드미, 위키, 노션 정리가 부족했다 ⇒ 주말동안 다음 내용 준비해오기!!
• 주말동안 해야 할 일
  • 깃헙 리드미에 들어가면 좋을 것 같은 목차 생각해오기 (ex. 소개, 기술 스텍, 시스템 아키텍처 등)
  • 깃헙 위키에 들어가면 좋을 것 같은 사이드바 & 페이지에 들어가면 좋을 것 같은 목차 생각해오기
  • 💥 기술 블로그 작성하고, 담당자 및 완료된 항목 체크 표시하기 💥
  • FE : 성능 최적화 공부 및 WebRTC 모듈화, 웹 접근성 및 크로스 브라우징
  • BE : STUN/TURN 버그 픽스 및 도커 이슈 해결

6주차

1️⃣ 이번주 프로젝트 진행 상황

• 약간의 bugfix
• 발표 준비에 올인

2️⃣ 6주간 협업 중 겪은 어려움 & 해결 방안

• PPT 만드는 거 너무 힘들었다. 날린 거 너무 아깝다 흑흑
• 바쁠 때 PR 리뷰 하면 흐름이 깨져서 리뷰 해달라고 하기 어려웠다.
• 버그가 너무 많다. 디버깅이 힘들다. 테스트 코드가 절실하다.

3️⃣ 6주간 좋았던 점

• 대면으로 해서 재밌었다. 맛있는거 많이 먹을 수 있었다.
  • 처음에는 대면으로 너무 자주 보는 건 아닌가 했지만 백엔드 한 명이니까 따로 했으면 진행 상황 공유가 안 됐을 듯
  • 인프라 한다고 코드 못 짜도 부담 없고 굳 👍 (옆에서 심각하게 삽질 중 ⛏️)
• 우리만의 사무실이 있어서 좋았다. (살짝 정듦)
• 백엔드가 한명이지만, 그래도 우리끼리 전략을 잘 세워서 잘 진행할 수 있었다.
  • 프론트 풀스택 멋쟁이
  • 유정이 도커 멋쟁이 장인
• 웹 프로젝트지만 반응형까지 구현한 거 스껄함 skrrrrr
• 이때까지 해봤던 개발 프로젝트 중에서 제일 완성도 높은 결과물이 나온 것 같아서 기분 좋음
• 갈등 없이 잘 마무리 한 것 같아서 좋음 🥰

4️⃣ 6주간 반성할 점

• 멘토님을 버그 픽서(?)로 썼다. 공식 문서를 잘 읽자!!
  • 근데 socket.io는 공식 문서도 오류가 있음
  • 아마도 내 잘못 아닐껄
• 구현에 집중하다보니 모든 문서화가 부족했다.
  • 그래서 6주차를 통째로 문서화와 발표 준비만,,
  • 아마 문서화 잘 해놨으면 우리도 하루 컷 가능했을지도,,
• 백엔드도 공부하고자 했는데 하나도 못했다.. 안했다? 😂
• 앞으로는 개발을 진행하며 문서도 함께 적어야 문서화가 쉬울 것 같다.
• 회고 내용이 그 다음주에 대부분 반영이 안된것같다.
  • 앞으로 또 팀 회고를 진행한다면 반영 해보려고 최대한 노력하면 좋을 듯,,
• 테스트 코드의 중요성을 거의 마지막 주차가 돼서야 깨달았다. 앞으로 테스트 코드를 잘 작성하려 노력해보자.
• 성능 최적화를 하지 못해 아쉽다. 발열 문제와 속도 저하 이슈 때문에 다른 분들이 제대로 이용하지 못하는 것을 보고 마음이 아팠다.
• 다른 팀은 다 하는 백엔드 부하 테스트를 우린 못해봤다.
• 프론트엔드 에러 처리를 하나도 못했다.

5️⃣ 6주간 힘들었던 점

• 출퇴근 힘들어요
• 사무실 구조가 바뀌고 추워졌어요
• 사무실에 물이 안나와요… 6주가 지났지만 아직도 안 고쳐졌다…