2023/02 2

vuejs 가상스크롤로 로딩지연 개선

서버에서 가져올 enum(wasteType) 목록은 최초 접속시에 store에 없으면, 통신하여 담아두고 사용하고, route 이동시에 store에 담겨있다면 재사용을 합니다. (현재 300여개) 이번에 A 메뉴에 해당 enum리스트가 조건으로 들어가는데, 최초로딩 시 혹은 다른; emun리스트를 한번도 가져오지않는 페이지 > A 메뉴 최초진입시에 ui가 2-5초 멈추는 현상이 발생해서, 해결하는 과정을 기록합니다. 1. vue3 devtools의 performance 체크 페이지 진입을 해보면 IntegratedSearch컴포넌트에 대한 성능 타임라인을 볼 수 있습니다. 실제로는 마우스클릭부터 렌더링까지 시간을 나눠 정확하게 보고싶었는데, 방법을 잘 모르겠어서 통합검색 컴포넌트만 filter를 걸어서 ..

typescript에서 runtime interface 체크하기

Interface type check at runtime with Typescript 타입스크립트에서 메서드로 받는 parameter가 2가지의 인터페이스로 오는 경우가 생겼다. 한가지는 주소검색으로 특정 위치목록을 받을때는 A라는 interface이고, 주소가 없는경우 서버에 등록후 리턴받을때는 B라는 interface 형태로 받게된다. 이때, A일경우에는 A에만 있는 속성인 c를 사용하고싶고, B인경우에는 B에만 있는 속성인 d.e 를 사용하고 싶었다. 그래서 A타입인지를 구분해주는 함수를 하나 만들었다. export function isAType(workingSpot: A | B): workingSpot is A { if (!workingSpot) return false; return (workin..