이전 글까지의 진척 정도라 하면 통신은 되고, 메세지도 보내지며, 받아지는 것 또한 구현이 됐지만
이상하게도 한 번 보냈는데 두 번 보낸 것으로 되고, 더 나아가서는 4번 6번 10번.. 끊임 없이 보내지는 횟수가 증가했다.
그렇게 진전 없는 코드의 수정을 거듭해 나가던 도중
해당 작업 파일에서 ctrl+s (저장) 버튼 횟수에 따라 메세지가 보내지는 횟수가 증가하는 점을 발견했다.
예를 들어 저장을 4번 하면, 메세지 한 번 전송에 메세지 4번이 보내지는 것이다.
저장을 8번 하면, 메세지 한 번 전송에 메세지 8번이 보내짐 ㅇㅇ
근데 개발자 도구에서 console 부분을 까보니 해당 구문이 여러번 반복 된 것을 알 수 있었다.
<<< MESSAGE
destination:/sub/message/1
content-type:application/json
subscription:sub-0
message-id:cla2zbb4-461
content-length:114즉 send가 여러번 발생한 것이 아니라, message를 받아오는 과정이 여러번 반복 된 것.
하지만 코드 어디를 봐도 message가 여러번 반복될 일도 없을 뿐더러
디버깅을 위해 message를 가져오는 함수 안에 넣어놓은 cosole.log("잡았다 요놈") 이 한 번 실행되는 것으로 보아
message를 가져오는 함수 자체는 문제가 없는 것으로 판단했다.
그렇다면 남은 것은 처음 세팅 할 때 필요한 sockJS와 stompClient를 불러오는 부분 뿐이다.
useEffect(()=>{
const socket = new SockJS('백엔드분 설정 API URL 주소')
const stompClient = StompJs.over(socket)
},[])위 코드는 처음 마운트 될 때 실행되게 해놓았기에 ctrl+s 를 할 때마다 반복될 수 있는 여지가 있나? 라는 생각을 했다.
(사실 ctrl + s 할 때마다 새로 선언되는데 반복 혹은 중첩이 일어날 수가 있나? 라는 생각은 든다
아니면 '백엔드분 설정 API URL 주소'에 어떤 흔적이라도 남는 것일까? 씁...)
하여 sockJS와 stompClient를 다른 파일에서 선언하고 import 해서 쓰기로 했다.
이렇게 하면 sockJS와 stompClient의 선언이 반복될 여지를 일절 차단할 수 있으며
setState를 활용해서 전역적으로 관리할 필요도 없고 코드도 훨씬 간결해질 것 으로 판단했다.
다음과 같이 코드를 작성해서 다른 파일에 담아 export 해주었다.
import SockJS from 'sockjs-client'
import StompJs from 'stompjs'
const socket = new SockJS('백엔드분 설정 API URL 주소')
const stompClient = StompJs.over(socket)
// eslint-disable-next-line import/prefer-default-export
export { stompClient }그리고.. 가져온 stompClient를 본문 코드에 적용시킨 후 테스트 결과..!
바람직한 통신의 모습을 맞이하게 되었다!
이제 이쁘게 꾸미기만 하면 될 것 같다 :)
