# 작업일지 19 / SSE 연결하여 알림 기능 구현하기

오늘은 지난 시간 다 하지 못한 SSE로 알림 기능 구현하기- 를 진행했다. 

 

1. 알림을 어떤 컴포넌트가 마운트 되었을때 연결하지 말고, 전체 앱에서 전역으로 관리할 수 있도록 호출 위치를 변경해주었다. 그렇게 해야 어떤 페이지에서든 접근이 가능하고, 중복 연결을 방지할 수 있음! 최초로 페이지가 마운트 될 때 SSE라는 컴포넌트가 마운트 되도록 하면서 로그인이 되어있는 경우 SSE를 연결한다. 

2. 알림 데이터를 어떻게 관리할까.

우선 알림 데이터는 전역으로 관리하려고 한다. 이유는 먼저 알림 연결 지점은 SSE라는 최상단 컴포넌트이고, 실제로 이 데이터를 사용하는 지점은 메인 헤더와 알림 페이지 두 곳이다. 우선은 fetchSSE 함수를 실행하면 아래와 같은 코드가 실행된다.

EventSource 객체가 생성되며 서버와 handShaking을 하고, 메시지를 수신하는 경우 이를 queryClient.setQueryData 를 사용해 쿼리 데이터로 저장해준다. 이 메서드는 현재 queryClient 인스턴스에서 명시적으로 쿼리 데이터를 저장할 수 있도록 해준다.

 

현재는 전체 알림 데이터를 받아오는 API가 존재하지 않지만, 해당 api가 완성이 되면 컴포넌트 마운트시에 useQuery로 해당 데이터를 먼저 가져오고, 그 뒤에 위 코드에 의해 새로운 메시지가 계속 누적되며 저장되도록 할 것이다.

 

처음에는 로컬 스토리지를 통해서 데이터를 저장하려고 했는데, 어차피 이 데이터를 상태로 관리해야 하고, 새로고침이나 창을 닫았다가 다시 여는 등 컴포넌트 마운트가 이루어질 때 다시 한 번 서버와 동기화를 거쳐야 하기 때문에 로컬 스토리지에 저장하는 것은 의미가 없을 것으로 판단했다. 일을 두 번 하는 느낌이랄까?

 

아무튼 위 코드를 통해서 쿼리 데이터를 저장하고, 필요한 곳에서 아래와 같이 가져오면, 

이렇게 알림을 수신할 때 알림 데이터가 누적되는 것을 확인할 수 있다.

현재 문제점은 이 데이터가 실시간으로 수신이 되지만, 화면에는 제대로 반영이 안된다는 점. 원인은 내일 바로 파악해서 해결할 예정이다.

 

또 현재 쿼리 데이터를 매번 저렇게 콘솔로 찍어서 확인하는데, 오늘 구글링을 좀 해보니 reactQuery에도 dev tool이 있다고 한다. 예전에 Redux Toolkit을 활용하면서 dev tool의 장점을 직접 경험했는데, 덜 번거롭고 굉장히 좋았다. 내일 꼭 적용해봐야지!