4. 오류/에러

- 2024.04.15

firebase에 넣었던 데이터 가져와서 보여주는데 줄바꿈 안되는 오류 있었고, 아래 적은것처럼 처리함.
https://springdream0406.tistory.com/82

firebase 줄바꿈 적용안됨

 

 

- 2024.04.14

firebase 사용량 초과에 걸렸다. 참고로 firebase의 무료 요금 하루 읽기 제한이 5만건 정도이다.

문제는 방명록의 게시글을 삭제하고 나면 변경된 firebase 데이터를 불러와야하다보니, 방명록에 처음 들어갔을 때 데이터를 불러오는 useEffect에 불러온 데이터를 의존성 걸었던걸로 기억한다..

당시에는 글을 삭제한 후에 반영이 잘 되길래 그냥 넘어갔었는데 한시간쯤 후인가 방명록에 테스트 글들이 안불러와져서 체크해본 결과 사용량이 초과되었고, 이유는 앞서 의존성 걸었던게 무한루프에 빠지면서 발생한 것이다.

때문의 의존성을 빼고, 게시물을 삭제했을 때, 그리고 게시물을 작성했을 때 게시물 데이터를 반영해야 하기 때문에 이에 대해서 상당히 고민했었다. 결론적으로는 데이터가 변경될때마다 1씩증가시키는 state를 하나 만들고, 게시물 삭제와 등록 함수의 끝에서 해당 state에 +1 하는걸 작성했다.

이게 realtimefirebase 인가? 하는 기능이 있다는데 firebase store에 데이터가 변경되면 이를 인식하고 콜백해주는 기능이 있다고 한다.

그런데 이게 다르게 말하자면 실시간 연동인 만큼 리소스를 잡아먹을거라는 생각이 들었다. 안그래도 인증여부 실시간 체크해주는거 돌아가는 중인데 이것까지 돌아가야할까? 그리고 데이터가 꼭 즉각즉각 변동되어야할까? 하는 생각이 들었었다. 리소스는 이번에 맥북을 바꾸면서 메모리를 18gb인 기본으로 갈지 36gb로 늘릴지 고민하면서 여러 게시물을 찾아보면서 성능에 대한 고민을 해보다보니 쓸데없는 리소스는 최대한 없는게 좋지 않을까 라는 생각을 했고, 데이터의 실시간 반영같은 경우는 사용량 제한에 걸리고보니 데이터가 변경될때마다 이를 다시 반영하는것은 횟수를 늘리고 그만큼 일을 한다는 생각에 굳이라는 생각이 들었다.

 

말이 뭔가 생각대로 적었는데 결론적으로 리소스를 굳이 늘릴필요가 없고, 데이터 역시 실시간 업데이트 할 필요가 없기 때문에, 방명록에 들어갔을 때, 글을 작성했을 때, 그리고 글을 삭제했을 때. 이렇게 3가지 경우에 한해서 데이터를 불러오도록 처리해두었다.

 

뭔가 오류얘기를 적어야하는데 다른걸 적었는데, 다시 원점으로 돌아가서 서버나 db연동된 코드는 무한루프에 안빠지도록 잘 체크하도록 하자!!

 

 

 

- 2024.04.10

그제부터 어제까지 고민해서 맥북 m3 pro 36gb를 지르고 오늘 집 구조 반정도 바꾼 다음에 새로온 맥북 세팅해준 후, git clone 받아서 실행했었는데 오류들이 생겼었다.

일단 첫번째 문제는 내가 vscode를 잘 안끄고 그대로 계속 실행했었기 때문인지 파일들 이름 중 대소문자 변경해줬던게 제대로 적용이 안되다가 이번에 새로운세팅에서 실행하니깐 안맞는다고 오류 났던거다.

앞으로 최종 테스트 같은거 할때는 vscode 완전히 껐다 키던지 git clone 을 받아서 진행하던지 해야할듯 싶다.

 

