# 작업일지 12,13 / STOMP publish 요청 성공! + 에러 처리는..?

1. 웹소켓을 적용하는데, 웹소켓을 연결하자마자 데이터를 첫 데이터를 받아오려고 한다. 백엔드에서 publish 가 일어날 때 초기 데이터를 보내주는 엔드포인트를 만들어 주셨고, 아래와 같이 커넥트시에 subscribe 하고, publish 하여 데이터를 받아오도록했다.

 

자 그럼 이제 경매를 입찰하는 기능은 어떻게 만들 수 있을까!!

일단 sendBid 함수를 별도로 분리하니 커넥션 연결이 비동기적으로 이루어져서 그런지 커넥션연결이 된 상태가 아니라서 제대로 동작을 하지 않았다. 그래서 아래와 같이 커넥션 연결 후 함수를 생성할 수 있도록 ref 객체를 만들어서 전달해주었다.

그렇게 한 뒤 요청을 보내면 일단 동작은 하는 것 같다. 그런데 publish를 하면 구독중인 모든 클라이언트에 데이터를 보내주고 화면을 업데이트 해야 하는데, 그게 제대로 동작하지 않는다. 현재 컴포넌트가 subscribe 중이어서 데이터 응답이 오면 콘솔로 출력해주고 있는데 동작하지 않는다.

 

어째서 메시지는 보내지지만 왜 어떤 응답도 받을 수가 없는것인지?! send와 publish를 동시에 할 수가 없어서 그런것인가?! 웹소켓 디버그 툴 에서 /pub/bid로 똑같은 요청을 보냈을때는 응답이 잘 수신되는 것을 확인했다. 그러면 나의 publish 연결에 문제가 있다는 의미가 된다.

 

문제의 원인은 함수에 전달하는 값이 잘못되어있었던 것이었다. 하지만 적절한 에러처리가 되고 있지 않기 때문에 커넥션이 끊어진 것 이외에 요청에 대한 서버의 피드백을 받을 수 없어서 원인을 찾는데 시간이 오래 걸렸다. 이 문제를 해결하기 위해서 웹소켓 연결에서 에러를 확인하는 방법에 대해 찾아보려고 한다. 

 

여기저기 구글링을 해본 결과 아래와 같이 onStompError 메서드를 사용하면 피드백을 받을 수 있다고 한다.

하지만 publish 주소가 달라져도 아무런 피드백을 주지 않았다... 새삼 각종 에러를 선사받았던 경험이 감동스럽게 느껴질 정도였다.. 일단 유효성에 대한 부분은 프론트에서 처리가 되고 있기 때문에 추후에 보기로 하고 아래와 같이 기능을 구현했다.

 

2. Chart.js 에서 이전 렌더링에서의 데이터를 그대로 가지고 있다가, 새롭게 이를 마운트해도 그 이전 데이터를 그대로 그리는 경우가 있다. 예를들면 아래와 같다. 새로운 상품에 들어갔는데, 차트는 새로고침을 해야 현재 데이터로 업데이트되는.. 이전에 겪었던 카운터함수와 비슷한 맥락의 문제인 것 같았다.

찾아보니, 이는 chart.js 에서 차트를 그리기 위해 사용하는 canvas 엘리먼트의 특성때문에 그렇다고 한다. chart에 있는 data를 clear 해줘야 할 필요성이 있다. 이 부분은 다음 작업에서 진행해보자..