내배캠 TIL 2023.02.22

유저 페이지

게시물 호버 : 색상 변경 및 글자 띄우기

게시물 클릭 => 상세 페이지로 이동

게시물 단어 클릭 => 여행 후로 상태 변경 (edit 기능) => 소중한 리뷰 남겨주세요 다음에 쓸래요.  물론이죠  알러트창 띄우기 => 수정페이지로 이동

 

메인 리스트 지도 받아오기

 

유저 페이지 페이지 네이션, 서치 페이지 페이지네이션

 

 

유저 페이지에서 데이터를 변경하는 함수를 실행하고 navigate를 이용해서 수정 페이지로 넘어가고 그 페이지에서 refetch를 해주어 가장 최신의 서버 데이터를 한번 가져와줬는데, 내가 변경한 데이터가 적용이 안 되어있어서 좀 놀랬다. 하지만 query들은 비동기 함수고 비동기 함수는 제일 마지막에 실행이 된다고 했다. 그런데 순서를 명확히 지정을 해주고 싶다면 async await를 써서 데이터 변경이 되고 나서야 navigate가 실행되도록 해주어야한다.

 

tailwind 자식 요소에 접근하는 법

https://stackoverflow.com/questions/67119992/how-to-access-all-the-direct-children-of-a-div-in-tailwindcss

How to access all the direct children of a div in tailwindcss?

 

코스 검색창에 자동 포커스 들어가면 좋겠다.

여행 후 선택 한 다음 등록하면 이미 리뷰 남겼다는 전제가 있는거라서, 소중한 리뷰 감사합니다라고 떠야하지 않을까?

 

카카오 API 손대봤다. 흥미진진

https://react-kakao-maps-sdk.jaeseokim.dev/

Hello from react-kakao-maps-sdk docs | react-kakao-maps-sdk docs

 

 

몇개 있어요.

 

tailwind 트러블 슈팅

data를 곧 바로 새로 받아오는 것이 안되어서, 라이프 싸이

 

시간 한정되어 있으니 발표할 내용  잘 선정해주어라 

 

rtk-query로 하면 invalidate tag가 있으니까 data가 바뀌면서 자동으로 새로 필터가 될 줄 알았는데, 

userlist에 새 데이터가 왜 안 와지는지... 그래서 새로고침을 하면 되길래, 렌더링 문제인가 하고 , 

useEffect 안에 넣어서 리렌더링 시켜도 봤는데, 그래도 새 데이터가 받아와지지 않는다.

 

 

7분 30초 지나면 커트함 

mvp 시연할 때 2분동안  - 영상으로 찍어서 - 추후에 피드백 받을 때 좋다 

 

word break 가리기

 

헤더 크기 

좋아요

이거 보류 

 

최적화

custom hook

아쉬운 기능 지도, 메모 보충

글로벌 css로 기준 잡아놓기

스타일

 

최신 데이터 받아오는 것으로 고생했던 나의 이야기

 

문제1:  처음에는 새로운 data를 추가하자 마자 새데이터를 받아와서 거기에 있는 id를 이용하여 navigate 주소로 넣어주려고 했는데, 새로 고침해야만 받아와져서 고민을 했다. 

 

야매 해결 방법 1. 다른 페이지로 들렸다가 그 다음에 거기서 새로 업뎃 된 데이터를 받고, 그 데이터를 이용해서 네비게이트를 해주었다.

 

제대로 된 해결 방법 2. 데이터가 invalidatetags로 이미 자동으로 서버와 동일하게 받아와져있었다!!

그 데이터가 적용되려면 라이프 싸이클에 따르면 리렌더링이 되어야 새로 받아온 데이터가 적용이 된다는 것을 알게 되었다. 그래서 addCourse를 해주고 리렌더링을 위한 state 변경을 하나 일부러 넣고 그걸로 인한 리렌더로 데이터를 적용할 수 있었다. 

 

문제2. 상세 페이지에서 데이터를 업뎃했을 때,  유저 페이지에서 데이터도 자동으로 최신 데이터로 업뎃이 될 줄 알았다. 하지만 되지 않았다.

 

해결 시도 but 실패 . 처음 코드는 상세 페이지에서 rtk-query를 쓰지 않고 바로 firebase API addDoc으로 넣었는데, 그래서 rtk-query의 invalidatetags가 적용이 안되어서 그런 줄 알았다. 그래서 rtk-query로 코드를 리팩토링 했는데, 같은 문제가 일었났다. 

 

해결. 튜터님한테 물어보니까 react의 page가 다르면 다른 client이기 때문에, apislice에서 invalidatetags를 해주더라도, 상세페이지에만 적용되는 것이기 때문에 유저 페이지에 적용이 되지 않은 것이라고 그러셨다. 그래서 수동으로 refetch를 해주었더니 데이터가 받아와졌다!!!