벌써 11월의 첫번째 주가 지나갔다.
이번 주는 채팅방 기능을 구현해봤는데 서로가 작성하는 채팅이 실시간으로 보이는게 정말 흥미로웠다. 백엔드 서버로 Spring을 사용했기 때문에 SockJS-Client와 StompJS 라이브러리를 사용했다.
겪었던 어려움들 ...
중복되는 채팅
채팅방을 여러개 만들다보니 구독상태가 중첩이 되면서 하나의 채팅 Send가 여러개의 Receive 응답으로 돌아오는 상황을 겪었다. Stomp의 구독기능에서 구독 id를 정해줄 수 있다는걸 알지못해서 어떻게 특정 구독을 타겟으로 삼아서 정확하게 구독해제 해줄 수 있을지 찾아보다 결국 공식문서를 다시 정독해보고 알게되었다.
채팅 후 Scroll Down
채팅을 Receive한 후에 스크롤을 채팅 박스 기준 최하단으로 내려줘야하므로 scroll down 관련 함수를 만들었는데, receive한 채팅이 클라이언트에서 관리해주던 채팅목록에 concat되는 과정이 완료되기전에 scroll down이 진행되면서 예상한대로 흘러가지 않았다. 고민해보다 settimeOut으로 시간차를 둬서 해결했다.
채팅방을 들어가면서 Scroll Down
채팅방을 들어가면서 해당 채팅방의 채팅 기록을 받기 위해 get요청을 보내고 받아온 채팅기록을 나열해서 보여주게 된다. 그 후 최하단으로 scroll down을 해야해서 '채팅 후 Scroll Down' 문제 해결 방법과 같은 방법으로 해결했지만 get 요청이 오래걸릴 경우 완전한 해결방법이 되지못할거란 생각이 들었다. 인피니트 스크롤과 같은 기능으로 lazy loading을 구현하면 해결할 수 있을것 같다.
내 폰트 어디갔어?
이번 주엔 예전과 다르게 폰트를 import해서 사용하는것이 아니라 폰트를 직접 다운로드 받아서 폴더에 넣고 사용했는데, 프로젝트를 자동 배포하고 확인해보니 폰트가 전혀 적용되지 않았다. 분명 로컬환경에선 잘 적용 됐었기 때문에 배포과정에서 있는 문제라고 생각하고 검색해보니 특정 폰트확장자가 인식이 안되는 문제가 있어서 확장자를 추가해줬다.
CSS flex
css의 flex로 나머지 영억을 모두 차지하게 하는 기능을 사용해봤는데 브라우저 크기가 변경되었을 때 채팅 인풋창의 위치가 처음 렌더링 됐을 때 위치로 고정되어버리는 문제가 발생했다. 해당 위치에 영향을 미치는 다른 요소들의 height을 고정 해주고 그것들을 합한 값을 이용해서 queryselector로 인풋창의 상대적인 위치를 정해줬다.
채팅방 알림 기능
현재 사용자가 보고있지않은 채팅방의 읽지않은 채팅 갯수를 띄워주고 싶었는데, 처음 적었던 문제의 해결방법으로 바로바로 구독해제해주는 방법을 채택했더니 알림 기능을 구현해보기가 굉장히 난감했다. 다음에는 다른 방법을 사용해야할 것 같다.
