🙆🏻‍♀️ 개발자 소희씨의 일일 🙆🏻‍♀️

어떡하지...❗

프론트는 A서버와 패키지하여 B서버의 사이트에 붙기로 함.

주차장 카메라 목록 스냅샷 구현.
카메라 목록은 같은 A서버에서 스냅샷은 B서버에서 요청해야 했다.

스냅샷 요청은 url에 A서버가 준 카메라 아이디와 씨리얼 넘버가 들어가야 했고 헤더에 인증 토큰을 담아야 했다.
인증 토큰 넣는 것은 B서버 사이트에서 사용하고 있는 키클록(keycloak)라이브러리 예제 코드를 사용했다.

이렇게 받은 데이터는 blob형태로 오는데 이것을 url로 변환하여 각 카메라 리스트 img src에 집어 넣어야 했다.

자괴감의 시작...🤦🏻‍♀️

처음에는 img src에 해당 url을 반환하는 함수를 넣었다.

const getCameraSnapshot = async id => {
  const reader = new FileReader();
  const time = Date.now();
  
  await commonGetRequest(`/media/${id}/refresh=${time}`, keycloak.token).then(res => {
   reader.readAsDataURL(res);
    
   reader.onload = e => {
   return e.currentTarget["result"]
   };
  });
}

{cameraList.map(list => {
  const v = list.properties;
  return (
    <div className="img">
      <img src={getCameraSnapshot(`${v.id}/${v.serial_num}`)} alt="스냅샷" /> 
    </div>
  )
}

그러나 src에는 원하는 값이 아닌 promise 객체가 반환...
저는 Fulfilled된 결과값이 필요하다구요...!

그때부터 구글링 시작...☆
했지만 원하는 답변을 얻지 못 했다.

그러다 "img src에 비동기 함수를 담으면 안 된다" 는
다른 개발자분의 조언을 얻었다.(빛 같은 존재)

해결의 실마리를 가지고 도전...!

어떡하지...✨

카메라와 스냅샷을 매칭하고 마우스 오버 시에 갱신도 필요했기에 자료구조 MAP을 활용하기로 했다.
(key, value 조합, 중복 허용 안 함)

우선 필요한 변수 선언...

// 함수 컴포넌트 위
const snapshotMap = new Map();

// 함수 컴포넌트 안
const [snapshotList, setSnapshotList] = useState([]);

id를 key로 id, src를 객체로 만들어 value로 set한 뒤,
snapshotList에 담는다.

const getCameraSnapshot = async id => {
  const reader = new FileReader();
  const time = Date.now();
    await commonGetTms(`/media/${id}/refresh=${time}`, keycloak.token).then(res => {
    reader.readAsDataURL(res);

    reader.onload = e => {
      const v = e.currentTarget["result"];
          snapshotMap.set(id, { id, src: v });
          setSnapshotList([...snapshotMap.values()]);
    };
  });
};

이제 처음 카메라 목록을 요청할 때, forEach문을 돌면서 위의 스냅샷 함수를 호출한다.

const getCamereList = async () => {
  await commonGetRequest(`카메라 목록 요청`).then(res => {
    const result = res.results.features;
    result.forEach(list => {
      const v = list.properties;
      getCameraSnapshot(`${v.id}/${v.serial_num}`);
      });
    });
};

img부분에 snapshotList로 map()을 돈다.
snapshotList의 id와 카메라 리스트의 id가 같으면 해당 img src를 넣어준다.
마우스 오버시에도 스냅샷 요청 함수를 넣어주면 된다.

{cameraList.map(list => {
  const v = list.properties;
  return (
    <div className="img">
      {snapshotList.map(
        _list =>
         _list.id === `${v.id}/${v.serial_num}` && (
         <img key={_list.id}
              src={_list.src}
              onMouseOver={() => newSnapshot(_list.id)}
              alt="스냅샷"
          />
         ),
       )}
    </div>
  )
}