- 초기값으로 셋팅된 캐스터 정보 (할머니)로 처음 아바타 이미지가 로드됨
- page와 main-app.js 가 로드완료 되자마자, 패션인플루언서 캐스터 아바타 이미지가 로드됨. (localStorage에 있는 caster 정보임 - 사용자가 마지막으로 선택했던 캐스터 옵션을 가져오고 없으면 랜덤으로 캐스터 정보 가져옴)
=> localStorage는 브라우저 API이니, page, main-app-js가 로드되는 과정이 클라이언트 사이드 하이드레이션 과정이 아닌가 싶음. - HeaderInfo 컴포넌트의 location, weather 네트워크 요청(useQuery 사용)이 전송됨.
- location 응답 요청이 오고 openai API요청이 감 (/api/weather-message)
fetching 전 UI가 비어보이는 문제
- 로케이션 이름과 기온, 날씨 아이콘은 useQuery를 사용하여 fetching, caching 하고 있음
- isLoading이 true일 때는 로딩 UI가 보이도록 작성했는데도 UI가 통째로 비어보임.
- 네트워크탭에서 확인해보니, 통째로 UI가 비어 보일때는 fetching이 시작되기 전임
문제
- 원래 코드에서는 isLoading이 true이고(&& 연산자 사용)) cityName과 weather가 없을 때 로딩 컴포넌트를 보여주고, !isLoading, !error, cityName, weather 모두 만족할 때 데이터를 보여줌.
변경
- isLoading이 true이거나(||연산자 사용) cityName과 weather가 없을 때 로딩 컴포넌트를 보여주고, 그렇지 않은 경우에만 데이터를 보여주도록 변경 ==> isLoading이 아닌 상태( fetching 시작 전)에서도 cityName과 weather가 없는 경우 로더가 보이도록함.
같은 이유로 WeatherMessage Component에서도 fetching 시작 전(isLoading이 false인 상태) 로딩스피너가 나타나지 않음.
코드를 보면 isLoading일때만 스피너가 적용됨.
변경
isLoading이 true이거나 isLoading이 false이면서 message가 없는 경우에도 TextLoader를 렌더링