마찬가지로, gitignore 처리해두었던 api 파일을 새로 안만들어줘서 날씨 데이터 못가져오는 오류가 생겼었다.

처음에는 뭐가 잘못된건지 몰라서 지역정보 잘 가져와지나 로그 찍어보고, 날씨쪽 오류 찍어보니 요청이 잘못되었다는 오류를 보고나서야 api키가 생각나더라.. 앞으로는 신경쓰자!!

 

 

- 2024.04.02

와.. 계속 오류를 만나기는 하지만, 오늘처럼 잘 되던게 안되는 오류 그리고 그걸 해결하는데 엄청 오래걸린건 처음이다..

일단 오류는 원래 플레이어에 재생중인 곡의 플레이타임과 현재 플레이시간이 뜨고, 재생정지 버튼이 작동한다.

그런데 오늘 코드 정리하고 나니 해당 기능들이 제대로 작동을 안하더라.

시간이 안불러와지는가 하면, 불러와졌는데 다른곡으로 넘어가면 멈춘다던지, 재생정지 기능이 안먹힌다던지..

 

일단 오류를 발했던 당시에는 재생/정지를 한 버튼으로 컨트롤해야하다보니 실제 플레이어의 재생상태를 가져와서 반영하려고 했고, 상태를 가져와서 반영하는데 딜레이가 있다보니 일단 버튼 눌렀을때 상태 바로 변경하고, 이후에 반영된 상태가 다시 반영되도록 해놓았었다.

그리고 앞서 말한 오류를 발견해서 일단 재생상태 가져오는거 취소해보고, 재생과 정지 버튼을 그냥 나눠버려서 상태를 가져올 필요가 없게도 해보았는데 해결이 안되더라. 그래서 코드들 진짜 이렇게 저렇게 변경해봤는데 일단 문제의 원인은 플레이어의 컨트롤을 만들어주는 함수가 중복되다보니 이걸 하나로 만들고 useState처리해두었다. 그런데 이게 여기저기서 쓰이다보니 오류를 일으킨거였다. 사실 중간쯤에 혹시나 하면서 의심을 했었지만 GPT에게 물어봤을때는 컨트롤을 여러개 만들어서 따로 쓰는건 추천하지 않는다고 해서 이렇게 안써야되나보다 했었는데 젠장 이번에 개발하면서 느끼는건데 GPT는 의존이 되면서 의존이 안된다 ㅎㅎ 진짜 기본적인 지식을 물어보고 결국은 내가 해결해야된다. 진짜 똑같은 대답을 문제해결한척하면서 계속 보여주는걸 요즘 계속 겪게된다 ㅎㅎ

무튼간에 플레이어의 문제는 컨트롤을 한개만 만들고 이걸로 여러개를 제어하다보니 생긴문제였다. 하긴 재생시간때문에 1초마다 컨트롤러가 사용되고 있는데 이걸 여러곳에서 쓰려니 문제가 생기는게 당연할지도?? 무튼 해결해서 다행이다..

 

 

- 2024.03.31

Home.css에서 css 설정이 안먹히는 이유를 찾았다...

Home.jsx에서 Home.css import문이 삭제되어 있었다.....

언제 삭제했지... 아니 그런데 Home.css문이 삭제 되었는데 왜 이전에 설정해둔건 그대로 잘 적용되어 있었지...

 

 

- 2024.03.30

와.. 진짜 많은 오류를 만났다.

우선 이건 내가 지식이 부족해서 생긴건데

그냥 Route로 각 path별로 왼쪽 오른쪽 컴포넌트 만들어서 집어넣는 식으로 하려고 했다.

그래서 시작을 App.js에 그냥 html 코딩했는데, 나중에 위치정보 기능 넣고 하려다보니 App.js에서는 이런 처음에 처리해야할 일들을 처리하고, 각 페이지 외에 notfound나 개인적으로 넣으려는  geolocation 알림 페이지 같은거 넣으려고 보니 App에서 한번 Home에서 한번 route가 들어가서 중복 router로 인해 path가 제대로 안읽혔다.

