<div id="readability-page-1" class="page"><div><div><a rel="noopener ugc nofollow" href="/?source=post_page-----a29c85663ffe--------------------------------"><div aria-hidden="false"><img alt="Jeong Woo Ahn" src="https://miro.medium.com/v2/resize:fill:88:88/2*5-DkBQYvxo0TLldXjX88Og.png" width="44" height="44" loading="lazy" data-testid="authorPhoto"></div></a></div>Web APIs의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Streams_API" rel="noopener ugc nofollow" target="_blank">Streams API</a>를 통해 스트리밍을 처리할 수 있다. <a href="https://developer.mozilla.org/en-US/docs/Web/API/Streams_API" rel="noopener ugc nofollow" target="_blank">Streams API</a>는 네트워크로 수신된 스트리밍 데이터를 자바스크립트가 프로그래밍적으로 다룰 수 있도록 해주는 API이다. 거의 모든 브라우저에서 지원하고 웹 워커에서도 사용가능 하다.<figure><figcaption>Author — okancelik07 — pixabay.com</figcaption></figure>스트리밍이란 네트워크를 통해 수신하려는 리소스를 작은 덩어리로 쪼개서 조금씩 처리하는 것을 말한다. 브라우저는 영상과 같은 미디어 자산을 수신할 때 이미 이 작업을 수행한다.<a href="https://developer.mozilla.org/en-US/docs/Web/API/Streams_API" rel="noopener ugc nofollow" target="_blank">Streams API</a>를 사용하면 원시데이터를 버퍼, 문자열, 블롭으로 생성할 필요없이 가능한 만큼 조금씩 자바스크립트로 처리를 할 수 있다.더 많은 것을 할 수있다 — 스트리밍이 시작했거나 끝났다는 것을 감지할 수도 있다. 뿐만 아니라 스트림을 서로 연결하고, 필요에 따라 오류를 처리하고, 스트림을 취소하고, 스트림을 읽는 속도에 반응할 수 있다. 와우!스트리밍 데이터를 fetch를 통해 가져왔을경우 응답본문은 <a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream" rel="noopener ugc nofollow" target="_blank">ReadableStream</a> 이다. 이것은 ReadableStream.getReader()로 만든 리더가 읽을 수 있다.<a href="https://developer.mozilla.org/en-US/docs/Web/API/WritableStream" rel="noopener ugc nofollow" target="_blank">WritableStream</a>을 사용하면 스트리밍 데이터를 작성할 수도 있다.<h2 id="87c0">스트리밍 데이터 처리 실습</h2>그럼 스트림을 받아와 보자. fetch 메소드로 간단하게 받을 수 있다.<pre>const { body } = await fetch(url); // body is readableStream const reader = body.getReader(); while (true) { const readable = await reader.read(); console.table(readable) if (readable.done) break; }</pre>위에서 언급한 것처럼 응답 바디는 <a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream" rel="noopener ugc nofollow" target="_blank">ReadableStream</a> 형태이므로, 리더 메소드를 통해 읽을 수 있다.콘솔은 아래와 같이 찍힐 것이다.<pre>{ done: false, value: Uint8Array(27)[100, 97, 116, ...] }{ done: false, value: Uint8Array(27)[100, 97, 116, ...] }(...){ done: true, value: Uint8Array(27)[100, 97, 116, ...] }</pre>스트리밍이 끝나는 시점에 done 값이 true가 들어온다. true 나 나올때까지 스티리밍을 while 문을 이용해 처리한다.value 에는 Uint8Array 타입(8비트 부호없는 정수 배열)의 배열이 세팅된다. 그래서 디코딩하는 작업이 필요하다. <a href="https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder" rel="noopener ugc nofollow" target="_blank">TextDecoder</a> 를 통해 아래와 같이 디코딩을 할 수 있다.<pre>const decoder = new TextDecoder(); while (true) { const readable = await reader.read(); if (readable.done) break; const chunks = decoder.decode(readable.value); console.log(chunks) }</pre>디코딩된 chunks 를 뿌려보면 아래와 같다.<pre>data: {"data": "\uac00"} data: {"data": "\uc5d0"} data: {"data": "\uac8c"} data: {"data": " "} data: {"data": "\uc0c1"} ...</pre>어쩌다 보니 data로 두번 감싸져 있는데, 청크 데이터 형태는 스트리밍을 제공해주는 제공처의 상황에 따라 모두 다르니 참고만 하시길.gpt4 처럼 실시간으로 답변을 보여주고 싶다.<figure></figure>받은 청크를 chat-stream.js 컴포저블을 만들어 보자.<pre>const resolveStream = async ({ data, onChunk = () =&gt; {}, onReady = () =&gt; {}, body, }) =&gt; { const reader = body.getReader(); const decoder = new TextDecoder(); while (true) { const readable = await reader.read(); if (readable.done) break; const decodedValue = decoder.decode(readable.value); const chunks = decodedValue .replaceAll(/^data: /gm, "") .split("\n") .map((c) =&gt; { if(c &amp;&amp; c.length &gt; 1) return JSON.parse(c.replaceAll(/\n/g, "")) }); for (let chunk of chunks) { if (!chunk) continue; data.value += chunk.data; onChunk(chunk.data); } } onReady({ data: data.value }); };const chatStream = ({ onChunk = () =&gt; {}, onReady = () =&gt; {}, onError = () =&gt; {}, body, }) =&gt; { const data = ref(""); try { resolveStream({ data, onChunk, onReady, body, }); } catch (error) { onError(error) } return { data: readonly(data), }; }export const useChatStream = () =&gt; { return { chatStream } };</pre><ol><li id="0f0c">body 를 받아서</li><li id="949a">TextDecoder 로 디코딩</li><li id="2121">while 문으로 청크 처리</li><li id="e4d6">onChunk 로 필터링 한 청크데이터 넘김</li><li id="d9e2">모든 청크가 처리 완료되면 onReady 호출</li><li id="7130">에러가 발생하면 onError 호출</li></ol>외부에서는 데이터를 변경할 수 없도록 조치를 했다.이 컴포저블 함수는 아래와 같이 사용할 수 있다.<pre>&lt;script setup&gt; const { chatStream } = useChatStream(); const answer = reactive({status: null, message: ''});const { body } = await fetch(url);chatStream({ body, onChunk: (data) =&gt; { answer.status = 'ing'; answer.message += data; } onReady: () =&gt; { answer.status = 'done'; } onError: () =&gt; {} }) &lt;/script&gt;&lt;template&gt; &lt;div&gt; Answer: {{answer.message}} &lt;/div&gt; &lt;/template&gt;</pre>여기까지가 문자열 스트리밍을 다루는 기초적인 내용이다. Vue3 기준으로 작성했지만, 대부분의 코드가 일반 자바스크립트이기 때문에 다른 프레임워크에서도 참고가 어렵지 않을것이다.아래는 보너스</div><div><h2 id="02b6">pipeThrough</h2>스트리밍되는 문자열을 디코딩하는 다른 방법이 있다.위에서 언급한 방법<pre>const reader = body.getReader(); const decoder = new TextDecoder(); while (true) { const readable = await reader.read(); if (readable.done) break; const decodedValue = decoder.decode(readable.value); }</pre>pipeThrough() 활용하는 방법<pre>const reader = body.pipeThrough(new TextDecoderStream()).getReader(); while (true) { const readable = await reader.read(); if (readable.done) break; ... }</pre>이 방법은 두 가지 장점이 있다.<ul><li id="5910">TextDecoder로 디코딩하는 로직을 약간 줄일 수 있다.</li><li id="e96f">파이핑을 하면 파이핑 동안에 스트림을 잠궈(lock) 다른 사이드 이펙트를 줄일 수 있다.</li></ul><a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/pipeThrough" rel="noopener ugc nofollow" target="_blank">여기서 더 자세한 내용</a>을 볼 수 있다.</div></div>

