Releases: boostcampwm-2024/refactor-web30-stop-troublepainter
Releases · boostcampwm-2024/refactor-web30-stop-troublepainter
v1.4.0
📙 6주차 데모 URL
🔧 Improvements
캔버스 이미지 최적화
- 캔버스 이미지를 WebP 포맷(q=0.8)으로 변환하여 파일 크기를 줄이고 서버 트래픽을 줄였습니다. (#41)
프롬프트 최적화
- 부정행위 감지 시스템을 2타입(OK/WARN)으로 단순화하였습니다.
제시어 테마 입력 시 필터링 기능 추가
- 불쾌감 방지, 토큰 방지 등을 위해 제시어 테마 입력 시 필터링이 되도록 구현했습니다. (#39)
📝 Additional Notes
요청 비용 측정 테스트
- GPT-4o API 비용 측정을 위한 테스트 코드를 구현하였습니다. (#42)
v1.3.0
📙 5주차 데모 URL
🚀 New Features
부정행위 AI 프론트엔드 연동
- 서버의 AI 모델을 통해 부정행위(초성, 단어 길이, 단어 등)를 감지하고, 위반 사항이 발견될 경우 사용자에게 적절한 경고 메시지를 표시합니다. (#36)
사용자 맞춤형 제시어 AI 생성 기능
- 서버의 AI 모델 및 프롬프트로 사용자가 원하는 종류의 제시어를 생성할 수 있습니다.(#37)
- 사용자가 그리고 싶은 키워드를 입력창에 입력하면 키워드 관련 제시어가 나옵니다.(#37)
🔧 Improvements
이미지 전달 방식을 base64에서 URL 방식으로 개선
- 문제 : 이미지를 base64로 인코딩하여 ChatGPT API에 직접 전송합니다.
- 해결:
- 이미지 파일을 Buffer 형식으로 받아 NCP 오브젝트 스토리지에 업로드합니다.
- 업로드된 이미지의 URL을 ChatGPT API에 전달합니다.
- API 응답을 받은 후, 이미지를 스토리지에서 자동으로 삭제합니다. (#31)
🐛 Bug Fixes
정답 데이터 동적 처리로 전환
- 문제 : 테스트를 위해 정답을 고정해두었습니다.
- 해결 : 고정된 정답 대신, 각 요청에 대해 동적으로 방 데이터에서 정답을 가져와 검증하는 방식으로 변경하였습니다. (#28)
📝 Additional Notes
배경음악 및 효과음 볼륨 감소
- 배경음악 10%로 감소
- 효과음 50%로 감소
📝 Full Changelog
Full Changelog: v1.2.0...v1.3.0
v1.2.0
📙 4주차 데모 URL
🚀 New Features
그림 부정행위 처리
- OpenAI API(gpt-4o)를 통합하여 그림 내 부정행위(문자 포함 여부) 검증 기능을 추가하였습니다. (#26)
🔧 Improvements
도움말 모달 관련 개선 사항
- 터치패드에서 더 부드럽게 페이지 넘김 할 수 있도록 스크롤 거리 단축 (100 > 50)
- Lottie Player dotlottie-react로 통일하여 번들 용량 축소
- .lottie 파일 메모리 캐시하여 두 번째 호출을 더 빠르게 하도록 개선 (#17)
캔버스 API 곡선 시스템 적용
- 문제: 기존 Canvas API의
lineTo()방식은 선이 각져서 자연스러운 드로잉이 어려워 UX가 감소했습니다. - 해결: 점들 사이의 중간점을 계산해 연속성이 보장된 곡선을 생성했습니다. (#13)
Prometheus 모니터링 기능 제거
애플리케이션의 성능 및 상태 모니터링을 NCP Cloud Insight로 전환하였습니다.
Redis 어댑터 설정 추가
- 문제: 기본 Socket.IO 어댑터 대신 Redis를 사용하여 여러 컨테이너에서 연결을 공유해야 했습니다.
- 해결:
@socket.io/redis-adapter패키지를 추가하고, Redis를 사용하는 사용자 정의 어댑터(RedisIoAdapter)를 구현하여 서버 간의 연결을 관리할 수 있도록 설정했습니다. (#22)
서버 컨테이너 이중화 구성
- 문제 : 단일 서버 컨테이너로 인한 요청 처리 지연이 있었습니다.
- 해결 :
- 서버 컨테이너를 2개로 구성하고 Nginx를 통한 로드 밸런싱을 구현했습니다.
- API 요청은 least_conn 방식으로, 웹소켓 연결은 ip_hash 방식으로 부하를 분산하도록 설정했습니다.
라이트하우스 자동화
- 문제: 웹 성능 최적화 과정에서 반복적인 수동 라이트하우스 측정으로 인해 개발 생산성이 저하되었고 자동화된 성능 지표 모니터링 시스템이 없어 성능 저하 이슈를 조기에 발견하지 못하는 문제가 발생했습니다.
- 해결: CLI 명령어를 통해 각 페이지의 라이트하우스 성능 측정 결과를 콘솔에서 바로 확인할 수 있도록 프로세스를 자동화했고 PR이 생성될 때마다 성능 지표가 자동으로 코멘트되도록 설정했습니다. (#18)
🐛 Bug Fixes
도움말 모달 애니메이션 버그 해결
- setTimeout으로 재생 컨트롤 하는 로직을 제거하여 페이지 렌더링 직후 도움말 모달 활성화 시 애니메이션이 멈추는 버그 해결 (#17)
Redis 키 구조 오류
- 문제 : 잘못된 Redis 키 구조로 인해 플레이어 조회에 실패하는 문제가 발생했습니다.
- 해결 :
room:${roomId}:player:${playerId}를room:${roomId}:players:${playerId}로 수정하여 해결했습니다. (#16)
비동기 처리 누락
- 문제 : Redis 조회 시 비동기 처리가 누락되어 런타임 에러가 발생하는 문제가 있었습니다.
- 해결 :
handleConnection메소드를 async/await 패턴으로 변경하여 해결했습니다. (#16)
예외 처리 미작동
- 문제 :
WsExceptionFilter에서handleConnection메소드의 예외가 포착되지 않는 문제가 있었습니다. - 해결 : 예외 처리 방식을
throw에서 클라이언트 에러 이벤트 emit 방식으로 변경하여 해결했습니다. (#16)
퀴즈 단어 관리 방식 개선
- 문제 : 모든 방에서 동일한 단어 리스트를 공유하고 있어, 각 방에서 독립적인 단어 관리가 불가능했습니다.
- 해결 :
- 각 방마다 독립적인 단어 리스트를 관리하도록 변경했습니다.
- 클래스 수준에서
words저장 방식을 제거하고, Redis를 이용한 관리 방식으로 전환했습니다. (#26)
📝 Additional Notes
미사용 파일 삭제
- canvas 폴더의 미사용(과거 개발용 테스트 모듈) 파일 삭제
- asset>lottie>help 폴더의 json 애니메이션 파일 삭제 (#17)
📝 Full Changelog
Full Changelog: v1.1.0...v1.2.0
v1.1.0
🔧 Improvements
Prometheus 기반 메트릭 수집 기능 추가
- 애플리케이션의 성능과 상태를 모니터링하기 위해 Prometheus를 기반으로 한 메트릭 수집 기능을 추가했습니다. (#3)
테스트용 소켓 이벤트 test:joinRoom 추가
- 테스트 시,
playerId를 지정하여 방에 입장할 수 없던 문제를 해결하기 위해 테스트용 이벤트를 추가했습니다. (#14)
FCP, LCP 지표 최적화
-
이미지 최적화, 오디오 지연 로드, 주요 페이지 번들 분리로 초기 로딩 성능을 개선하고 LCP 성능을 개선했습니다. (#8)
Metric Platform Before After Improvement FCP 데스크탑 0.8s 0.4s 50% 모바일 3.4s 1.7s 50% LCP 데스크탑 3.4s 0.7s 79.4% 모바일 22.9s 3.3s 85.6%
📝 Full Changelog
Full Changelog: v1.0.0...v1.1.0
v1.0.0
🚀 New Features
인프라 구축
- Docker 환경을 설정해 일관된 개발 환경을 구축했습니다.
- 모노레포 구조를 구성하여 CRDT 로직과 타입 정의를 공통 패키지로 분리해 프론트엔드와 백엔드에서 공유하도록 했습니다. (#91)
- 코드 품질 유지를 위해 Lint와 Prettier를 설정했습니다. (#165)
UI/UX 퍼블리싱
- 시작 페이지, 대기실/게임/결과 페이지를 포함한 주요 화면을 제공합니다. (#46, #82, #69, #191)
- 게임 상태에 따라 혹은 도움말 버튼 클릭 시 해당 모달이 화면에 나타납니다. (#34, #144, #199)
그림판 기능
- 마우스 & 터치로 그림판에 그림을 그릴 수 있습니다. (#33)
- 사용자가 드로잉할 때마다 잉크량이 감소하여 사용량이 제한됩니다.
- 페인트 툴 도구로 닫힌 영역 내에 남은 잉크 잔여량만큼 색을 채울 수 있습니다. (#41)
- Undo & Redo 기능으로 그림판 위에서 로컬 사용자의 선만 삭제하고, 복구할 수 있습니다. (#117)
실시간 협업 기능
- CRDT를 활용해 실시간 드로잉 환경에서 발생할 수 있는 충돌 병합 드로잉 시스템을 구축했습니다. (#190)
- 캔버스 내 드로잉의 클라이언트 간 동기화 정확도를 검증하기 위한 테스트 시스템을 도입했습니다.
- 웹소켓을 통한 실시간 CRDT 데이터 전송 기능을 구현하여 원활한 멀티플레이어 환경을 제공합니다. (#108)
게임 시스템
- 실시간 멀티플레이어 게임의 핵심이 되는 게임 시스템을 구축했습니다.
- Socket.IO를 기반으로 한 실시간 통신으로 여러 플레이어가 함께 즐길 수 있는 환경을 제공합니다.
문서화
- JSDoc을 작성해 핵심 유틸리티와 훅에 대한 TypeDoc 문서화를 제공합니다.
- UI 컴포넌트를 위한 Storybook 문서화를 제공합니다. (#44)