Stream 데이터란?
우리가 흔히 말하는 유튜버들의 스트리밍이라는 단어가 파생된 근본이다.
Stream Data 는 연속적으로 생성되고 전송되는 데이터이다.
그래서 실시간, 확장성, 대량으로 등 데이터를 다루기 편한 부분이다
뭔가 WebSocket이랑 비슷한 느낌?
React.js 에서 RestAPI로 써보기
const StreamingComponent = () => {
const [messages, setMessages] = useState([]);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('http://localhost:5000/stream');
const reader = response.body.getReader();
const decoder = new TextDecoder();
let receivedData = [];
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value, { stream: true });
const lines = chunk.split('\n').filter(line => line.startsWith('data: '));
for (const line of lines) {
const jsonData = JSON.parse(line.replace('data: ', ''));
receivedData.push(jsonData);
setMessages([...receivedData]); // UI 업데이트
}
}
};
fetchData();
}, []);
return (
<div>
<ul>
{messages.map((msg, index) => (
<li key={index}>{index}: {msg.message}</li>
))}
</ul>
</div>
);
};await fetch(url) 하는 것은 일반 RestAPI 와 동일하다.
response.body.getReader() 로 해당 데이터를 가져올 수 있고,
decoder.decode(value, { stream: true }) 디코딩을 한 번 해야한다.
Done
그리고 마지막으로 데이터가 끝나면 done 을 호출하게 된다.
추가적으로 done 에 대한 로직을 구현할 수도 있다.
if (done) {
alert('Streaming 이 종료되었습니다!')
}Decoding 을 해야하는 이유
위의 소스를 보면, decoder.decode(value) 를 하고 있는데, 디코딩을 해야하는 이유는 다음과 같다.
- 데이터 압축 해제: 스트리밍 과정에서 데이터는 효율적인 전송을 위해 압축되고 인코딩됩니다. 수신 장치에서는 이 데이터를 원래의 형태로 복원하기 위해 디코딩이 필요합니다
- 호환성 확보: 인코딩된 데이터는 다양한 장치와 플랫폼에서 재생할 수 있도록 표준화된 형식으로 변환됩니다. 디코딩은 이 표준화된 형식을 각 장치에서 재생 가능한 형태로 변환하는 과정입니다
- 실시간 재생: 스트리밍 데이터는 작은 세그먼트로 나누어져 전송됩니다. 각 세그먼트를 수신할 때마다 디코딩하여 즉시 재생할 수 있게 합니다
- 품질 최적화: 디코딩 과정에서 네트워크 상태나 장치 성능에 따라 적절한 품질의 스트림을 선택하여 재생할 수 있습니다
- 다양한 형식 지원: 트랜스코딩(인코딩과 디코딩의 조합)을 통해 다양한 비디오 형식을 지원하고, 각 사용자의 환경에 맞는 최적의 형식으로 변환할 수 있습니다
WebSocket과 Streaming 의 차이점
왠지 비슷하다고 느껴졌는데, 그 이유가 여기 있었다.
단지 사용처가 조금 다를 뿐(텍스트+양방향, 동영상+단방향) 이었다.
반응형
'FrontEnd > React.js' 카테고리의 다른 글
| [React] Streaming 처리하기 3 - abort 기능 추가 (0) | 2025.03.06 |
|---|---|
| [React.js] Stream 데이터 fetch로 처리하기 - 2 (0) | 2025.02.28 |
| [Error] Unexpected token '??=' 에러 해결 방법 (0) | 2025.02.26 |
| [나는 리뷰어다] React-Native 도서 리뷰 / 소문난 명강의 : 김범준의 핸즈온 리액트 네이티브 (4) | 2023.03.27 |
| [React.js + TS] Buy me a Coffee☕ 한국ver. 구현하기 (0) | 2023.02.21 |
