실전 프로젝트 트러블슈팅(SSE)

SSE(Server Sent Event)

 

도입이유

 

문제1 SSE (Server-Sent Events) Message를 여러번 수신하는 문제 발생

 

해결

sse를 통한 알람 구현시 message를 여러번 수신하는 문제가 발생했습니다.

에러가 랜덤하게 발생하여 원인을 파악한 결과 sse 연결 시 랜더링을 순간적으로 여러번 발생시키는 경우 중첩으로 연결되어 response를 여러번 수신한다고 판단하였습니다.

 

해결 방법으로는 useEffect의 clean up 함수를 사용하여 component unmount 시에 연결을 끊어 중첩 연결을 방지해 문제를 해결했습니다. 

 

문제2 HTTP2 에러이슈 (로컬에선 오류발생 but 배포 시엔 ???)

SSE 구독 시에 해당 에러 발생

 -> 해결 내용 보기 https://appuals.com/http2-protocol-error/

문제3 기본 연결값 45000 milliseconds -> 최적 연결값으로 변경하기

 

문제4 코드 리팩토링 하면서 랜더링 최적화 하려고 get 불러오는걸 로그인 한 경우에만 하려고 if 문을 추가해줬는데

reducer를 호출 안하는 이슈 발생

해결 - userInfo 를 useState에 담아서 사용하다보니 컴포넌트 mount 시에는 state에 값이 담기지 않아 타이밍 이슈로 get이 호출되지 않았고, userInfo를 아래와같이 바로 로컬에서 가지고오는 구문으로 바꾸어 해결하였음

 

 

배운점

자잘한 오류는 당연히 딸려오는거라고 생각하면서 코딩했는데 트러블슈팅으로서 오류를 정리하면서 쭉 파고드니까 오류의 흐름이라던지 정리하면서 이해도가 많이 올라갔다.