[TIL] 23/12/08 React 심화: 팀 과제 이슈 모음 + 할 일

오늘도 화이팅!

TIL

1) 리액트 쿼리를 썼는데 같은 페이지에 있는 A 컴포넌트에서 저장하고 B 컴포터넌트에서 읽어올 때 ,
  읽어오는 정보들이 바로 화면 업데이트가 안된다! alert창도 안뜬다 ! 도무지 모르겠다!

이거 그거잖아 ~ invalidate 안해준거 아니야? 할 수 있는데, 해줬다 룰루~ ^.^

이건 내가 넣은 isSuccess 구문 때문이었던 것 같은데, 타이밍 문제인 것 같다. ^.^

onSuccess와 isSuccess를 둘 다 넣은 탓에 둘의 싸움이 아닐까..

왜냐 onSuccess에서 console.log("xx") 한 줄만 넣어줘도 alert 이 뜨기도 했으니까.

넘넘 황당.. 나 이거 어디서 본것 같은데 ㅋㅋㅋ

결국엔 망한 코드에서는 console.log 한줄 못빼는 것이다.

그런 일 없게 애초에 잘짜자..

 

as-is )

넣어주는 쪽 코드 : MakeDatingCourse.jsx

const queryClient = new QueryClient();
  const mutation = useMutation(addDatingCourse, {
    onSuccess: () => {
      // Invalidate and refresh
      queryClient.invalidateQueries('course');
    }
  });
  
  ...생략...
  
  if (mutation.isSuccess) alert('코스가 등록되었습니다!');  // ??

 

읽어오는 코드 : CompletedDatingCourse.jsx

const { isLoading, isError, data } = useQuery(['course'], getDatingCourses);

 

to-be)

 

넣어주는 쪽 코드 : MakeDatingCourse.jsx

onSuccess 안으로 alert을 넣어줬다.

const queryClient = new QueryClient();
  const mutation = useMutation(addDatingCourse, {
    onSuccess: () => {
      // Invalidate and refresh
      console.log('onSuccess');
      queryClient.invalidateQueries('course');
      alert('코스가 등록되었습니다!');
    }
  });

 

 

TODO

투두는 항상, 하고싶은 것 으로 치부되고 -0-

실제 실행이 안되는 경향이..

 

시간이 없었지만 추가 하고 싶은 것

1. auth 파이어베이스 고유기능으로 로그인여부 판단하는 것.. 
-> 파이어베이스 자체에도 로그인 상태를 유지하는 방법이 있는데, 구현을 못하였음

-> 구현 못한 이슈는 auth 안에 user를 읽어오는 타이밍이 너무 느리달까..? 'ㅇ'.. (선언시 undefined)

그렇다면 이걸 어디에서 읽어와야할까.. 상위 컴포넌트의 useEffect 쯤인가..
https://firebase.google.com/docs/auth/web/auth-state-persistence?hl=ko

2. 지도 api 관련 부분 (너무 못 만져봤다)
1) 15개 디폴트 수정해보기 (api option 수정해보기)
2) 검색 범위 수정 location={center} 추가해보기 / radius 
https://apis.map.kakao.com/web/documentation/#services_Places_keywordSearch

 

3. 캐러셀 넣어보기.. 흑흑 망할 css 공부 좀 ㅠㅠ