Stories by Jeong Woo Ahn on Medium

Web APIs의 Streams API를 통해 스트리밍을 처리할 수 있다. Streams API는 네트워크로 수신된 스트리밍 데이터를 자바스크립트가 프로그래밍적으로 다룰 수 있도록 해주는 API이다. 거의 모든 브라우저에서 지원하고 웹 워커에서도 사용가능 하다.
스트리밍이란 네트워크를 통해 수신하려는 리소스를 작은 덩어리로 쪼개서 조금씩 처리하는 것을 말한다. 브라우저는 영상과 같은 미디어 자산을 수신할 때 이미 이 작업을 수행한다.
Streams API를 사용하면 원시데이터를 버퍼, 문자열, 블롭으로 생성할 필요없이 가능한 만큼 조금씩 자바스크립트로 처리를 할 수 있다.
더 많은 것을 할 수있다 — 스트리밍이 시작했거나 끝났다는 것을 감지할 수도 있다. 뿐만 아니라 스트림을 서로 연결하고, 필요에 따라 오류를 처리하고, 스트림을 취소하고, 스트림을 읽는 속도에 반응할 수 있다. 와우!
스트리밍 데이터를 fetch를 통해 가져왔을경우 응답본문은 ReadableStream 이다. 이것은 ReadableStream.getReader()로 만든 리더가 읽을 수 있다.
WritableStream을 사용하면 스트리밍 데이터를 작성할 수도 있다.
스트리밍 데이터 처리 실습
그럼 스트림을 받아와 보자. fetch 메소드로 간단하게 받을 수 있다.
const { body } = await fetch(url);
// body is readableStream
const reader = body.getReader();
while (true) {
 const readable = await reader.read();
 console.table(readable)
 if (readable.done) break;
}
위에서 언급한 것처럼 응답 바디는 ReadableStream 형태이므로, 리더 메소드를 통해 읽을 수 있다.
콘솔은 아래와 같이 찍힐 것이다.
{
 done: false,
 value: Uint8Array(27)[100, 97, 116, ...]
}
{ done: false,
 value: Uint8Array(27)[100, 97, 116, ...]
}
(...)
{
 done: true,
 value: Uint8Array(27)[100, 97, 116, ...]
}
스트리밍이 끝나는 시점에 done 값이 true가 들어온다. true 나 나올때까지 스티리밍을 while 문을 이용해 처리한다.
value 에는 Uint8Array 타입(8비트 부호없는 정수 배열)의 배열이 세팅된다. 그래서 디코딩하는 작업이 필요하다. TextDecoder 를 통해 아래와 같이 디코딩을 할 수 있다.
const decoder = new TextDecoder();
while (true) {
 const readable = await reader.read();
 if (readable.done) break;
 const chunks = decoder.decode(readable.value);
 console.log(chunks)
}
디코딩된 chunks 를 뿌려보면 아래와 같다.
data: {"data": "\uac00"} 
data: {"data": "\uc5d0"} 
data: {"data": "\uac8c"} 
data: {"data": " "} 
data: {"data": "\uc0c1"}
...
어쩌다 보니 data로 두번 감싸져 있는데, 청크 데이터 형태는 스트리밍을 제공해주는 제공처의 상황에 따라 모두 다르니 참고만 하시길.
gpt4 처럼 실시간으로 답변을 보여주고 싶다.
받은 청크를 chat-stream.js 컴포저블을 만들어 보자.
const resolveStream = async ({
 data,
 onChunk = () => {},
 onReady = () => {},
 body,
}) => {
 const reader = body.getReader();
 const decoder = new TextDecoder();
 while (true) {
 const readable = await reader.read();
 if (readable.done) break;
 const decodedValue = decoder.decode(readable.value);
 const chunks = decodedValue
 .replaceAll(/^data: /gm, "")
 .split("\n")
 .map((c) => {
 if(c && c.length > 1) return JSON.parse(c.replaceAll(/\n/g, ""))
 });
 for (let chunk of chunks) {
 if (!chunk) continue;
 data.value += chunk.data;
 onChunk(chunk.data);
 }
 }
 onReady({ data: data.value });
};
const chatStream = ({
 onChunk = () => {},
 onReady = () => {},
 onError = () => {},
 body,
}) => {
 const data = ref("");
 try {
 resolveStream({
 data,
 onChunk,
 onReady,
 body,
 });
 } catch (error) {
 onError(error)
 }
 
 return {
 data: readonly(data),
 };
}
export const useChatStream = () => {
 return {
 chatStream
 }
};
body 를 받아서
TextDecoder 로 디코딩
while 문으로 청크 처리
onChunk 로 필터링 한 청크데이터 넘김
모든 청크가 처리 완료되면 onReady 호출
에러가 발생하면 onError 호출
외부에서는 데이터를 변경할 수 없도록 조치를 했다.
이 컴포저블 함수는 아래와 같이 사용할 수 있다.
<script setup>
const { chatStream } = useChatStream();
const answer = reactive({status: null, message: ''});
const { body } = await fetch(url);
chatStream({
 body,
 onChunk: (data) => {
 answer.status = 'ing';
 answer.message += data;
 }
 onReady: () => {
 answer.status = 'done';
 }
 onError: () => {} 
})
</script>
<template>
 <div>
 Answer: {{answer.message}}
 </div>
