API fetch는 하겠는데, useEffect 즉 비동기가 어려워요

by

알 듯 못 알듯한 useEffect

각 페이지에 또 로직에 맞는 api를 payload 에 맞춰서 request 하고 response 로 데이터를 잘 조리고 삶고 해서 원하는 양식대로 뿌려주는것..

api는 부르겠으나, 비동기라서 그런지 참으로 useEffect나 이런 것을 잘 활용 해야 하는듯.. 또 F12켜서 개발자 도구 잘 봐야 하는듯! 뭐를 주고 받고 이 다음에 무슨 api를 요청하는지 이런 것!

다행히 UI 작업이 상대적으로 좀 빨라서 미리 작업을 더미 데이터로 마무리 해 놓아서 그런지, 다시 그 더미 데이터 를 버리고 받은 데이터로 잘 조작해서 사용해야 하는데, 이 때부터 정말!!! 알고리즘이나 map, filter, find 등 배열을 잘 복사하고 오리고 조리고 해야 겠더라..!

다시 신규 대시보드 프로젝트로 돌아오면서 살짝 한 숨이 나오지만 그래도 재미가 있다. 하다 보면 참 시간이 잘 흐르고 있음~! 그래서 기억 나는 대로 생존 정리!!

1. 부모, 자식 컴포넌트 간의 api 호출시 부모에서 호출하면 자식도 한번 더 렌더링되니 부모에서 불러라~

상사 말로는 그냥 자식 api도 부모 컴포넌트에서 호출하라고 했다. 그리고 그 data를 props로 전달하라고 함.

그랬더니, 정말 한번만 호출되네… 나는 RTK 라 부르는 Redux ToolKit을 쓰면 무조건 다 createSlice, store에 등록해서 전역변수 처럼 쓰는 줄 알았는데, 굳이 안그러고 props로 부모가 자식한테 유업처럼 주는걸 섞어쓰더라ㅋㅋ

특히 부모쪽에서 api를 부르는 경우 왠만하면 그냥 유업으로 props를 넘겨라~~~

무튼 상사의 경력은 정말 무시 못한다… 코딩 잘 하는 내 미얀마 상사 멋져 보임…!!!!

2. api 호출시 initialState : {}로 해놓고 route 주소에 /dashboard가 아닌 /로 해야하는데 api 주소 달라서 200 못받았다가 드디어 200 받음. 휴…

 

3. 이미 UI작업은 마쳤기에 데이터만 잘 바인딩하면 되는데 자꾸 undefined나 이런게 뜨는거임..!

그래서 보니까 api 호출 전에 UI 작업으로 하려고 해서 그런거라서 아래 조건을 넣으니 해결 되었다.

첫 화면이 leaflet 지도에 위도 경도를 포함한 마커와 툴팁과 같은 핀과 실시간 카운트가 있다.

if (!visitorCount) { return <div>Loading data…</div>; }

 

4. leaflet map을 사용하고 있는데 자꾸 NAN latlng 에러가 났다.

그래서 관련된 mapcalculatecenter페이지와 recenterposition button page를 막 뒤지고, 했는데, 결국은 Regions.map을 돌린데에서 에러가 난거다. all region 즉 polygon이 없는 값을 제외한 otherRegions를 map돌려야했는데 그건 깜빡했음 ㅠㅠ 에러 크게 쓰여진거 말고도 하단부까지 세세히 보자..! 잘 보니까 상사는 에러를 유심히 읽어보면서 찾아가더라..
나도 그래야겠다… 감이 안살지만..

 

5. 슬라이스에서 자주 쓰는것 변수로 만들어서 바로 내보내기!

그런데 해당 js에서 어떻게 사용하는지 깜빡하는 것이였다. 데이브님의 코드를 뒤적해서 찾아내서 적용하니 잘 되었다.

export const siteName = (state) => state.regions.name; slice에서 내보내고
const selectedSiteName = useSelector(siteName) 이렇게 받는데 이름 달라야함

<div>{selectedSiteName}</div> 사용시 이렇게~!

6. 이럴때는 변수의 중괄호를 벗겨내네?!

제시된 코드 조각은 JavaScript 객체 리터럴 내에서 중괄호를 중첩하여 사용하고 있습니다. 중괄호 안에 표현식을 포함하려면 중괄호를 중첩해서 사용하거나, 간단하게 중괄호를 사용하지 않는 방법 중 하나를 선택해야 합니다.

다음은 수정된 코드입니다:

{count !== undefined && (
<div className="count-area" style={{ backgroundColor: `var(--r${region.region})` }}>
{isLoading ? (
<>...</>
) : (
count
)}
</div>
)}

여기서 중괄호를 중첩 사용하지 않고, 표현식 count를 바로 표시하도록 수정되었습니다. 이렇게 수정하면 오류가 발생하지 않아야 합니다.

7. 로그인 관련, 로그아웃 관련

일단 localStorage에 authenticated boolean 형태로 저장하고 logout시에는 해당 된 것을 삭제, 로그인 시에는 쭉 들고다니게 하고 app.js에서 수정해야지, 새로 고침해도 튕겨 나가지 않는다. 그리고 global state 즉 store 가게에 등록 해줘야함.. api 부를때 authenticated 있냐 없냐 파악하고 그 조건 통과해야지 fetch 하는 거임. 휴….어떻게든 해내고 있는게 참으로 신기하고 감사하고 참 많이 배운다..! 감사합니다!

프로젝트 생존기는 진행 중~~~~

내일 해야할 것!

  1. 부모에서 호출한 api, 그리고 자식 지도에서 툴팁을 클릭하면 부모에서 화면이 표시되는데, api를 호출할때 마다 자식은 재렌더링이 되는데, 클릭한 부모의 값은 재랜더링이 되지 않는 현상! state로 저장해서 값이 변경 될때마다 count, time 만 다시 뿌려주게 하면 될까? 그리고 자식이 몇개냐…?ㅋㅋㅋ 나는 결혼도 안했는뎅..
{clickedTooltip.region && visitorCount && visitorCount.length > 0 ? (
    <>
        <h1><span className="count-area"
                  style={{backgroundColor: `var(--r${clickedTooltip.region.region})`}}>R{clickedTooltip.region.region}&nbsp;&nbsp;{clickedTooltip.regionName}</span>
        </h1>
        <span><strong>{visitorCount.find(item => item.regionId === clickedTooltip.region.region)?.count}</strong>&nbsp;visitors</span>
        <p>{visitorCount.find(item => item.regionId === clickedTooltip.region.region)?.time}</p>
        {/*<span><strong>{clickedTooltip.count}</strong>&nbsp;visitors</span>*/}
        {/*<p>{clickedTooltip.time}</p>*/}
    </>
) : ( 이렇게 했더니 해결이 됬다...
  1. immer 불변성 오류 뜸. 얘는 진짜 못찾겠다. 하고 많은 슬라이스 중 누구냐.. 누구인지 말해달라… 보통 검색해 보니까 reducer에서 오류뜨는 것같던데, 나는 리듀서 쓴 애는 딱 하나 밖에 없고 그거 별거 없어서 에러 아닐 텐데.. 누구야.. 누구? 잡히기만 해봐라.. 아마 데이터를 받아서 필터 작업을 하고 []에 복사본을 넣었는데 그거 때문일까? 모야모야

내일도 은혜로 살아가게 해주세여.. 이렇게 간절함 속에, 또 내 실력을 알기에 신실한 크리스쳔이 되어가는 중..

Leave a Comment