fix: useStomp.ts에서 WebSocket 닫힘 이벤트 로깅 추가 및 ChatApplyPage.tsx에서 요청 목록…#50
fix: useStomp.ts에서 WebSocket 닫힘 이벤트 로깅 추가 및 ChatApplyPage.tsx에서 요청 목록…#50
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello @koreahghg, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 채팅 신청 요청과 관련된 실시간 업데이트의 안정성과 사용자 경험을 향상시키는 데 중점을 둡니다. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이번 PR은 useStomp.ts에 WebSocket 연결 종료 이벤트 로깅을 추가하고, ChatApplyPage.tsx에서 멘토링 요청 목록을 가져오는 로직을 개선했습니다.
useStomp 훅에 상세한 로깅을 추가한 것은 디버깅에 큰 도움이 될 좋은 변경입니다.
ChatApplyPage에서는 기존의 WebSocket 기반 실시간 알림을 10초 주기의 폴링 방식으로 변경하셨습니다. 이는 WebSocket 연결의 불안정성 문제를 해결하기 위한 것일 수 있으나, 실시간성이 저하되고 주기적인 API 호출로 서버 부하가 증가할 수 있는 트레이드오프가 있습니다. 이 설계 변경에 대한 배경을 공유해주시면 리뷰에 더 도움이 될 것 같습니다.
폴링 로직 구현과 관련하여, 알림 메시지 생성 시 발생할 수 있는 잠재적 버그와 코드 효율성을 개선할 수 있는 부분에 대해 몇 가지 리뷰 의견을 남겼습니다. useCallback을 사용하여 함수를 메모이제이션한 것은 좋은 접근입니다. 전반적으로 코드 품질을 높이기 위한 좋은 시도라고 생각합니다.
| const newCount = response.data.filter( | ||
| (req) => req.applyStatus === 'PENDING' | ||
| ).length; | ||
|
|
||
| // 새로운 요청이 들어온 경우 알림 | ||
| if (newCount > previousReceivedCountRef.current) { | ||
| const newRequests = response.data.filter( | ||
| (req) => req.applyStatus === 'PENDING' | ||
| ); | ||
| const addedCount = newCount - previousReceivedCountRef.current; | ||
| if (addedCount === 1 && newRequests.length > 0) { | ||
| toast.info(`${newRequests[0].name}님한테 요청이 왔어요`); | ||
| } else if (addedCount > 1) { | ||
| toast.info(`${addedCount}개의 새로운 요청이 왔어요`); | ||
| } | ||
| } |
There was a problem hiding this comment.
멘토링 요청 알림 로직에 두 가지 개선점을 제안합니다.
-
비효율적인 필터링:
response.data에 대해filter연산을 두 번 수행하고 있습니다. 한 번의 필터링으로pendingRequests를 구하고, 그 결과를 재사용하여 성능을 개선할 수 있습니다. -
잠재적 버그:
addedCount === 1일 때newRequests[0].name을 사용하여 알림을 표시하는 로직은 API 응답이 항상 최신순으로 정렬되어 있다는 가정에 의존합니다. 만약 정렬 순서가 보장되지 않으면, 새로 도착한 요청이 아닌 다른 요청자의 이름이 표시될 수 있어 사용자에게 혼란을 줄 수 있습니다.
가장 간단하고 안전한 해결책은 요청자 이름을 표시하는 대신, 새로 도착한 요청의 수만 알려주는 것입니다. 아래와 같이 수정하면 두 문제를 모두 해결할 수 있습니다.
const pendingRequests = response.data.filter(
(req) => req.applyStatus === 'PENDING'
);
const newCount = pendingRequests.length;
// 새로운 요청이 들어온 경우 알림
if (newCount > previousReceivedCountRef.current) {
const addedCount = newCount - previousReceivedCountRef.current;
toast.info(`새로운 요청이 ${addedCount}개 도착했어요`);
}
| // 10초마다 받은 요청 확인 | ||
| const pollInterval = setInterval(() => { | ||
| fetchReceivedRequests(); | ||
| }, 10000); |
There was a problem hiding this comment.
폴링 간격으로 사용된 10000은 '매직 넘버'입니다. 코드의 가독성과 유지보수성을 높이기 위해, 이 값을 컴포넌트 상단에 의미 있는 이름의 상수로 정의하는 것이 좋습니다.
const POLLING_INTERVAL_MS = 10000;
// ...
useEffect(() => {
// ...
const pollInterval = setInterval(() => {
fetchReceivedRequests();
}, POLLING_INTERVAL_MS);
// ...
});2 participants
… 가져오기 로직 개선
💡 배경 및 개요
Resolves: #{이슈번호}
📃 작업내용
🙋♂️ 리뷰노트
✅ PR 체크리스트
.env,노션,README)"API 개발 완료됐어요","환경값 추가되었어요")🎸 기타