[LAB-9] 렌더링을 두번해야 정상적인 위치가 되는 문제

qorbaxk commented 1 year ago

질문 작성자

백승연

문제 상황

현재위치를 받아와서 날씨와 미세먼지 정보를 알려주는 페이지 입니다.
현재위치의 기초 값을 빈값으로 넣으니 에러가 뜨는 문제 때문에 기초값을 광화문 경도위도로 설정했습니다.
그랬더니, 처음 로딩은 이 기초값을 기준으로, 다른 페이지를 갔다가 다시오면 현재위치로 뜹니다.
처음 페이지에 접근했을 때부터 현재위치의 값을 받아와서 띄우고 싶은데 방법을 모르겠습니다 ㅠㅠ
순차적으로 접근하기 위해 promise 를 사용하여 현재 위치의 경도위도값을 받는 함수를 실행 후에 api 함수들을 사용하는 방식으로 바꿨음에도 불구하고 기본값이 먼저 들어가는 것이 문제같습니다 ..
추가질문..
혹시 렌더링될때 저렇게 아래로 밀리듯이? 뜨는 현상은 어떻게 해결해야할까요?

프로젝트 저장소 URL

환경 정보

Windows
Node.js v18.12.1
React v18.0.2

yamoo9 commented 1 year ago

@qorbaxk 님.

문제 해석

~그런데 설명이 많이 부족해서 광화문 기본 값이 어디 있는 지 알 수가 없네요.~
좌표 값만 가지고는 광화문인지 알 수 없었어요. 주석이라도 남겨줬다면 검색해서 찾았을 겁니다. 😳
로딩 상태 하나로 제어하다보니 문제가 되는 걸로 확인했습니다.
코드 설명이 부족해 코드의 실행 흐름을 이해하는데 상당히 애먹었습니다. 😥
더 나은 코드로 리팩토링 하는 것은 현 시점에서 어려울 것으로 보여 문제 해결에 주안점을 둡니다.

문제 해결

온도, 강수량, 미세먼지를 처리하는 개별 로딩이 없고 하나로 제어 하려다 보니, 온도, 강수량, 미세먼지 응답이 언제 완료 되었는 지 알 수 없는 것이 문제입니다. 실질적으로 작성된 코드의 loading 상태는 무용지물(無用之物)인 것이죠.

그래서 하나 하나 상태가 언제 바뀌면 좋을 지 분석할 수 밖에 없었습니다. 😱

오랜 시간 분석한 결과.......

WalkAirQuality 이펙트 콜백에서 공기질(aqi) 값이 0보다 커지는 시점이 가장 적절 해보였습니다. 물론 더 적절한 시점이 있을 수 있지만, 그걸 찾는데 너무 많은 시간이 소요될 것 같네요. 🥲

const WalkAirQuality = () => {
  // ...
  useEffect(() => {
    AirLevel(aqi)
    // aqi 값이 0이 아닌 경우, 로딩 상태를 false로 업데이트
    if (aqi > 0) {
      dispatch(getWalkLoading(false))
    }
  })
}

그리고 공기질 업데이트를 제외한 다른 컴포넌트에 작성된 로딩 상태 변경 코드는 모두 제거하거나 주석 처리해야 합니다!

마지막으로 WalkState 초기 상태(initial State)의 로딩 상태 값은 true로 설정해주세요.

이제 결론입니다! 새로고침 해서 확인해도 중간에 기본 값이 뜨지 않고, 현재 위치 정보 기반으로 표시됩니다. 🙂

첨부된 가이드 파일을 다운로드 받아 비교, 분석 및 확인해보세요.

src.zip

추가 질문 답변

MyPageMyPet 컴포넌트 높이가 0이기 때문에 Y축이 움직이는 것입니다. 높이를 설정해 Y축이 움직이지 않도록 설정합니다.

아래 영상 화면을 보면 움직이지 않습니다.

플레이스홀더(Placeholder)를 설정하면 사용자 경험(UX)이 향상됩니다. (참고)

qorbaxk commented 1 year ago

redux > slice > walkindex > walkindexSlice.tsx 파일에 있는 walkLocation의 초기값으로 들어가있는 lat lng의 좌표값이 광화문의 좌표입니다. 거기서 빈값을 넣으면 렌더링시 오류가 나길래 초기값으로 넣어준 것입니다..

yamoo9 commented 1 year ago

redux > slice > walkindex > walkindexSlice.tsx 파일에 있는 walkLocation의 초기값으로 들어가있는 lat lng의 좌표값이 광화문의 좌표입니다. 거기서 빈값을 넣으면 렌더링시 오류가 나길래 초기값으로 넣어준 것입니다..

현재 주어진 문제의 컨텍스트를 프로젝트 당사자가 아닌, 외부인 입장에서 이해하기란 쉽지 않아요. 😥 예를 들어 다음의 설명이 부족함을 느꼈습니다.

어떤 라우트의 페이지 컴포넌트를 봐야하는 것인지?
필요한 정보 → 라우트 /walkindex / 컴포넌트 WalkIndex.tsx 참고
현재 위치의 기초 값은 무엇을 말하며, 광화문에 대한 정보는 어디에 선언된 것인지?
필요한 정보 → RTK 상태 관리 walkIndexSlice.tsx → walkLocation 위도, 경도(광화문 위치) 참고

@qorbaxk 님이 작성해주신 질문의 정보를 리마인드 할 겸 아래 다시 남겨봅니다. 🥲

현재위치를 받아와서 날씨와 미세먼지 정보를 알려주는 페이지 입니다.
현재위치의 기초 값을 빈값으로 넣으니 에러가 뜨는 문제 때문에 기초값을 광화문 경도위도로 설정했습니다.
그랬더니, 처음 로딩은 이 기초값을 기준으로, 다른 페이지를 갔다가 다시오면 현재위치로 뜹니다.
처음 페이지에 접근했을 때부터 현재위치의 값을 받아와서 띄우고 싶은데 방법을 모르겠습니다 ㅠㅠ
순차적으로 접근하기 위해 promise 를 사용하여 현재 위치의 경도위도값을 받는 함수를 실행 후에 api 함수들을 사용하는 방식으로 바꿨음에도 불구하고 기본값이 먼저 들어가는 것이 문제같습니다 ..

yamoo9 / likelion-FEQA