# 작업일지 14,15 / 웹소켓 연결, 차트에 실시간 데이터 업데이트하기(Chart.js)

1. 다른 상세 페이지로 넘어갈 때 차트가 제대로 업데이트 되지 않는 문제를 발견했다. 그래서 아래와 같이 해결했다.

리액트에서는 key 프로퍼티를 통해 변경된 컴포넌트를 식별한다. key 값을 동적으로 변하는 고유값으로 지정해서 이전 차트와 현재 차트가 다른 데이터라는 것을 알려주었다. 

그리고 useMemo로 값이 업데이트 될 때마다 새롭게 계산하도록 했다.

 

2. react-query 에서 존재하지 않는 페이지임에도 이전 페이지를 캐싱했다가 띄워주는 문제가 있었다. react-query 에서는 key 값이 변하지 않는 이상 일단 이전 캐싱 데이터를 보내준다고 함. 상세페이지의 경우 모든 페이지가 각각 다 다르기 때문에 key 값을 페이지별로 다르게 지정할 필요가 있음. 원래는 key값을 문자열로 설정해두었는데, 이 key 값을 설정하는 것에 대해서도 컨벤션이 필요할 것 같다. 왜냐면 전체 앱에서 유니크한 값이어야 하기 때문에 동적으로 변하는 boardId를 추가해주기 위해서다. 

 

3. 아래와 같이 알림을 수신해야하는 기능이 있다. 어떤 이벤트가 일어났을 때 해당하는 유저에게 알림이 오는 기능인데, 이 기능에서는 양방향 통신 대신 서버에서 단방향으로, 단 실시간으로 수신되는 SSE 를 사용하기로 했다. 웹소켓에 비해 가볍고 더 목적에 부합한다고 생각했기 때문이다.

 

 

먼저 SSE란 무엇이냐?! SSE 는 Server Sent Event의 약자이다. 서버에서 발생되는 이벤트를 클라이언트로 즉시 전달하는데, 보통의 통신이 클라이언트의 요청에 의해 서버에서 응답하는 방식이라면, SSE 방식에서는 클라이언트의 요청 없이도 응답을 수신할 수 있다. 실시간 정보를 받게 되는 실시간 주식 차트, 날씨, 알림 등에 유용하게 쓸 수 있다. 

일반적인 요청에서는 1회성으로 데이터를 주고받은 뒤에 연결이 종료되는데, SSE 에서는 처음 연결되었을 때 연결 상태를 유지하고, 서버에서 일방적으로 데이터를 전송하는 방식으로 동작한다. 

 

자바스크립트에서는 SSE 사용을 위해 EventSource 라는 인터페이스를 제공하고 있다. 이 인터페이스로 이벤트를 송신하는 서버에 지속적인 연결을 유지할 수 있고, EventSource.close 라는 호출로 이를 종료하기 전까지 지속된다. 

 

우리는 특정 유저에 해당하는 알림을 수신해야 하기 때문에 유저의 액세스 토큰을 sse로 보내줘야 한다. EventSource 객체는 커스텀 헤더를 보낼 수 없으므로(WithCredential 만 포함한다.) event-source-polyfill 이라는 라이브러리를 사용해줬다.

위와 같이 EventStream이 정상적으로 생성되었다는 메시지를 볼 수 있다. 

 

그런데 SSE 연결이 원인인지? 서버가 계속 다운되는 현상이 일어났고, 백엔드에서 원인을 찾고 계시는 중이다. 통신 테스트가 살짝 지연되어서 다음 작업때 알림 기능이 정상 동작하는지 테스트 가능할 것 같다.