[React.js] Stream 데이터 처리하기 - 1

streaming

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) 를 하고 있는데, 디코딩을 해야하는 이유는 다음과 같다.

1. 데이터 압축 해제: 스트리밍 과정에서 데이터는 효율적인 전송을 위해 압축되고 인코딩됩니다. 수신 장치에서는 이 데이터를 원래의 형태로 복원하기 위해 디코딩이 필요합니다
2. 호환성 확보: 인코딩된 데이터는 다양한 장치와 플랫폼에서 재생할 수 있도록 표준화된 형식으로 변환됩니다. 디코딩은 이 표준화된 형식을 각 장치에서 재생 가능한 형태로 변환하는 과정입니다
3. 실시간 재생: 스트리밍 데이터는 작은 세그먼트로 나누어져 전송됩니다. 각 세그먼트를 수신할 때마다 디코딩하여 즉시 재생할 수 있게 합니다
4. 품질 최적화: 디코딩 과정에서 네트워크 상태나 장치 성능에 따라 적절한 품질의 스트림을 선택하여 재생할 수 있습니다
5. 다양한 형식 지원: 트랜스코딩(인코딩과 디코딩의 조합)을 통해 다양한 비디오 형식을 지원하고, 각 사용자의 환경에 맞는 최적의 형식으로 변환할 수 있습니다

WebSocket과 Streaming 의 차이점

왠지 비슷하다고 느껴졌는데, 그 이유가 여기 있었다.
단지 사용처가 조금 다를 뿐(텍스트+양방향, 동영상+단방향) 이었다.