그래서 열심히 찾아보니 Outlet 처리를 해주면 된다고 하는데, 나는 왼쪽과 오른쪽을 같은 path에 처리를 하다보니 예를 들어 /main 이라면 main 하나로 왼쪽은 MainLeft를 오른쪽은 MainRight의 컴포넌트를 넣어야하는데 Outlet은 하나만 처리되다보니 이게 안되고, gpt는 /* 처리하라는데 그러면 뒤에 뭐가 들어가든 다 주소처리가 되어서 notfound 페이지로 넘어가지를 않게되고.......

이거 때문에 진짜 스트레스 받다가 gpt에게 중복Router를 해결하는 방법이 아닌 지금 내 상황.

path에 맞게 왼쪽 오른쪽 컴포넌트 넣는 방식을 물어봤더니 useParams를 알려주더라. 진작에 물어볼껄..

그런데 뭐 중복라우터의 차일드 개념도 사용해야 했던 터라 앞서 알아본 정보가 도움이 되긴 했다.

무튼 일단 해결한 방법은

 <div>
      <Routes>
        <Route path="/" element={<Home />}>
          <Route path=":navigationTagName" element={<Home />} />
        </Route>
        <Route path="/geolocation" element={<Geolocation />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>

이렇게 뒤에 값 유동적으로 바뀌게 넣고,

  const { navigationTagName } = useParams();
  const navigation = new navigationTags();
  const selectedPage = navigation.getNavigationTagName(navigationTagName);
  if (!selectedPage) {
    return <NotFound />;
  }

useParams로 path값 가져와서

export class navigationTags {
  tags = {
    main: { left: MainLeft, right: MainRight, name: "홈" },
    about: { left: AboutLeft, right: AboutRight, name: "프로필" },
  };

  getNavigationTagName = (navigationTagName) => {
    const selectedPage = this.tags[navigationTagName];
    return selectedPage;
  };
}

tags 값에 비교해가지고 해당되는 값들 리턴해주고,

그 리턴된 값들을 

                <selectedPage.left />


                <selectedPage.right />

요런식으로 가져다 사용하는 방식으로 해결했다.

 

개인적으로 아쉬운점은 Routes에서 / path 뒤에 path다는 식이라 아무렇게나 넣어도 notfound 페이지로 이동을 하지 않는다.

때문에 useParams에서 받아온 값 비교하고 리턴값이 없으면 notfound 페이지를 보여주는 방식으로 변경이 되어서 Routes에 있는 notfound Route는 사실상 무쓸모이다. 그래도 혹시 모르니 남겨두었다.

 

 

다른 오류는 NavLink를 사용했는데, 예전에는 activeClass 라는 기능이 있어서 선택된 NavLink에 쉽게 css를 줄 수 있었다고 한다.

그래서 일단 해봤는데 계속 안되서 알아보니 기능이 삭제되었다고 한다.. 그래서 인터넷을 찾아 isActive와 삼항연산자를 사용해서 className의 값을 변경해주었는데.. 변경된 className에 css가 안먹혔다..

결국 해결한 방법은 NavLink의 초기 css는 Home.css에서 설정했는데, active css는 App.css에서 설정해야 먹혔다.

해결했는데 정작 왜 그런지 정확한 이유는 아직 모른다.. 

 const tagsInstance = new navigationTags();
  const { tags } = tagsInstance;

  const navigationBars = Object.entries(tags).map(([tagName, tagContent]) => (
    <NavLink
      key={tagName}
      to={`/${tagName}`}
      className={({ isActive }) => (isActive ? " active" : "navigation__item")}
    >
      {tagContent.name}
    </NavLink>
  ));

  return <div className="navigation">{navigationBars}</div>;

 

 

뭐 다른것도 많았지만, 앞서 얘기한 이 두 오류가 지금 글을쓰는 시점에서 가장 오랫동안 힘들게했던 오류들이라 적어놓는다..