팀플) Api요청시 로딩 처리

지금은 하루치만 요청해서 데이터가 빨리 나오지만 나중에 한달치를 만약에 요청한다고 할시에는 api에 직접 요청해도 시간이 꽤나 걸림.

그럼 뭐다? 로딩 페이지가 따로 필요할 것 같다~

컴포넌트 디렉토리에 간단하게 생성해놨다.

코드를 이제 집어넣고 빌드중에 React Hooks must be called in the exact same order이런 오류가 뜸.

이건 사실 계속 겪었던 문제였고 어찌저찌 해결은 해놨었는데 새로운 코드가 들어오면서 또 뜸.

이게 React의 Hook들은 컴포넌트가 렌더링될 때마다 항상 같은 순서로 호출되어야 한다는 규칙을 위반헀을 때 뜨는 오륜데 오류 표시도 없어서 고치기 진짜 힘들었음..

근데 다시 뜬거 ㅋㅋ

해결은 원래 팀원이 쓰던 코드를 안건드릴려고 내가 그 위에서만 놀았던게 조금 문제가 됐던거라 최상단에 배치해야되는 코드는 빼서 올려고 이제 방금 도입한 코드는 리턴전에 배치해서 돌려봤는데 페이지가 아예 뜨질 않네. 그럼 뭐가 문제인지 확인해보려고 일단 방금 도입한 코드는 주석 처리 하고 다시 리빌드.

---

주석처리하고 확인해보니까 로직 잘 돌아감 방금 넣은 로딩 페이지가 문제가 있다는건데.

하.. 뭐 로그 다 찍어봐야지 난 뭐가 문젠지 모르겠는데.

우선 진짜 모르겠어서 차이점 비교해봄

이게 정상적으로 작동하는 로직이고

    if (isLoading) {
        return <LoadingSpinner />;
    }

이거 하나 추가해서 로딩 페이지를 구현하고 난 이후 로직임

보면 useUserLocation에서 언마운트 하고 난 이후에 작동을 안함.

그럼 useUserLocation에서 뭔가 걸리는게 있다는건데..

아 왜 다른데 뭘 추가 했는데 갑자기 이 함수에서 문제가 생기는건지 도통 이해가 안되네. 여튼 여기서 로직이 매끄럽게 흘러가도록 수정을 해야될듯.

---

는 그냥 방법 자체를 바꿨다. 그냥 조건을 태그에서 걸어줌.

return (
<>
        {isLoading ? (
            <LoadingSpinner />
        ) : (
            <>
                <div>
                    {/* 별자리 데이터 및 다른 JSX 요소들 */}
                </div>
            )}
            </>
        )}
    </>
);

축약하면 이렇게. 그리도 확인을 위해서 데이터 요청도 한달로 늘림.

일단 이것도 제대로 작동은 안했고 수정해서 고침.

결과는 이렇고,

수정은 어떻게 되었냐면

const [dataLoading, setDataLoading] = useState(true); // 별자리 데이터를 불러오는 로딩 상태 추가

return (
  {isLoading || dataLoading ? (
                <LoadingSpinner />
            ) : (

이렇게 데이터를 로딩하는 상태를 추가했다. 생각해보니까 나는 데이터 로딩할 때 저걸 보여주고 싶었던건데 조건을 로그인의 로딩 상태만 걸어놔서 잘 안됐던 것.

여튼 이렇게 하니까 잘 되네..

콘솔에 데이터 요청이 끝마치고 반환되는 순간에 원래 페이지도 뜸.

근데 좀 문제가 팀원이 그려놓은 화면이 제대로 출력 안됨..

하 진짜

그래서 애니메이션을 그렸냐 안그렸냐 상태도 추가함.

오케이.. 이것도 고쳤다.

그럼 로딩 페이지를 이제 그려보면 될 것 같은데.

---

코드펜에서 그럴듯한걸로 가져와야지

이게 적용중인데 생각보다 조금 걸려서 효율적인 작업을 위해 잠깐 APP.js에 라우트 시켜놓고 작업해야될듯

오케이 작업 다 했고,

실제 백엔드와 통신환경에서도 잘 되는거 확인함.

이런 모양임 배경도 어둡게 처리하고 싶은데..

테일윈드로 어둡게 처리함. 굳 끝

이제 나중에 다른놈들도 이렇게 처리하면 된다..

재사용 굳