ํ๋ก ํธ๋ 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>
)
}