tanstack query 의 useQuery 함수에 options 객체를 넘겨줄때, 자동완성이 되지않는 문제를 확인하였습니다.
특히 options 객체의 필드 입력 완료시에는 추론이되어, eslint 에러가 발생하지 않았고, 중간에 자동완성 이 작동하지않았습니다.


관련 코드를 라이브러리에서 찾아보았고, useQuery.ts 에 같은 함수선언들이 포진해있었습니다. 해당 함수선언에 options 객체라는 인자를 받고있었고 해당 객체에 각각 다른 타입으로 선언된것을 import 하여 넣어주고있었습니다. 특히 undefined 관련 타입과, defined 관련 타입이 서로 분리되어있었고, 직관적으로 함수 선언의 순서가 문제가 될것이라 예상하였습니다.


타입스크립트 공식 문서에서 함수 선언의 순서가 작은 범위의 타입 에서 부터 큰 범위의 타입이 선언 되어야 순서대로 된다는것을 알았습니다. 예를들어 함수선언부에서 같은 인자를 받고있고 타입이 다를때, 더 작은 범위의 타입이 먼저 선언되어야 더 큰 범위의 타입이 작은 타입을 덮어쓰지않는다고합니다.


이런 정보를 바탕으로 undefined 즉 더 큰 범위의 타입을 defined 즉 더 좁은 타입 아래에 선언되도록 순서를 변경하였고, 자동완성이 됨을 확인하였습니다.


결론적으로 먼저 undefined 로 판단되지않도록 바꿔주었더니 defined 관련 타입으로 먼저 추론되어 관련 타입들에대한 자동완성 기능을 사용할수있게 되었습니다.


이슈 링크 : https://github.com/TanStack/query/issues/7209#event-12433686618

온, 오프라인 유저 정보의 실 시간성을 해결한 과정.

 

기획 단계에서 온, 오프라인 유저정보를 실시간으로 동기화하는 것으로 결정하였습니다. 하지만 이미 백엔드 api 가 구현이 완료되어있었고, get 요청으로 유저리스트 정보를 가져와야만 했습니다.
이를 통해 몇가지 실시간성을 할수있는 방법을 생각해냈습니다. 첫번째로 라우팅시 유저정보를 동기화하자, 두번째로 polling 방식(서버에 특정 시간마다 요청을 보내는 방식)이었습니다.


메인페이지의 오른쪽 섹션에 유저리스트를 보여주는 ui로 기획하였습니다. 익명 투표 사이트 특성상 메인페이지에서 게시글 목록을 많이 서핑 할것이란 추측을 하였고 해당 가설을 바탕으로, 메인페이지에선 체류시간이 길것이다 라고판단하였습니다.


이를 통해 라우팅 시마다 유저 리스트 정보를 갱신하는것은, 결국 체류시간이긴 메인페이지에서 유저리스트는 실시간성을 보장하지못한다 판단하여, 메인페이지 에서만 polling 방식으로 유저정보를 갱신하도록 결정하였습니다.


이를바탕으로 유저 정보의 실시간성을 유지하면서, 라우팅시에 유저정보를 가져오는 비효율적은 요청은 보내지않도록 하였습니다.


리포지토리 링트 : https://github.com/prgrms-fe-devcourse/FEDC5_NodakNodak_Noah/commits?author=ienrum