Home

♻️ 방해꾼은 못말려 프로젝트 리팩토링

🎯 팀의 성장 목표

🫂 팀 목표

• 리팩토링과 유지보수에 용이한 구조로 변경
• 디자인 패턴 공부

👤 개인의 목표

• J042_김성환 ”보기 좋은, 예쁜 코드를 작성해보기”
  • 추상적인 말이긴 하나 파일명만 보아도 어떤 내용인지 파악할 수 있는 느낌의 예쁜 코드
  • 테스트를 통해 쉽게 리팩토링이 가능하게 바꾸고, 분리 진행
• J062_김준기 ”수치로 한눈에 알 수 있도록 성능 최적화하기”
  • 성능 테스트 자동화 및 메트릭 정하기
  • 캔버스, CRDT, 웹소켓 최적화
• J066_김진 ”다른 사람이 작성한 코드를 읽고 이해하는 능력 기르기”
  • 이미 동작 중인 코드임을 명심하고 꼼꼼하게 읽어 리팩토링
  • (ex) 원래 동작하던 코드의 결과값 등을 임의로 변경해 기존의 테스트 코드가 동작하지 않는 것과 같은 문제를 발생시키지 않기
• J130_서산 ”다른 사람의 프로젝트 이어서 진행하기”
  • 현업에서는 새로운 프로젝트를 진행하기보다는 기존의 프로젝트를 리팩토링하고 개발하는 일이 많다고 생각해 해당 상황을 경험해보기
  • 다른 팀이 어떤 방식으로 개발을 진행했는지 확인

✨개선 사항

1️⃣ v1.0.1

• 단위 테스트를 진행하고, 테스트 용도의 도커 컨테이너를 이용해 통합 및 e2e 테스트를 진행함
• 단위 테스트 진행을 통해 코드 내 버그 발견
  • 비동기 함수에 await가 누락되어있어 Promise<boolean> 타입이 반환됨에 따라 if 조건문에서 에러 처리가 되지 않는 문제 해결
• 통합 및 e2e 테스트 진행을 통해 에러 처리 로직 변경
  • 기존 코드는 @UseFilters() 를 사용해 에러 처리를 하려는 의도로 작성되었으나, NestJS에서는 @SubscribeMessage() 데코레이터가 적용된 메서드에만 Filters가 동작한다는 것을 파악
  • Filters 동작을 직접 수행할 수 있도록 변경

2️⃣ v1.1.0

• Shared Worker를 적용해 브라우저 내의 여러 탭에서 소켓 연결 관리
• Playwright를 이용한 성능 테스트 진행
  • 성능 최적화를 위해 마우스 무브 이벤트에 16ms 쓰로틀링 적용
  • 토스트 메시지에 3초 쓰로틀링 적용 및 useCallback 의존성 배열 수정 등 리액트 리렌더링 횟수 줄이기를 통해 성능을 20%부터 최대 92%까지 향상
• Redis List 삽입 방식 변경으로 연산 횟수 약 50% 감소

3️⃣ v1.2.0

• Clova OCR로 인식된 글자의 바운더리 영역 내에 점이 존재하는지 확인
• Playwright를 이용해 일관된 테스트 환경 구축
• Shared Worker 적용 이후 발생한 오류 해결
  • useDrawingSocket 에서 gameSocket 관련된 코드를 삭제해 정상적으로 다른 사람의 그림이 보이도록 수정
• 서버에서 각 플레이어에 대한 가상 캔버스 생성 및 그림 그리기
  • 해당 이미지를 바탕으로 Clova OCR 동작

4️⃣ v1.3.0

• pureimage 라이브러리를 node-canvas 로 교체해 렌더링 속도 향상
• Clova Studio 적용
  • Clova OCR로 인식된 글자가 제시어와 연관되어있는지 판단 후, 연관되어있다면 패널티 적용
• Docker 이미지 최적화
  • 멀티 스테이지 빌드 구현 및 불필요한 의존성을 제거해 이미지 크기 47.2% 감소
• HTTP/2 및 HTTP/3 지원 활성화

5️⃣ v1.4.0

• OCR 인식률 향상
  • 이미지 상하좌우에 여백을 추가해 큰 글자 인식률 향상
  • 가상 캔버스에서 선 두께를 조정해 굵고 작은 글자도 OCR을 인식할 수 있게 변경
• OCR 비용 절감
  • 이미지 스프라이트 기법을 도입해 라운드당 OCR 요청횟수를 1/4 로 감소
• OCR 성능 향상
  • API 요청 방식을 multipart/form-data로 변경해 이미지 크기 약 33% 감소

🧑‍💻프로필

김성환	김준기	김진	서산
BE	FE	BE	FE