커리큘럼
home
React
home

알림

Created
2025/02/03 06:07
Tags

실시간 알림

알림 기능은 사용자 간의 상호작용을 명시하여, 서비스 이용을 보다 명확하게 하고 흥미를 유발합니다. 알림은 Socket.IO를 통해 유저가 사이트에 접속해 있을 때 토스트 메시지로 표시되며, 접속해 있지 않더라도 DB에 저장되어 나중에 알림 목록에서 확인할 수 있습니다.
알림은 아래 3가지 상황에서 발생합니다.
LIKE: 다른 유저가 나에게 ‘좋아요’를 눌렀을 때
MERGED: 서로 ‘좋아요’를 눌러서 merge 되었을 때
EXIT: 둘 중 한 명이 채팅방을 나가 1:1 채팅방이 해제되었을 때
MERGED 알림은 해당 유저에게 문자 메시지로도 전송됩니다.
다른 유저가 나에게 ‘좋아요’를 눌렀을 때
서로 ‘좋아요’를 눌러서 merge 되었을 때
둘 중 한 명이 채팅방을 나가 1:1 채팅방이 해제되었을 때
문자로 수신한 merge 알림

알림 목록 보기

알림의 기본 상태는 '읽지 않음'이며, 전체 알림 읽기를 하면 '읽음' 상태로 변경됩니다. 알림 목록에서는 최근 알림 10개를 불러옵니다.
1.
알림 타입: 발생한 알림에 따라 분류되어 저장되고 표시됩니다. (LIKE, MERGED, EXIT)
2.
알림 내용: 알림 타입에 따라 생성된 메시지가 내용란에 저장됩니다.
3.
알림 읽음 상태: 알림이 읽혔는지 여부를 표시합니다.
세 가지 알림 유형 중에 MERGED 알림은 문자메시지로도 전송됩니다.

Background Task

Socket.IO를 이용한 실시간 알림을 구현하였습니다.
알림이 발생하면 Socket 이벤트 생성 전에 데이터베이스에 저장됩니다. 상대 유저가 Socket 서버에 접속해 있지 않더라도, 저장된 데이터를 조회하여 나중에 확인할 수 있습니다.
JWT 토큰 인증
소켓 연결 시 클라이언트로부터 전달받은 JWT 토큰을 게이트웨이에서 검사하여, 유효하지 않은 유저는 소켓 서버에 접속하지 못하도록 차단합니다. 또한, 토큰의 payload에 포함된 userId를 통해 필요한 데이터를 조회하여 socket.data에 저장합니다.
소켓 연결 시 클라이언트는 JWT 토큰을 전달하며, 로드밸런서 환경에서 원활한 연결을 위해 transports는 'websocket' 방식으로 설정합니다.
유저 알림 방 join 정상적으로 소켓 서버에 연결되었다면 저장된 userId에 해당하는 방으로 유저를 입장시킵니다. 서버는 해당하는 유저에게만 특정하여 브로드캐스트 할 수 있게 됩니다.
알림 이벤트 LIKE, MERGED, EXIT 알림 이벤트를 수신하면 'reception'이라는 통합 이벤트를 발생시킵니다. 이 이벤트는 알림 타입과 메시지를 포함해 userId 방에 접속한 클라이언트에게 브로드캐스팅되어 실시간 알림을 전달합니다. 알림 전송 후에는 이를 서버 로그에 기록합니다.
MERGED: 서로 ‘좋아요’를 눌러서 merge 되었을 때
EXIT: 둘
MERGED: 서로 ‘좋아요’를 눌러서 merge 되었을 때
EXIT: 둘
MERGED: 서로 ‘좋아요’를 눌러서 merge 되었을 때
EXIT: 둘