댓글이 달렸으면 어떻게든 알람을 통해서, 답글의 대상자에게 알려주는 것이 상식적이다.
그렇기 때문에 이 기능을 도입하기 위해서, 백엔드 크루가 websocket을 통한 실시간 알림으로 구현해보는게 어떻겠냐고 제안했다.
여기서 websocket이란 무엇인가?
웹소켓은 웹에서 TCP Socket을 구현한것이라 생각하면된다.
기존의 http요청은 stateless하기 때문에, 현재 상태를 서버에 전달하기 위해서 쿠키라는 것이 존재했다.
하지만 소켓을 사용하면 지속적인 connection이 서버와 클라이언트간에 유지가 되게되고, 서로를 listen하는 상태가 된다.
(비유하자면 http요청은 편지이고, socket은 전화통화 연결이다.)
댓글 서비스가, 특정 서버의 api를 구독하고 있으면 서버가 api를 보낼때를 즉시 캐치해서 UI에 반영할 수 있는 것이다.
사실 댓글 알림이 채팅이나 주식차트처럼 실시간으로 빠르게 대응되어야할 기능은 절대 아니다.
하지만, 웹소켓 한번 적용해보고 싶었기에 딱히 반대하지 않았다.
사용자가 많아지더라도 서버가 소켓을 유지하는데 드는 비용이 그렇게 크지 않다는 백엔드 크루의 말에 안심한것도 있다.
이제, 댓글 알람에 웹소켓을 적용함으로써
실시간으로 댓글 알림을 받을 수 있게 개편되었다.
하지만 단점도 있다.
위에서 말한것처럼 알림이 없는 idle한 시간에도 서버와 연결이 유지된채로 주기적으로 통신을 해야하고,
기존 rest api 로직과 병행하면서 상태를 업데이트 해야하기 때문에 로직이 복잡해질 수 있다.
즉, 기존에 어떤 요소를 api를 통해서 data를 받아온 다음에 렌더링을 하고 있다면,
+ 거기에 실시간으로 소켓으로 날아온 데이터도 추가로 실시간으로 렌더링을 해주어야 한다.
이걸 도대체 어떻게 할 수 있을까?
고려해야할 특징은 다음과 같다.
1. 소켓연결은 최초 1회만 실행한다.
2. 실시간으로 알림이오면 rest api로 받아온 상태를 업데이트 한다.
3. 최대한 추상화하여 재사용성을 높인다.
일단, 최초 1회만 사용할 소켓을 연결해주고, 해당 소켓으로 받아온 상태를 업데이트 해주는 hook을 만들었다.
그리고 App.tsx에서 Context API를 사용하여, 해당 상태를 업데이트해주는 setState와 State를 내려보내준다.
그러면 이제, rest api로 상태를 가져오는 hook에서 useContext를 사용하여, 웹 소켓으로 받아온 데이터를 rest api를 통해 받아온 data에 삽입하여 return 해준다.
그러면, 웹 소켓이 최초 App.tsx에서 실행이 되고, 해당 상태가 바뀌고, 그것이 Context API를 통해서 전체 Context에서 사용할 수 있고,
해당 Context내에서 사용되는 rest api의 data를 받아오는 훅들 내에서 사용가능하고,
실시간으로 data를 끼워서 페이지에서 사용할 수 있다.
이게 다, 웹 소켓을 1번만 연결하기 위해서이다.
현재 전역상태 라이브러리를 사용하고 있지 않기 때문에 Context API를 사용해야해서 코드가 살짝 복잡해진 감이 있다.
또한, 특정 hook이 특정 Context내에 존재해야하는 단점이 있다. (어차피 지금 Context는 전역이다.)
아무튼 이렇게 하니 동작이 깔끔하게 되었다.
아마 전역상태 라이브러리를 사용하면 코드는 더 깔끔해질 것이다.
하지만 개인적으로 라이브러리를 최대한 사용하지 않고, 추상화하면서 개선해나가는게 실력향상을 많이느는것 같기에,
추가적인 리팩터링을 통하여, 개선해나가보겠다!
'개발 > 개발 리포트' 카테고리의 다른 글
| 2021/10/01 : 컴포넌트 인자로 Optional을 많이 쓰면 안좋은 이유 (0) | 2021.10.02 |
|---|---|
| 2021/09/30 : WebComponent를 사용해보았다. (0) | 2021.10.01 |
| 2021/09/28 : webpack5의 기본 제공기능을 사용하자 (0) | 2021.09.29 |
| 2021/09/27 : 이미 존재하는 API 객체를 적극 활용하자 (feat. MessageChannelAPI) (0) | 2021.09.27 |
| 2021/09/26 : 수많은 if문을 Object Literal로 바꾸자 (0) | 2021.09.26 |