</template>
여기까지가 문자열 스트리밍을 다루는 기초적인 내용이다. Vue3 기준으로 작성했지만, 대부분의 코드가 일반 자바스크립트이기 때문에 다른 프레임워크에서도 참고가 어렵지 않을것이다.
아래는 보너스
pipeThrough
스트리밍되는 문자열을 디코딩하는 다른 방법이 있다.
위에서 언급한 방법
const reader = body.getReader();
const decoder = new TextDecoder();
while (true) {
 const readable = await reader.read();
 if (readable.done) break;
 const decodedValue = decoder.decode(readable.value);
}
pipeThrough() 활용하는 방법
const reader = body.pipeThrough(new TextDecoderStream()).getReader();
while (true) {
 const readable = await reader.read();
 if (readable.done) break;
 ...
}
이 방법은 두 가지 장점이 있다.
TextDecoder로 디코딩하는 로직을 약간 줄일 수 있다.
파이핑을 하면 파이핑 동안에 스트림을 잠궈(lock) 다른 사이드 이펙트를 줄일 수 있다.
여기서 더 자세한 내용을 볼 수 있다.
이 글이 마음에 드셨다면 👏🏽👏🏽와 커피한잔 후원하기 (카카오페이), 이메일로 소식을 받아보고 싶으시다면 ✉️ 이메일 구독하기 해주세요.

[Vue3]프론트엔드 문자 스트리밍 처리에 관한 것

댓글